body {
    font-family: 'Single Day', sans-serif; /*Using this font for the whole website*/
    margin: 0;
    padding: 0;
}

header {
    .topbarContainer{
        height: 15%;
        width: 100%;
        background-color: #FFE382;
        display: flex;
        align-items: center;
        position: fixed; /*Fixes the nav bar so it stays even if you scroll down*/
        top: 0;
        z-index: 999; /*Makes sure nav bar does not clip through anything*/
    }
    
    .topbarLeft{
        flex: 3;
        margin-left: 50px;
    }
    
    .topbarImg{
        width: 100px;
        height: 100px;
        margin-right: 50px;
        margin-left: 20px;
    }

    .logo{ /*BANANZA name on nav bar*/
        font-size: 55px;
        margin-right: 150px;
        color:black;
    }
    
    
    .topbarLink{ /*The nav bar buttons like Home and About*/
        margin-right: 50px;
        font-size: 30px;
        cursor: pointer;
    }
}

main {
    .topMain{ /*The Banana and first part of the site you see*/
        padding-top: 130px;
        margin-left: 160px;
        margin-top: 100px;
    }

    .title{ /*"Make teaching health silly~*/
        font-size: 70px;
        color: #FF935D;
    }

    .descWrapper{ /*Area after the title, keeping it contained*/
        width: 800px;
        height: 70px;
    }

    .desc{ /*Text in the description wrapper */
        font-size:35px;
        margin-top: 30px;
    }
    
    .bananaImage{ /*Where da banana? How big?*/
        width:350px;
        height: 350px;
        margin-top: -200px;
        margin-left: 70%;
    }

    .monkeImage{ /*Where da monke? Big how?*/
        width:400px;
        height: 400px;
        margin-left: 200px;
        margin-top: 100px;
    }

    /*This remaining section in main deals with horizontal scrolling*/
    .scroll-container {
        padding-top: 150px;
        padding-bottom: 100px;
        width: 100%;
        overflow-x: auto; /*overflow-x and overflow-y make sure only this section is scrollable*/
        overflow-y: hidden;
        white-space: nowrap;
    }
    
    .item {
        display: inline-block; /*Makes images appear in one line instead of stacking*/
        border-radius: 30%; /*Rounded edges for the item*/
        width: 300px; 
        height: 300px; 
        background-color: #FFE382;
        margin-right: 50px; /*Spacing between items */
        position: relative; /*Puts the images in the container and keeps it there */
    }
    
    .item img {
        width: 100%; /*Image has to fit the item width and height*/
        height: 100%; 
        object-fit: cover; /* Cover the container without stretching */
        border-radius: 30px; /*Rounded edges for the image*/
    }

}

.content-block1 { /*About Us! Section styling*/
    margin-left:auto;
    margin-right: 50px;
    margin-top: -400px;
    width: fit-content;
}

#about-header{ /*Formatting "About Us!"*/
    color: #FF935D;
    font-size: 50px;
}

.about-content{ /*Formatting the actual description*/
    padding-bottom: 35%;
    font-size: 25px;
    width: 800px;
    height: 70px;
}

.games-grid { /*Game description cards*/
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 30px; /*Spacing between items*/
    padding: 50px;
    margin: auto; /* Centers grid*/
    max-width: 85%; 
}

.game-description {
    background: #fffbeb; /*Card background*/
    border-radius: 10px;
    font-size: 20px;
    padding: 20px;
    text-align: left;
}

/* Button Styling */
button {
    background-color: #FF935D; /*Button background*/
    font-family: 'Single Day', sans-serif; 
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 10px; /*Rounding*/
    cursor: pointer;
    font-size: 25px;
    margin-top: 15px; /*Space between button and text*/
}

button:hover {
    background-color: #ffa97e; /*Lighter Shade for hovering*/
}

footer {
    /* Add styles for the footer, not needed right now. Delete this later. */
    .footerContainer{
        width: 100%;
        height: 200px;
        background-color: #FFE382;
    }

    .company{ /*Referring to "MonkeyBusiness*/
        margin-left: 10%;
        padding-top: 2%;
        color: #939EA4;
        font-size: 20px;
        padding-bottom: 2.5%;
    }

    hr{ /*Horizontal line*/
        width: 80%;
        height: 1px;
        border: 0;
        border-top: 1px solid #939EA4;
        margin: auto;
        padding-bottom: 1%;
    }

    .footerLink1{ /*Home*/
        margin-left: 10%;
        color: #939EA4;
        padding-top: 3%;
        font-size: 20px;
    }
    .footerLink2{ /*About*/
        color: #939EA4;
        margin-left: 5%;
        padding-top: 3%;
        font-size: 20px;
    }
}


/*Scrollbar customization*/
::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background-color: #FFF3C7;
}

::-webkit-scrollbar-thumb{
    background-color: #FFE382
}