:root{
    --pure: #fff;
    --primary: #ffac26;
    --secondary: #faae22;
    --dark-text: #333;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background: #f4f6f8;
    color: var(--dark-text);
    display: grid;
    place-items: center;
    min-height: 10rem;
    /* padding: 40px; */
}

header{
    background: var(--primary);
    color: var(--pure);
    width: 100%;
    position: fixed;
    top: 0;
    min-height: 80px;
    text-align: center;
    align-content: center;
}

.hero{
    background: var(--pure);
    /* min-height: 80px; */
    /* width: 0; */
}

.mainbar{
    margin: 0;
    padding: 0;
    background: #f7bc4f;
    position: fixed;
    top: 25;
    left: 0;
    width: 65%;
    height: 100%;
    font-size: large;
}

.sidebar{
    background: var(--pure);
    color: var(--dark-text);
    width: 35%;
    height: 100%;
    position: fixed;
    right: 0;
    margin-bottom: 5px;
}
 
h2{
    text-align: center;
}

.footer{
    position: fixed;
    bottom: 0;
    background: var(--primary);
    color: var(--pure);
    font-size: large;
    width: 100%;
    height: 60px;
    text-align: center;
    align-content: center;
}

.footer p{
}