:root{
  --cloud-shift-x:80px;
  --dandylion-lion-text-shift-y:30px;
  --content-padding:200px;
}
@keyframes btnstretch{
  0%{
    min-width:0px;
  }
  100%{
    min-width:calc(100% - 20px);/* Account for padding */
    background-color:#000000;
    color:grey;
  }
}
@keyframes wiggle{
    0%{
        transform:scale(100%,100%);
    }
    50%{
        transform:scale(110%,110%);
    }
    100%{
        transform:scale(100%,100%);
    }
}
@keyframes creditdrop{
  0%{
    top:0%;
    opacity:0%;
  }
  15%{
    opacity:100%;
  }
  35%{
    top:50%;
  }
  65%{
    top:50%;
    opacity:75%;
  }
  100%{
    top:0%;
    opacity:0%;
  }
}
@keyframes fade {
  0% {
    opacity:100%;
    background-color:rgb(255,255,255,0);
    border-radius:50%;
    box-shadow:0px 0px 0px 0px lightblue;
  }
  50% {
    opacity:75%;
  }
  100% {
    opacity:0.5;
    background-color:rgb(0,0,0,1);
    border-radius:25px;
    box-shadow:0px 0px 100px 10px lightblue;
  }/*
  100% {
    opacity:0.5;
    background-color:none;
    border-radius:none;
    box-shadow:none;
  }*/
}
@keyframes slidedownappear {
  0% {
    width:0%;
    height:0%;
  }
  25% {
    width:100%;
    height:1%;
  }
  100% {
    width:100%;
    height:100%;
  }
}
@keyframes popappear{
  0% {
    font-size:0%;
    opacity:1;
  }
  25% {
    font-size:10%;
    opacity:1;
  }
  80% {
    font-size:130%;
    opacity:1;
  }
  100% {
    font-size:100%;
    opacity:1;
  }
}
@keyframes fadeinappear {
  0% {
    width:100%;
    height:100%;
    opacity:0%;
  }
  100% {
    width:100%;
    height:100%;
    opacity:100%;
  }
}
@keyframes slideoutappear {
  0% {
    width:0%;
    height:0%;
  }
  25% {
    width:1%;
    height:100%;
  }
  100% {
    width:100%;
    height:100%;
  }
}
@keyframes slideupper {
  100%{
    height:100%;
  }
}
body,html{
  width:100%;
  height:100%;
  margin:0px;
  overflow:hidden;
  text-align:center;
}
body{
  background-image:linear-gradient(black,#13519b);
  text-align:center;
}
.merit-images{
  height:100%;
  position:relative;
}
#cloud_background{
  position:absolute;
  opacity:100%;
  width:120%;
  height:80%;
  top:100%;
  left:0px;
  transform:translate(0,-60%);
}
/*.meritimage-wrapper:hover > img:not(.hidden), .meritimage-wrapper:hover + .meritimage-label-wrapper > p:not(.hidden){
  animation-name:fade;
  animation-duration:1s;
  animation-fill-mode:forwards;
  background-color:red;
}*/
.meritimage-label{
  width:10vw;
}
.bottomimages{/*
  border-radius:50%;
  background-color:rgba(255,255,255,0.6);*/
}
#content-wrapper{
  width:100vw;
  height:100vh;
  display:block;
  min-height:auto;
  text-align:center;
  position:absolute;
  top:50vh;
  left:50vw;
  transform:translate(-50%,-50%);
}
#content{
  width:100%;
  height:100%;
  position:absolute; /* Make content the true parent of all the other absolute positioned things */
}
.seed{
  position:absolute;
  width:20px;
  height:20px;
}
.seed.downleft{
  transform:scale(-100%,100%);
}
.seed.upright{
  transform:scale(100%,-100%);
}
.seed.upleft{
  transform:scale(-100%,-100%);
}
.dropdown{
  opacity:0;
  text-align:center;
  overflow:hidden;
  display:inline-block;
  animation-duration:1s;
  animation-fill-mode:forwards;
  vertical-align:middle;
  position:relative;
}
.dropdown-slidedownappear.dropped{
  animation-name:slidedownappear;
}
.dropdown-fadeinappear.dropped{
  animation-name:fadeinappear;
  animation-duration:2.5s;
}
.dropdown-slideoutappear.dropped{
  animation-name:slideoutappear;
}
.dropdown-popappear.dropped{
  animation-name:popappear;
}
.meritimage-label{
  color:white;
  font-family:"Agency FB", arial, sans-serif, serif;
  font-weight:bold;
  margin:0px;
  width:10vw;
  display:inline-block;
}
/*.hidden{
  opacity:0%;
  position:absolute;
}*/
/*
#cloud{
  text-align:center;
}
#cloudlabel{
  text-align:center;
}
#iot{
  text-align:center;
}
#iotlabel{
  text-align:center;
}
#beeverywhere{
  text-align:center;
}
#mobile{
  text-align:center;
}
#mobilelabel{
  text-align:center;
}*/
#dandylion-text{
  height:190%;
  position:relative;
  right:0%;
}
#background-stuff{
  position:absolute;
}
#cloud-inner{
  width:10vw;
}
#mobiledropdown.dropped{
  overflow:visible;
  margin-bottom:40px;
}
#iotdropdown.dropped{
  overflow:visible;
  margin-bottom:40px;
}
#backcloud{
  width:120vw;
  opacity:0.6;
}
.dropdown-content{
  text-align:center;
}
.merit-images.hidden{
  position:relative;
}
.merit-images:hover{
  animation-name:fade;
  animation-fill-mode:forwards;
  animation-duration:1s;
  animation-iteration-count:1;
}
#displaysection{
  font-family: Arial, sans-serif;
  position: absolute;
  display: none;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius: 10px;
  background-color: rgba(0,0,0,0.7);
  overflow-y:hidden;
  overflow-x:hidden;
}
#displaysection.normal{
  width: 100vw;
  height: 100vh;
}
#displaysection.normal > #displaysection_content > #displaysection_inner{
  width:70vw;
  height:70vh;
}
#displaysection.mobile{
  width:100vw;
  height:100vh;
  top:10vw;
  transform:translate(-50%,0);
}
h1{
  font-size:125%;
}
#displaysection-exit:hover{
  transform: rotate(30deg);
}
#displaysection-content{
  text-align:left;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  height:100%;
  width:100%;
}
#displaysection-exit{
  position: sticky;
  float:left;
  top: 10px;
  left: 10px;
}
ul{
  text-align:left;
  display:inline-block;
}
.ulwrapper{
  text-align:center;
}
#displaysection-main{
  width: 100%;
}
#displaysection-inner{
  margin-left: 50px;
  margin-right: 50px;
  position:relative;
  height:100%;
}
#displaysection-inner > *{
  position:absolute;
}
#submitter{
  margin-top:20px;
  padding:10px;
  border-radius:5px;
  background-color:orange;
  border:none;
  display:inline-block;
  position:relative;
}
#submitter-wrapper{
  text-align:center;
  grid-area:button;
}
#emailinput{
  grid-area:input;
}
#credit{
  opacity:0%;
  animation-fill-mode:forwards;
  animation-duration:6s;
  top:0px;
}
img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
input{
  width:calc(50% - 100px);
  padding:0px;
  margin:0px;
  height:100%;
  line-height:100%;
  border:0px none;
}
#displaysection_inputarea{
  text-align:left;
  display:inline-block;
}
#displaysection_inputarea > *{
  margin-left:10px;
}
.wiggle_animation{
    animation-name:wiggle;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
.formdiv{
    background-color:white;
    padding-left:40px;
    padding-right:40px;
    border-radius:20px;
    overflow-y:auto;
    max-height:calc(100vh - 40px);
    width:40vw;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:none;
}
.merit{
    width:10vw;
    position:absolute;
}
.merit:hover{
    background-color:red;
}
.merit>img{
    width:100%;
}