@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

body{
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  display:flex;
  place-items:center;
  flex-direction:column;
  justify-content:center;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
}
body::before{
  content:"";
   position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
   background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      
   rgba(136, 136, 206, 0.7)
    ),
    url(https://images.unsplash.com/photo-1584118624012-df056829fbd0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#title{
  display:grid;  
  justify-content:center;
  font-size:3.5vw;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
}

#description{
margin-top:-2vw;
  display:flex;
  place-items:center;
  justify-content:center;
  text-decoration:emphasis;
  font-size:1.7vw;
  font-family:'poppins';
  font-style:italic;
  color:white;
  font-weight:200;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#survey-form{
  font-family:'poppins';
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  place-items:space-evenly;
  font-size:1.8vw;
  padding:20px 50px;
  width:50vw;
  border-radius:10px;
  background-color:rgba(88, 58, 150, 0.8);
  height:100%;
}
#name{
  font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:1.4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:2.5vw;  
  background:rgba(0,0,0,70%)
}
#email{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:1.4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:2.5vw;  
  background:rgba(0,0,0,70%);
}
#number{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:1.4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:2.5vw;  
  background:rgba(0,0,0,70%);
}
#dropdown{
    margin-top:0.5rem;
    display: block;
   font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:1.4vw;
  width:101%;
  border-radius:10px;
  color:white;
  height:3vw;  
  background:rgba(0,0,0,70%);
  background-color:rgba(0,0,0,70%);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
option{
  background-color:rgba(255,255,255,60%);
  color:black;
  font-size:1.4vw;
  
}
label{
  font-size:1.4vw;
}
input{
  display: inline-block;
  margin-top:2vw;
  margin-right: 0.625rem;
  min-height: 1.5vw;
  min-width:1.5vw;
}
textarea {margin-top:0.8rem;
  padding:1vw 4vw;
  min-height: 120px;
  width: 95%;
  resize: vertical;
}
button{
  font-family:'poppins';
  padding:5px;

  place-items:center;
  font-size:1.8vw;
  width:100%;
  border-radius:10px;
  color:white;
  height:4vw;  
  background:rgba(50,150,250,70%);
}

#email-label{
  font-size:2vw;
}
#name-label{
  font-size:2vw;
}
#number-label{
  font-size:2vw;
}

#counter{
  right:0;
  top:0;
  width:10%; 
  margin:2vw 1vw; 
  position: absolute;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  font-size: 1vw;
}
#counterimg{
  height: 1.5vw;
}

#apollo{
  width:100%;  
  margin-top: 3vw;
  position: relative;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column; 
  align-items:center ;  
  justify-content: center;
  font-size: 1.5vw;
  background-color: rgba(250, 108, 129, 0.753);
  bottom:0;
  padding:0px 0px;
  color:black;
}
#apolloimg{
  height:25%;
  width: 25%;
  position: relative;
  display: flex; 
  flex-direction: column; 
  align-items:center ;  
margin-bottom: -0.5vw;
  bottom:0; 
}
@media (max-width:720px)
{
  #title{
  display:grid;  
  justify-content:center;
  font-size:5vw;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
}

#description{
  display:flex;
  margin-top:-3.6vw;
  place-items:center;
  justify-content:center;
  text-decoration:emphasis;
  font-size:2.2vw;
  font-family:'poppins';
  font-style:italic;
  color:white;
  font-weight:200;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#survey-form{
  font-family:'poppins';
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
  display:flex;
  flex-direction:column;
  place-items:space-evenly;
  font-size:3vw;
  padding:20px 50px;
  width:50vw;
  border-radius:10px;
  background-color:rgba(88, 58, 150, 0.8);
  height:100%;
}
#name{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:2vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:3.5vw;  
  background:rgba(0,0,0,70%);
}
#email{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:2vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:3.5vw;  
  background:rgba(0,0,0,70%);
}
#number{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:2vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:3.5vw;  
  background:rgba(0,0,0,70%);
}
#dropdown{
    margin-top:0.5rem;
    display: block;
   font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:2vw;
  width:101%;
  border-radius:10px;
  color:white;
  height:4vw;  
  background:rgba(0,0,0,70%);
  background-color:rgba(0,0,0,70%);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
