footer{
        margin:0;
        padding:0;
        width:100%;
        height:7em;
        background-color:grey;
    }

.footer-info{
    width:100%;
    text-align:center;
        
}

.footer-message{
    margin:0;
    padding:0;
}

.footer-message h5{
    font-weight:lighter;
}

.price{
    width:auto;
    text-align: center;
    height:5em;
    margin-bottom:2em;
}

.cart-button{
    padding:0;
    margin:0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    height:3em;
}

button{
    margin-right:1em;
    background-color:rgb(255, 192, 76);
    border:none;
    border-radius: 10px;
    height:2em;
    width:8em;
    transition: 0.2s;
}
button:hover{
    background-color:rgb(251, 174, 32);
}
button:active{
    background-color:rgb(225, 147, 1);
}
.star-product-rating{
    transition:0.5s;
}
.star-product-rating:hover{
    color:rgb(251, 174, 32);
    cursor:default;
}

.star-product-rating:active::before{
    content:"\2605";
    color:rgb(251, 174, 32);
    position:absolute;
}


.star-line:hover{
    cursor:default;

}
.darken-page-screen{
        width:100%;
        height:100%;
        background-color:rgba(0, 0, 0, 0.534);
        z-index:1;
        position:fixed;
        display:none;
}


@media(min-width:1101px){


    body{

        border-color: black;
        min-height:800px;

    }
    main{
        overflow:hidden;
        margin-left: auto;
        margin-right: auto;
        width:75%;

    }

    .main-container{
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        gap:2em;
        width:auto;
        height:100%;
    }
    /*.total-product-container{
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow:hidden;
        background-color:rgb(255, 255, 255);
        gap:1.5rem;
        width:auto;
    }*/
    .product-card-section{
        display:flex;
        margin-top:2em;
        flex-direction: row;
        flex-wrap: wrap;
        /*margin-right:0;

        column-gap: 0;
        justify-content: flex-start;
        align-content: flex-start;
        overflow:hidden;
        background-color:rgb(255, 255, 255);*/
        gap:1.5rem;
        width:auto;
    }
    .keyboard-page-picture{
        padding:0;
        margin:0;
        width:50%;
        height:auto;
        background-color:#e28113b4;
        background-image:url(../keyboard-images/black-keyboard-banner.png);
        background-size: 100% 200%;
        background-position:left;
        border-radius:10px;
        background-repeat: no-repeat;
        overflow: hidden;
        text-align:left;
    }

    .banner-text{
        display:flex;
        flex-direction: column;
        justify-content: center;
        margin:0;
        padding:0;
        height:100%;
        width:50%;
        background-color:rgba(255, 228, 196, 0.807);
    }

    .banner-text h1,
    .banner-text h3{
        margin-top:2rem;
        margin-left:3rem;
        font-size:2rem;
    }
    header{
        margin:0;
        padding:0;
    }

    /*NAVIGATION*/

    .desktop-nav-container{
        display:flex;
        flex-direction: column;
        padding:0;
        margin:0;
        background-color: rgba(255, 255, 255, 0.753);
        width:100%;
        height:6rem;
    }

    .top-nav{
        background-color:rgb(219, 219, 219);
        height:2.5rem;
        padding:0;
        margin:0;
    }

    .top-nav ul{
        display:flex;
        flex-direction: row;
        gap:1rem;
        margin-right:11%;
        justify-content: end;
        list-style-type: none;
    }

    .logo h1{
        padding:0;
        margin:0;
        font-size:2rem;
    }

    .total-nav{
        text-align:left;
        border-bottom:solid;
        border-color:rgb(206, 206, 206);
        border-width: 1px;
        
    }

    .total-nav a{
        text-decoration:none;
        color:black;
    }

    .total-nav-ul{
        padding:0;
        margin-top:0;
        margin-bottom:0;
        display:flex;
        flex-direction:row;
        gap:12rem;
        justify-content:center;
        list-style-type:none;
    }

    .nav-item{
        position:relative;
    }


    .product-dropdown,
    .about-us-dropdown{
        z-index:1;
        display:none;
        flex-direction: column;
        justify-content: space-evenly;
        font-size:1rem;
        text-align:left;
        position:absolute;
        width:10em;
        height:10em;
        margin-right:35em;
        background-color:rgb(255, 255, 255);
    }



    .product-dropdown li,
    .about-us-dropdown li{
        list-style-type:none;
    }

    .nav-item:hover .product-dropdown,
    .nav-item:hover .about-us-dropdown{
        display: flex;
    }

    .product-dropdown li:hover,
    .about-us-dropdown li:hover{
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-color:burlywood;
        text-decoration-thickness:2px;
    }

    .mobile-nav-container{
        display:none;
    }


    /* NAVIGATION*/


    .logo{
        width:100%;
        text-align:center;
    }



    /*PRODUCT BOX STYLING*/

    .main-container{
        width:100%;
        margin-top:3em;
    }

    .keyboard-1-product-container,
    .keyboard-2-product-container,
    .keyboard-3-product-container,
    .keyboard-4-product-container,
    .keyboard-5-product-container,
    .keyboard-6-product-container,
    .keyboard-7-product-container,
    .keyboard-8-product-container{
        display:flex;
        /*flex-direction:column;
        justify-content:center;
        position:relative;*/
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8{
        border-radius: 10px;
        padding:0;
        margin:0;
        padding:1rem;
        background-color: rgb(233, 233, 233);
        width:auto;
        height:auto;
    }


    .product-image1,
    .product-image2,
    .product-image3,
    .product-image4,
    .product-image5,
    .product-image6,
    .product-image7,
    .product-image8{
        width: 15rem;
        height: 15rem;
        margin:0;
    }




    .product-image1 img,
    .product-image2 img,
    .product-image4 img,
    .product-image5 img,
    .product-image6 img,
    .product-image7 img,
    .product-image8 img{
        padding:0;
        margin:0;
        width:15rem;
        height:15rem;
        transition:0.1s;   
    }

    .product-image1 img:hover,
    .product-image2 img:hover,
    .product-image4 img:hover,
    .product-image5 img:hover,
    .product-image6 img:hover,
    .product-image7 img:hover,
    .product-image8 img:hover{
        padding:0;
        margin:0;
        width:16rem;
        height:16rem;   
    }

    .product-image3{
        padding-top:5rem;
        text-align:center;
        width: 15rem;
        height: 10rem;
        margin:0;
    }

    .product-image3 img{
        padding:0;
        margin:0;
        width:15rem;
        height:9em;
        transition:0.1s;
    }

    .product-image3 img:hover{
        padding:0;
        margin:0;
        width:16rem;
        height:11em;
    }

    .cart-button{
        width:auto;
        text-align:right;
    }

    .prod-description{
        overflow-wrap:break-word;
        text-align:left;
        height:7rem;
        width:15rem;
    }

    .statement-words{
        display:flex;
        justify-content: center;
        background-color:rgb(255, 184, 77);
        text-align:center;
        width:100%;
        height:5em;
        margin:0;
        padding:0;
    }

    .statement-words h1{
        flex-wrap:wrap;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }

    .end-image{
        width:100%;
        height:40em;
        margin-top:3em;
        background-color:#ffaaaa;
    }




    .footer-container{
        background-color:grey;
        width:100%;
        height:40em;
    }

    .mobile-logo{
        display:none;
    }
}
































































@media(max-width:1100px){

    .desktop-nav-container{
        display:none;
    }

    .mobile-nav-container{
        margin:0;
        padding:0;
        height:2em;
        width:100%;
        display:flex;
        flex-direction:row;
        justify-content: flex-end;
        position:relative;
        background-color:rgb(255, 255, 255);
        z-index:20;
    }

    .total-mobile-nav{
        display:none;
        right:0;
        padding:0;
        position:absolute;
        top:100%;
        width:20rem;
        height:30rem;
        background-color:rgb(255, 255, 255);
        z-index:20;
    }

    

    .visible-nav{
        bottom:2rem;
        padding:0;
        margin:0;
        text-align:left;
    }

    .visible-nav li{
        font-size:1.5rem;
    }

    .total-mobile-nav a{
        text-decoration:none;
        color:black;
    }

    .total-mobile-nav li{
        list-style-type:none;
    }

    

    .hamburger::before{
        content: "☰";
        font-size: 2rem;
        cursor: pointer;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        display:none;
    }

    .mobile-nav-item:hover .mobile-product-dropdown,
    .mobile-nav-item:hover .mobile-about-us-dropdown{
        display:block;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        margin-left:3rem;
        height:auto;
        width:auto;
    }

    .mobile-product-dropdown li:hover,
    .mobile-about-us-dropdown li:hover{
        text-decoration: underline;
        text-decoration-color: orange;
        text-decoration-thickness:2px;
        text-underline-offset: 5px;
    }

/* When checkbox is checked: change to X */
    #menu-toggle:checked ~ .hamburger::before{
        content: "✕";
        position:relative;
        z-index:30;
    }

    #menu-toggle:checked ~ .total-mobile-nav{
        display:block;
    }

    #menu-toggle:checked ~ .darken-page-screen{
        display:block;
        z-index:1;
    }
    
    .mobile-logo{
        display:block;
        padding:0;
        margin:0;
        width:100%;
        text-align:center;
        text-decoration:none;
    }

    .mobile-logo h1{
        color:black;
        padding:0;
        margin:0;

    }


    body{
    border-color: black;
    min-height:800px;

    }

    .total-product-container{
        display:flex;
        flex-direction: row;
        flex-wrap:wrap;
        background-color:rgb(255, 255, 255);
        gap:1.5rem;
        width:100%;
    }

    header{
        margin:0;
        padding:0;
    }

    /*NAVIGATION*/

    


    /* NAVIGATION*/


    .logo img{
        width:2em;
        height:2em;
    }


    .main-container{
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        gap:2em;
        width:auto;
        height:100%;
    }


    /*PRODUCT BOX STYLING*/



    main{
        padding:0;
        margin-top:0;
        margin-left: auto;
        margin-right: auto;
        width:90%;
    }

    .product-card-section{
        display:flex;
        flex-direction:row;
        justify-content: center;
        gap:1.5em;
        flex-wrap:wrap;
        width:auto;
    }
    .keyboard-page-picture{
        padding:0;
        margin:0;
        width:100%;
        height:auto;
        background-color:#e28113b4;
        background-image:url(../keyboard-images/black-keyboard-banner.png);
        border-radius:10px;
        overflow: hidden;
        text-align:left;
    }

    .banner-text{
        display:flex;
        flex-direction: column;
        justify-content: center;
        padding:0;
        margin:0;
        height:100%;
        width:50%;
        background-color:rgba(255, 228, 196, 0.807);
    }

    .banner-text h1,
    .banner-text h3{
        margin-left:3rem;
        font-size:2rem;
    }

    .keyboard-1-product-container,
    .keyboard-2-product-container,
    .keyboard-3-product-container,
    .keyboard-4-product-container,
    .keyboard-5-product-container,
    .keyboard-6-product-container,
    .keyboard-7-product-container,
    .keyboard-8-product-container{
        display:flex;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8{
        border-radius: 5%;
        padding:0;
        margin:0;
        padding:1rem;
        background-color: rgb(233, 233, 233);
        width:auto;
        height:auto;
    }


    .product-image1,
    .product-image2,
    .product-image3,
    .product-image4,
    .product-image5,
    .product-image6,
    .product-image7,
    .product-image8{
        width: 15rem;
        height: 15rem;
        margin:0;
    }




    .product-image1 img,
    .product-image2 img,
    .product-image4 img,
    .product-image5 img,
    .product-image6 img,
    .product-image7 img,
    .product-image8 img{
        padding:0;
        margin:0;
        width:15rem;
        height:15rem;
        transition:0.1s;   
    }

    .product-image1 img:active,
    .product-image2 img:active,
    .product-image4 img:active,
    .product-image5 img:active,
    .product-image6 img:active,
    .product-image7 img:active,
    .product-image8 img:active{
        padding:0;
        margin:0;
        width:16rem;
        height:16rem;   
    }

    .product-image3{
        padding-top:5rem;
        text-align:center;
        width: 15rem;
        height: 10rem;
        margin:0;
    }

    .product-image3 img{
        padding:0;
        margin:0;
        width:15rem;
        height:9em;
        transition:0.1s;
    }

    .product-image3 img:active{
        padding:0;
        margin:0;
        width:16rem;
        height:11em;
    }

    .cart-button{
        width:auto;
        text-align:right;
    }

    .prod-description{
        overflow-wrap:break-word;
        height:auto;
        width:15rem;
    }


    .statement-words{
        display:flex;
        justify-content: center;
        background-color:rgb(255, 184, 77);
        text-align:center;
        width:100%;
        height:5em;
        margin:0;
        padding:0;
    }

    .statement-words h1{
        flex-wrap:wrap;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }


    

    




    .end-image{
        width:100%;
        height:40em;
        margin-top:3em;
        background-color:#ffaaaa;
    }




    .footer-container{
        background-color:grey;
        width:100%;
        height:40em;
    } 

}































