*{
    margin:0;
    padding: 0;
}


nav{
    display: flex;
    /* border: 2px solid red; */
    padding:10px;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 2;
}
#searchbox{
    width: 30%;
}
#blackstrip{
    text-align: center;
}
nav>div:nth-child(1){
    /* border: 2px solid rgb(0, 0, 0); */
    display: flex;
    justify-content:space-evenly;
    width: 30%;
    align-items: center;
}
nav>div:nth-child(1)>h1{
    color: rgb(126, 2, 175);
}
nav>div:nth-child(2){
    /* border: 2px solid rgb(0, 0, 0); */
    display: flex;
    width: 100%;
    justify-content:center;
}
nav>div:nth-child(2)>div{
    /* border: 2px solid rgb(255, 0, 0); */
    display: flex;
    width: 100%;
    justify-content:flex-end;
    align-items: center;
}
nav>div:nth-child(2)>div>input{
    /* border: 2px solid rgb(0, 0, 0); */
    padding:8px 10px 8px;
    border-radius: 25px;
}
nav>div:nth-child(2)>div>div{
    border: 2px solid rgb(0, 0, 0);
    padding:7px 20px 7px 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 25px;
}
nav>div:nth-child(2)>div>div>span>img{
    width: 20px ;
    height: 20px;
    margin: 1px 5px 1px;
}
nav div img{
    width: 60px ;
    height: 60px;
}
/* ========================================================================== */
#links{
    display: flex;
    justify-content:center;
    padding: 1%;
    /* border: 2px solid red; */
}
#links>a{
    margin: 0px 30px 0px;
    text-decoration: none;
    color: black;
}
#links>a:hover{
    font-weight: 100;
    color: rgb(0, 156, 254);
}
/* ============================================================================== */

/* ============================================================================== */
#selectors{
    display:grid;
    grid-template-columns: repeat(8,1fr);
    justify-content: center;
}
.dropbtn {
    padding: 7px;
    border: none;
    font-size: 15px;
    font-weight: bolder;
    text-transform: uppercase;
    background-color: white;
    color: rgb(0, 0, 0);
    padding: 10px 20px 10px;
}
.dropdown {
    position: relative;
    display:inline-block;

}
.dropdowncontent {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 100px;
    z-index: 1;
    padding: 10px;
    border-radius:0px 0px 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.dropdowncontent ul{
    margin: 10px;
    /* border: 2px solid red; */
    width:100%;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    list-style:none;
}
.dropdowncontent a{
    color: black;
    font-weight: bolder;
}
.dropdowncontent li:hover {
    color: blue;
    cursor: pointer;
}
.dropdowncontent a {
    color: rgb(0, 0, 0);
    padding: 12px 16px;
    text-decoration: none;
    display:flex;
}
.dropdown:hover .dropdowncontent {
    display: flex;
}
.dropdown:hover .dropdowncontent div {
    display:block;
}
.dropdown:hover .dropbtn {
    color: rgb(0, 40, 183);
    cursor: pointer;
}
#marqueue{
    /* height:3.5vw; */
    color:white;
    background-color: black;
    text-align: center;;
    font-size: 1.5vw;;

    padding:1%;
}


#mainDiv{
    width:90%; 
    display: flex;
    padding:4%;
  
   height:500px;
   margin: auto;
}

#freeSpace{
    width:20%; 
   
}

#imagesToFetch{
    width:70%;
    margin: auto;
    justify-content:space-around;
    height:500px;
}


input{
    width:95%;
    height:2vw;
    border-radius: 1vw;
    margin-bottom: 1vw;
    margin-top: 1vw;
}

.btnleft{
    display: block;
    margin: auto;
    width:60%;
    height:2vw;
    border-radius: 1vw;
    background-color: white;
    color: black;
    cursor: pointer;
}

#sort{
    height:2vw;
    cursor: pointer;
}

#sort:hover{
    height:2vw;
    cursor: pointer;
    background-color: black;
    color: white;
}

#colorSelect{
    height:2vw;
    cursor: pointer;
}

#colorSelect:hover{
    height:2vw;
    cursor: pointer;
    background-color: black;
    color: white;
}
.alreadyAddedButton {
    width:20vw;
    height:2.5vw;
    margin-top: 2vw;
    border-radius: 1vw;
    background-color: white;
    font-size: medium;
    color: black;
    pointer-events: none;
}

select{
    display: block;
    margin: auto;
    width:60%;
    border-radius: 1vw;
    background-color: white;
    color: black;
    height:1.5vw;
    margin-top: 1.5vw;;
}

#data-list-wrapper.smallCard{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

#card-list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:1vw;
    margin: auto;
}

#card-list  img {
    width:15vw;
    height:15vw;
    display: block;
    margin: auto;
    width:100%
}

#card-list  p {
    
    margin: auto;
}

.smallCard{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    border-radius: 2vw;;
}

.smallCard>img{
    border-radius: 2vw;;
}

.smallCard:hover{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border-radius: 2vw;
} 

.smallCard>img:hover{
    border-radius: 2vw;
}

.paginationBtn{
    margin-top: 2vw;
    width:4vw;
    height: 3vw;;
    border-radius: 1vw;
    background-color: white;
    font-size: medium;
    margin-left: 1vw;

}

.paginationBtn:hover{
    
    background-color: black;
    color: white;
    font-size: medium;

}


.btnCart{
    width:20vw;
    height:2.5vw;
    margin-top: 2vw;
    border-radius: 1vw;
    background-color: white;
    font-size: medium;

}

.btnCart:hover{
    background-color: black;
    color: white;
    
}

.smallCard > :nth-child(2){
    display: none;
}

.smallCard{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btnleft:hover{
    background-color: black;
    color: white;
}
button {
    cursor: pointer;
}



footer{
    background-color: azure;
    font-size: 15px;
}
#footerlast{
    display: flex;
    justify-content: center;
}
#footerlast>div{
    display: flex;
    padding: 1%;
    width: 80%;
}
#footerlast>div>div{
    padding: 1%;
    width: 20%;
}



@media only screen and (min-width: 500px) and (max-width: 768px) {
    #card-list{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
   
}

@media only screen and (min-width: 200px) and (max-width: 500px) {
    #card-list{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
   
}