/*Entirety of Page*/

.hold{text-align:center;} /*hold the image to the text*/

.container{position:relative;
            width:100%;
            margin-top:10px;
            margin-bottom:10px;
        }
    .container:hover .overlay{opacity: 1;}
            

.merch{display: block;}
        
.item-name{color:var(--accent-color); font-size:25px;}
        .item-name:hover{color:var(--accent-color-3);
            cursor:pointer;}
        
.price{font-size:15px;
            color:#a9a6a6;
            font-style:italic;
            margin-top:-12px;
            letter-spacing:1.2px;
            margin-bottom:3px;
        }

.overlay {
            position: absolute;
            opacity: 0;
            transition: .2s ease-in;
            left: 0;
            top:0;
            bottom:0;
            right:0;
            cursor:pointer;
        }


.flex-contain {
    display: flex;
    flex-direction:row;
    justify-content: space-around;
    align-items: center; 
    margin-bottom:5px;
    transition:transform .5s;
}

    .flex-contain .flex-item {
        display: flex;
        align-items: center; 
        flex-wrap:wrap;
    }
    
    .flex-item > img {
        max-width: 100%;  
        height: auto;     
        width: auto;}      
    
.flex-item .hold > button{
    color:white;
    background-color:var(--accent-color-2);
    border:none;
    border-radius:10%;
    font-size:17px;
    padding:5px 10px;
    cursor:pointer;
}

/*Anything to do with the Cart Tab & Page*/

.cartTab{
    width:400px;
    background-color:var(--accent-color);
    color:var(--bg-color);
    position:fixed;
    inset: 0 -400px 0 auto;
    display:grid;
    grid-template-rows: 70px 1fr 70px;
}

body.showCart .cartTab{
    inset:0 0 0 auto;
}

body.showCart .flex-item{transform:translateX(-250px);}

.cartTab > h1{text-align:center;}

.cartTab .btn{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

    .cartTab .btn > button{
        background-color:var(--accent-color-3); 
        cursor:pointer;
        font-weight:bolder; 
        border: none; 
        color:white;
        padding: 10px;

        
    }
    .cartTab .btn .close{
        background-color:white; 
        color:black;
        transition: .4s ease-in;
    }
    
    .cartTab .btn .close :hover{
        background-color:white;
    }
    
    .cartTab.open {
    right: 0; 
    transition: .4s ease-in;
    }
    
    #clear-cart{background-color:var(--accent-color-2);
        border:none;
        cursor:pointer;
        font-weight:bold;
        padding:5px;
        color:white;
        font-size:15px;
    }
    
    .cartTab .cartList .cart-item img{
        width:100%;
    }
    
    .cartTab .cartList .cart-item{
        display:grid;
        grid-template-columns:90px 120px 50px 1fr; /*image size, space allowed 4 name, price, quantity*/
        gap:5px;
        text-align:center;
        align-items:center;
        font-weight:bolder;
    }
    
.cartList .quantity span{
    display:inline-block;
    width:15px;
    height:15px;
    background-color:hotpink;
    color:white;
    border-radius:25%;
    cursor:pointer;
    padding:1px;
}

.cartList .quantity span:nth-child(2){
    background-color:transparent;
    color:white; /*change accordingly*/
}
.cartList .cart-item:nth-child(even){background-color:grey;}
.cartList{overflow:auto;}

#total-price{font-size:20px;
    font-style:italic;
    font-weight:bold;
}

.size-dropdown {
    padding: 5px;
    margin-left: 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}