.top-div {
  height: 18px;
  width: 100%;
  background-color: #b9edcb;
  animation: colorTopAnim;
  animation-duration: 7s;
    box-shadow: 
               inset -15px -15px 15px rgba(255,255,255,0.2),
               inset 15px  15px 15px rgba(0,0,0,0.1);
}

.topTXT{
    margin-top:20px; color:#fff;  
}

@media(min-width:1000px){
   .anemi-div{
    display: none;
  }
    .topTXT{
        color: black;
    }
    
}

body {
  margin: 0px;
  background-image: linear-gradient(90deg, #f2fffc, #fdffd6);
    
}

.top-logo{
  margin-left: 30px;
  margin-top: -30px;
  position: relative;
  animation: toplogoAnim;
  animation-duration: 3s;
}
.navbar{
  background-color: #e6faed;
  border-radius: 10px;
  animation: colorNavAnim;
  animation-duration: 10s;
  border-radius: 10px;
  box-shadow: -15px -15px 15px rgba(255,255,255,0.2),
               15px  15px 15px rgba(0,0,0,0.1),
               inset -15px -15px 15px rgba(255,255,255,0.2),
               inset 15px  15px 15px rgba(0,0,0,0.1);
}


.container{
  position: relative;
  display: flex;
  flex-direction: column;
}
.container .box {
  position: relative;
  width: 300px;
  height: 70px;
  margin: 40px 20px;
  
  font-family: fantasy;
  font-size: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #274d35;
}
.container .box.shadow{
  background: #2ec194;
  border-radius: 15px;
  box-shadow: -15px -15px 15px rgba(255,255,255,0.2),
               15px  15px 15px rgba(0,0,0,0.1),
               inset -15px -15px 15px rgba(255,255,255,0.2),
               inset 15px  15px 15px rgba(0,0,0,0.1);
}

.navbar-div{
  margin-left: 200px;
  margin-right: 40px;

}

.drop1{
animation: drop1;
animation-duration: 3s;
}

.drop2{
animation: drop2;
animation-duration: 6s;
}

.drop3{
  animation: drop3;
  animation-duration: 9s;
}

@keyframes colorNavAnim {
  from {background-color: white;}
  to {background-color: #e6faed;}
}
@keyframes colorTopAnim {
  from {background-color: white;}
  to {background-color: #b9edcb;}
}

@keyframes toplogoAnim {
  from {left: 2000px;}
  to { left:  0px;}
}



@keyframes drop1 {
  0%{
    transform: scale(0)translateY(1000px) rotate(0deg);
    opacity: 0;
  }
  100%{
    transform: scale(1)translateY(0px) rotate(360deg);
    opacity: 1;
  }
}

@keyframes drop2 {
  0%{
    transform: scale(0)translateX(-1000px) rotate(0deg);
    opacity: 0;
  }
  100%{
    transform: scale(1)translateX(0px) rotate(360deg);
    opacity: 1;
  }
}

@keyframes drop3 {
  0%{
    transform: scale(0)translateY(1000px) rotate(0deg);
    opacity: 0;
  }
  100%{
    transform: scale(1)translateY(0px) rotate(360deg);
    opacity: 1;
  }
}