*{
    margin:0;
    padding:0;
    font-family:'Poppins', sans-serif;
    box-sizing:border-box;

}
.hero{
    width:100%;
    height:100vh;
    background-image:linear-gradient(#f44336,#730228);
    display:flex;
    align-items:center;
    justify-content:center;
}
.selector{
    width:350px;
}
#selectField{
    width:100%;
    padding:15px 20px;
    margin-bottom:30px;
    box-sizing:border-box;
    background:rgba(255,255,255,0.7);
    border-radius:6px;
    display: flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}
#selectField img{
    width:12px;
    transition:transform 0.5s;
}
#list{
    width:100%;
    background:rgba(255,255,255,0.7);
    border-radius:6px;
    overflow:hidden;
}
.options{
    width:100%;
    padding:15px 0 15px 70px;
    list-style:none;
    cursor:pointer;
    box-sizing:border-box;
    position:relative;
}
.options img{
    width:25px;
    position:absolute;
    top:12px;
    left:25px;
}
.options:hover{
    background:rgba(255,255,255,0.7);
}
.hide{
    visibility:hidden;

}
.rotate{
    transform:rotate(180deg);
}

.drag-drop-container{
    width:100%;
    min-height:100vh;
    background:#0b0423;
    display:flex;
    align-items:center;
    justify-content:center;

}
#left, #right{
    width: 300px;
    min-height: 400px;
    margin: 20px;
    border: 2px dashed #fff;
}
.list{
    background:#e91e63;
    height:60px;
    margin:30px;
    color:#fff;
    display:flex;
    align-items:center;
    cursor:grab;
}
.list img{
    width:30px;
    margin-right:25px;
    margin-left:10px;
}

body{
    background:#191919;
}
.gallery{
    width:900px;
    display:flex;
    overflow-x:scroll;
}
.gallery div{
    width:100%;
    display:grid;
    grid-template-columns:auto auto auto;
    grid-gap:20px;
    padding:10px;
    flex:none;
}
.gallery div img{
    width:100%;
    filter:grayscale(100%);
    transition:transform 0.5s;
}
.gallery::-webkit-scrollbar{
    display:none;
}
.gallery-wrap-container{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:10% auto;
}
#backBtn, #nextBtn{
    width:50px;
    cursor:pointer;
    margin:40px;
}
.gallery div img:hover{
    filter:grayscale(0);
    cursor:pointer;
    transform:scale(1.1);

}
.container{
    width:100%;
    height:100vh;
    background:#3c5077;
    display:flex;
    align-items:center;
    justify-content:center;
}
.btn{
    padding:10px 60px;
    background:#fff;
    border:0;
    outline:none;
    cursor:pointer;
    font-size:22px;
    font-weight:500;
    border-radius:30px;
}
.popup{
    width:400px;
    background:#fff;
    border-radius:6px;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,-50%) scale(0.1);
    text-align:center;
    padding:0 30px 30px;
    color:#333;
    visibility:hidden;  
    transform:transform 0.4s, top 0.4s;
    
}
.open-popup{
    visibility:visible;
    top:50%;
    transform:translate(-50%,-50%) scale(1);


}
.popup img{
    width:100px;
    margin-top:-50px;
    border-radius:50%;
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.popup h2{
    font-size:38px;
    font-weight:500;
    margin:30px 0 10px;
}
.popup button{
    width:100%;
    margin-top:50px;
    padding:10px 0;
    background:#6fd649;
    color:#fff;
    border:0;
    outline:none;
    font-size:18px;
    border-radius: 4px;
    cursor:pointer;
    box-shadow:0 5px 5px rgba(0,0,0,0.2);

}

.website-comingsoon-container{
    width:100vw;
    height:100vh;
    background-image:url("photos/background.png");
    background-position:center;
    background-size:cover;
    padding:0 8%;
    position:relative;
}
.logo-design {
    margin-top:50px;
    margin-left:2px;
    width:200px;
    padding-top:20px 0;
    cursor:pointer;
}
.website-comingsoon-content{
    top:50%;
    position:absolute;
    transform:translateY(-50%);
    color:#ffffff;    
}
.website-comingsoon-content h1{
    font-size:64px;
    font-weight:600;
}
.website-comingsoon-content h1 span{
    color:#ff3753;
    
}
.website-comingsoon-content button{
    background:transparent;
    border:2px solid #fff;
    outline:none;
    padding:12px 25px;
    color:#fff;
    display:flex;
    align-items:center;
    margin-top:30px;
    cursor:pointer;
}
.website-comingsoon-content button img{
    width:15px;
    margin-left:10px;
}
.launch-time{
    display:flex;
}
.launch-time div{
    flex-basis:100px;
    
}
.launch-time div p{
    font-size:60px;
    margin-bottom:-14px;
    
}
.launch-time div p span{
    margin-top:20px;
}
.rocket{
    width:250px;
    position:absolute;
    right:10%;
    bottom:0;
    animation: rocket 4s linear infinite;
}
@keyframes rocket{
    0%{
        bottom:0;
        opacity:0;
    }
    100%{
        bottom:105%;
        opacity:1;
    }
}