/* viewport in dev tools too big = ctrl + zero (0) */
body {
    background-color: blanchedalmond;
}

/*Links in Navbar*/
#shop-nav-link,
#navbar {
    color: crimson;
    font-size: 22px;
    margin-left: 12px;
    padding-left: 10px;
    padding-top: 10px;
}

/*Shopping Cart buttons*/
.btn {
    background-color: coral;
    color: firebrick;
    font-size: 17.5px;
    border: solid 3px;
    border-radius: 1rem;
    margin-top: 20px;
    padding-left: 10px;
    margin-left: 20px;
}
/*Add to Cart Buttons*/
.add-to-cart{
    font-size: 17.5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 20px;
    padding-bottom: 5px;
}
/*Main Heading styling*/
#head{
    font-size: 25.5px;
    color: rgb(117, 3, 60);
    text-align: center;
}

/*Content Paragraph Headings*/
#head2{
    color: rgb(3, 3, 175);
    font-size: 25.5px;
    text-align: center;
    margin-top: 18.5px;
}

/*Card Styles*/
.card{
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px;
    background-color: peachpuff;
}

/*Card Images*/
.card-img-top{
    width: 300px;
}

/*Card Titles*/
.card-title{
    font-size: 17.5px;
    color: darkcyan;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 10px
}

/*Card Prices*/
.card-text{
    font-size: 17.5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left: 10px
}

/* Card Descriptions */
.des{
    margin-left: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



/*Carousel Container*/
.carousel{
    justify-content: center;
    width: 800px;
    height: 800px;
}


/*Carousel Images*/
.carousel-item{
    width: 600px;
    height: 750px;

}

/*Carousel Headings*/
.carousel-head{
    color: rgb(255, 246, 84);
    text-align: left;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 12px;
    font-size: 30px;
    font-weight: bolder;
}

/*Carousel Paragraphs*/
.carousel-par{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
   color: rgb(212, 30, 30);
   font-size: 21.5px;
}

/*Carousel Arrows*/
.carousel-control-next-icon, .carousel-control-prev-icon {
    color: red;
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/*Carousel Arrow Text*/
.sr-only{
    color: rgb(255, 5, 5);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* font-weight: bolder; */
}

/*Carousel Captions*/
.carousel-caption{
    text-align: left;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
/* Footer Styles */
.foot{
    font-size: 18px;
    background-color: lawngreen;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}


    /* MEDIA QUERIES */

@media (width <= 480px){
    /* Navbar Styles */
    #shop-nav-link,
    #navbar {
    color: rgb(3, 139, 55);
    padding-left: 14px;
    padding-top: 10px;
    font-size: 25px;
    display: flex !important;
    flex-wrap: wrap !important;   /*wrap links to new line if needed*/
    }



    /* cart & clear cart buttons */
    .btn {
        padding-top: 20px;
        display: flex !important;
        flex-wrap: wrap !important;   /*wrap buttons to new line if needed*/
    }


    /*Add to Cart Buttons*/
    .add-to-cart{
    margin-left: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    }



    /* 1st Headings */
    #head{
        font-size: 25px;
        margin-left: 20px;
        color: cadetblue;
        font-style: italic;
        text-align: center;
        padding-top: 10px;
    }


    /* 2nd Heading  Styles */
    #head2{
        font-size: 20px;
        color: darkorange;
        font-style: oblique;
        margin-left: 8px;
    }








    /*Card Styles*/
    .card{
    width: 268px;
    height: 160px;
    display: flex;
    flex: column !important;
    align-items: center !important;
    margin-top: 30px;
    }


    /* Card Images */
    .card-img-top{
        width: 265.9px;
        height: 200px;
    }


    /* Card Titles */
    .card-title{
        font-size: 18px;
        margin-left: 8px;
    }


    /* Prices */
    .card-text{
        font-size: 16px;
        margin-left: 8px;
    }


    /* Card Descriptions */
    .des{
        font-size: 10px;
        margin-left: 10px;
    }

    /* Container */
    .carousel{
        display: block;
        width: 75px;
        height: 200px;
    }

    /* footer */
    .foot{
    font-size: 10px;
    background-color: lawngreen;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    }
}



@media (481px <= width <= 768px){

}





@media (769px <= width <= 1024px) {
    /* navbar container */

}




@media (width >= 1025px){

}