/*Html*/
html{
    font-size:62.5%;
} 

/*Body*/
body{
    display:flex;
    flex-direction: column;
    height:100vh;
}



/*Navigation Bar*/
.navbar{
    padding:2rem;
    opacity:2;
    background-color: rgb(210, 233, 109);
}
.navbar-nav a{
    font-family: 'Roboto Slab', serif;
    color:black;
    margin-left:1rem;
    font-size:2rem;
}

.navbar-nav a:hover{
    color:white;
    border:0.1rem solid black;
}

.cont3{
    text-align:center;
    font-family: 'Roboto Slab', serif;
}
h1{
    margin-top:2.5rem;
    font-size:4rem;
    color:rgba(3, 77, 13, 0.986);
    text-align:center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: underline;
}
.cont3 h3{
    color:rgb(139, 3, 139);
    margin-top:3.5rem;
    font-size:3rem;
    text-decoration: underline;
}
.cont3 p{
    color:orangered;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight:bold;
    margin-top:3rem;
    font-size:2.5rem;
}

/*Carousal*/
.car img{
    height:40rem;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/*Starter*/
.cont3-starter{
    display:flex;
    flex-direction: row;
}
.cont-4{
    display:flex;
    flex-direction:column;
}
.cont-4 img{
    width:24.9rem;
    height:25rem;
    margin:1rem;
    border:0.3rem solid black;

}
.cont-4 button{
    width:10rem;
    height:5rem;
    font-size:1.5rem;
    color:white;
    border:none;
    margin-left:auto;
    margin-right:auto;
    display:block;
    background-color: green;
}
.cont-4 button:hover{
    background-color: red;
}
.cont-4 span{
    font-size:2rem;
}
.cont-4 span .tag{
    font-weight:bold;
}

/*Cart*/
.cart-header {
    font-weight: bold;
    font-size:1.5rem;
    color: black;
}

.cart-column {
    display: flex;
    align-items: center;
    justify-content:center;
    border-bottom: 0.3rem solid black;
    margin-right: 1.5rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
}

.cart-row {
    display: flex;
}

.cart-item {
    width: 45%;
}

.cart-price {
    width: 20%;
    font-size: 1.5rem;
    color: black;
}

.cart-quantity {
    width: 35%;
}

.cart-item-title {
    color: black;
    margin-left: .5rem;
    font-size: 1.5rem;
}

.cart-item-image {
    width: 8rem;
    height: auto;
    border-radius: 1rem;
}

.btn-danger {
    color: white;
    background-color: #EB5757;
    border: none;
    border-radius: .3rem;
    width:9rem;
    height:3rem;
    font-weight: bold;
}

.btn-danger:hover {
    background-color: #CC4C4C;
}

.cart-quantity-input {
    height: 3rem;
    width: 5rem;
    border-radius: .5rem;
    border: 0.1rem solid #56CCF2;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
    margin-right: 2.5rem;
}

.cart-row:last-child {
    border-bottom: .1rem solid black;
}

.cart-row:last-child .cart-column {
    border: none;
}

.cart-total {
    text-align: center;
    margin-top: 1rem;
    margin-right: 1rem;
}

.cart-total-title {
    font-weight: bold;
    font-size: 2rem;
    color: black;
    margin-right: 2rem;
}

.cart-total-price {
    color: black;
    font-size: 2rem;
}

.btn-purchase {
    display: block;
    width:11rem;
    height:5rem;
    background-color:green;
    margin: 4rem auto 8rem auto;
    font-size: 1.75rem;
}

/*Footer*/
footer{
    width:100%;
    height:6rem;
    text-align:center;
    margin-top:auto;
    color:white;
    background-color:rgb(5, 16, 29);
}
footer p{
    font-size:1.5rem;
}

/*Media Query*/
@media(max-width:998px){
    html{
        font-size:50%;
    }
}
@media(max-width:768px){
    html{
        font-size:40%;
    }
}
@media(max-width:783px){
    .cont3-starter{
        display:flex;
        flex-direction:column;
    }
    .cont-4 img{
        margin-left:auto;
        margin-right:auto;
        display:block;
    }
}
@media(min-width:784px ) and (max-width:788px) {
    .cont-4{
        margin-left:1rem;
    }
    .cont-4 img{
        width:16rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
    .cont-4 span{
        font-size:1.6rem;
    }
}
@media(min-width:789px ) and (max-width:800px){
    .cont-4 img{
        width:17.5rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
    .cont-4 span{
        font-size:1.6rem;
    }
}
@media(min-width:801px ) and (max-width:895px){
    .cont-4 img{
        width:18rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
    .cont-4 span{
        font-size:1.6rem;
    }
}
@media(min-width:896px ) and (max-width:973px){
    .cont-4 img{
        width:19.9rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
    .cont-4 span{
        font-size:1.6rem;
    }
}
@media(min-width:974px ) and (max-width:999px){
    .cont-4 img{
        width:21.5rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
    .cont-4 span{
        font-size:1.6rem;
    }
}
@media(min-width:1000px ) and (max-width:1018px) {
    .cont-4 img{
        width:17rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
}
@media(min-width:1019px ) and (max-width:1100px) {
    .cont-4 img{
        width:18rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
}
@media(min-width:1101px ) and (max-width:1279px) {
    .cont-4 img{
        width:20rem;
        height:16rem;
    }
    .cont-4 p{
        font-size:1.8rem;
    }
}
@media(min-width:1280px ) and (max-width:1300px) {
    .cont-4 img{
        width:23rem;
        height:16rem;
    }
}
@media(min-width:1301px ) and (max-width:1350px) {
    .cont-4 img{
        width:24rem;
        height:16rem;
    }
}