@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
::-webkit-scrollbar {
  width: 10px;
  background-color: #3d3d3d;
}
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body
{
  display:flex;  
  justify-content: center;
  flex-direction: column;
  align-items:center;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  background: #fffa65;
}
#app{
    width:600px;
}
.img{
    width:100%;
    display:flex;   
}
.img img{
    width: 50%;
}
.selected{
    width:100%;
    padding:10px 50px;
    color: #333;
    border:none;
    background:transparent;
    user-select: none;
    outline:none;
    font-size: 1.5em;
}
select option {
  width:100%;
  background: #3d3d3d;
  color: rgb(255, 255, 255);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.container{
  width:100%;
  height:300px;
  background:#3d3d3d;
  display:flex;  
  flex-direction: column;
  align-items:center;
  color:#fff;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgba(0,0,0,0.8);
}
h1{
 margin:20px 0;
 letter-spacing:2px;
}
p{
  text-align:center;
  font-size:20px;
  letter-spacing: 3px;
  max-width: 600px;
  height:90px;
  overflow: hidden;
}
.delivery{
    opacity:0;
}
.next{
  width:100px;
  height:10px;
  outline:none;
  transition:all 1s;
  position:relative;
  margin-bottom:-40px;
}
.next:before{
  position:absolute;
  content:"";
  transition:all 0.7s;
  left:35%;
  transform:translateY(-10px);
}
.next:hover:before{
  content:var(--content,"Show");
  color:white;
  transform:translateY(-20px);
}
.clicked{
  --content:'Next';
}
.opacity{
    opacity:1;
    transition: all 0.5s;   
}
#mcontainer{
  opacity:0;
}
.loading{
  opacity: 1 !important;
  transition: all 2s;
}
@media (max-width:650px){
  #app{
    width:300px;
  }
}