@media(max-width:360px){

    main{
        overflow:hidden;
    }

    .desktop-nav-container{
        display:none;
    }

    .mobile-nav-container{
        margin:0;
        padding:0;
        height:2em;
        width:100%;
        display:flex;
        flex-direction:row;
        justify-content: flex-end;
        position:relative;
        background-color:rgb(255, 255, 255);
    }

    .total-mobile-nav{
        display:none;
        right:0;
        padding:0;
        position:absolute;
        top:100%;
        width:20rem;
        height:30rem;
        background-color:rgb(255, 255, 255);
    }

    

    .visible-nav{
        bottom:2rem;
        padding:0;
        margin:0;
        text-align:left;
    }

    .visible-nav li{
        font-size:1.5rem;
    }

    .total-mobile-nav a{
        text-decoration:none;
        color:black;
    }

    .total-mobile-nav li{
        list-style-type:none;
    }

    

    .hamburger::before{
        content: "☰";
        font-size: 2rem;
        cursor: pointer;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        display:none;
    }

    .mobile-nav-item:hover .mobile-product-dropdown,
    .mobile-nav-item:hover .mobile-about-us-dropdown{
        display:block;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        margin-left:3rem;
        height:auto;
        width:auto;
    }

    .mobile-product-dropdown li:hover,
    .mobile-about-us-dropdown li:hover{
        text-decoration: underline;
        text-decoration-color: orange;
        text-decoration-thickness:2px;
        text-underline-offset: 5px;
    }

/* When checkbox is checked: change to X */
    #menu-toggle:checked ~ .hamburger::before{
        content: "✕";
    }

    #menu-toggle:checked ~ .darken-page-screen{
        display:block;
        z-index:10;
    }

    #menu-toggle:checked ~ .total-mobile-nav{
        display:block;
    }
    
    .mobile-logo{
        display:block;
        padding:0;
        margin:0;
        width:100%;
        text-align:center;
        text-decoration:none;
    }

    .mobile-logo h1{
        color:black;
        padding:0;
        margin:0;

    }


    body{
    border-color: black;
    min-height:800px;

    }

    .total-product-container{
        display:flex;
        flex-direction: row;
        flex-wrap:wrap;
        background-color:rgb(255, 255, 255);
        gap:1.5rem;
        width:100%;
    }

    header{
        margin:0;
        padding:0;
    }

    /*NAVIGATION*/

    


    /* NAVIGATION*/


    .logo img{
        width:2em;
        height:2em;
    }


    .main-container{
        display:flex;
        flex-wrap: wrap;
        flex-direction:row;
        gap:2em;
        width:auto;
        height:100%;
    }


    /*PRODUCT BOX STYLING*/



    main{
        padding:0;
        margin-top:0;
        margin-left: auto;
        margin-right: auto;
        width:90%;
    }

    .product-card-section{
        display:flex;
        flex-direction:row;
        justify-content: center;
        gap:1.5em;
        flex-wrap:wrap;
        width:auto;
    }
    .keyboard-page-picture{
        padding:0;
        margin:0;
        width:100%;
        height:auto;
        background-color:#e28113b4;
        background-image:url(../keyboard-images/black-keyboard-banner.png);
        border-radius:10px;
        overflow: hidden;
        text-align:left;
    }

    .banner-text{
        display:flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom:0;
        padding:0;
        margin-top:2em;
        height:100%;
        width:100%;
        background-color:rgba(255, 228, 196, 0.807);
    }

    .banner-text h1,
    .banner-text h3{
        margin-left:3rem;
        font-size:2rem;
    }

    .keyboard-1-product-container,
    .keyboard-2-product-container,
    .keyboard-3-product-container,
    .keyboard-4-product-container,
    .keyboard-5-product-container,
    .keyboard-6-product-container,
    .keyboard-7-product-container,
    .keyboard-8-product-container{
        display:flex;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8{
        border-radius: 5%;
        padding:0;
        margin:0;
        padding:1rem;
        background-color: rgb(233, 233, 233);
        width:auto;
        height:auto;
    }


    .product-image1,
    .product-image2,
    .product-image3,
    .product-image4,
    .product-image5,
    .product-image6,
    .product-image7,
    .product-image8{
        width: 15rem;
        height: 15rem;
        margin:0;
    }




    .product-image1 img,
    .product-image2 img,
    .product-image4 img,
    .product-image5 img,
    .product-image6 img,
    .product-image7 img,
    .product-image8 img{
        padding:0;
        margin:0;
        width:15rem;
        height:15rem;
        transition:0.1s;   
    }

    .product-image1 img:active,
    .product-image2 img:active,
    .product-image4 img:active,
    .product-image5 img:active,
    .product-image6 img:active,
    .product-image7 img:active,
    .product-image8 img:active{
        padding:0;
        margin:0;
        width:16rem;
        height:16rem;   
    }

    .product-image3{
        padding-top:5rem;
        text-align:center;
        width: 15rem;
        height: 10rem;
        margin:0;
    }

    .product-image3 img{
        padding:0;
        margin:0;
        width:15rem;
        height:9em;
        transition:0.1s;
    }

    .product-image3 img:active{
        padding:0;
        margin:0;
        width:16rem;
        height:11em;
    }

    .cart-button{
        width:auto;
        text-align:right;
    }

    .prod-description{
        overflow-wrap:break-word;
        height:auto;
        width:15rem;
    }


    .statement-words{
        display:flex;
        justify-content: center;
        background-color:rgb(255, 184, 77);
        text-align:center;
        width:100%;
        height:5em;
        margin:0;
        padding:0;
    }

    .statement-words h1{
        flex-wrap:wrap;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }


    

    




    .end-image{
        width:100%;
        height:40em;
        margin-top:3em;
        background-color:#ffaaaa;
    }




    .footer-container{
        background-color:grey;
        width:100%;
        height:40em;
    } 

}