option{
  background-color:rgba(255,255,255,60%);
  color:black;
  font-size:2vw;
  
}
label{
  font-size:2vw;
}
input{
  display: inline-block;
  margin-top:2vw;
  margin-right: 0.625rem;
  min-height: 1.5vw;
  min-width:1.5vw;
}
textarea {margin-top:0.8rem;
  padding:1vw 4vw;
  min-height: 120px;
  width: 95%;
  resize: vertical;
}
button{
  font-family:'poppins';
 
  place-items:center;
  font-size:1.8vw;
  width:100%;
  border-radius:10px;
  color:white;
  height:4vw;  
  background:rgba(50,150,250,70%);
}
  
  #email-label{
  font-size:3vw;
}
#name-label{
  font-size:3vw;
}
#number-label{
  font-size:3vw;
}
#counter{
  right:0;
  top:0;
  width:10%; 
  margin:1vw 1vw; 
  position: absolute;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  font-size: 2vw;
}

img{
  height: 2.5vw;
}
}
@media (max-width:480px)
{
  #title{
  display:grid;  
  justify-content:center;
  font-size:8vw;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
}

#description{
  display:flex;
  margin-top:-5.5vw;
  place-items:center;
  justify-content:center;
  text-decoration:emphasis;
  font-size:4vw;
  text-align:center;
  font-family:'poppins';
  font-style:italic;
  color:white;
  font-weight:200;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#survey-form{
  font-family:'poppins';
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  color:#000000; 
  display:flex;
  flex-direction:column;

  font-size:7vw;
  width:65vw;
  border-radius:10px;
  background-color:rgba(88, 58, 150, 0.8);
  height:100%;
}
#email{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:start;
  font-size:4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:6vw;  
  background:rgba(0,0,0,70%);
}
#name{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:start;
  font-size:4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:6vw;  
  background:rgba(0,0,0,70%);
}
#number{
font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:start;
  font-size:4vw;
  width:98%;
  border-radius:10px;
  color:white;
  height:6vw;  
  background:rgba(0,0,0,70%);
}
#dropdown{
    margin-top:0.5rem;
    display: block;
   font-family:'calibri';
  padding:0vw 0px 2px 1vw;
  place-items:center;
  font-size:4vw;
  width:101%;
  border-radius:10px;
  color:white;
  height:8vw;  
  background:rgba(0,0,0,70%);
  background-color:rgba(0,0,0,70%);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
option{
  background-color:rgba(255,255,255,60%);
  color:black;
  font-size:5vw;
  text-align:center;
  
}
label{
  font-size:5vw;
  text-align:start;
}
input{
  margin-top:4vw;
  display: inline-block;
  min-height: 2vw;
  min-width:2vw;
}
textarea {margin-top:0.8rem;
  padding:1vw 4vw;
  min-height: 20vw;
  width:100%;
  resize: vertical;
}
button{
  font-family:'poppins';
 
  place-items:center;
  font-size:3vw;
  width:100%;
  border-radius:10px;
  color:white;
  height:9vw;  
  background:rgba(50,150,250,70%);
}
  
  #email-label{
  font-size:7vw;
}
#name-label{
  font-size:7vw;
}
#number-label{
  font-size:7vw;
}
  #apollo{
  width:100%;  
  margin-top: 3vw;
  position: relative;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column; 
  align-items:center ;  
  justify-content: center;
  font-size: 2vw;
  background-color: rgba(250, 108, 129, 0.753);
  bottom:0;
  padding:0px 0px;
  color:black;
}
#apolloimg{
  height:40%;
  width: 40%;
  position: relative;
  display: flex; 
  flex-direction: column; 
  align-items:center ;  
  margin-bottom: -0.5vw;
  bottom:0; 
}
}