/* pacifico-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pacifico-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/pacifico-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@keyframes drop {
  0% {opacity:0;}
  10% {opacity:1;}
  100% {
    top:110%;
    opacity:1;
  }
}

@keyframes sun {
  0 {transform: scale(0.8) rotate(360deg);opacity:0;}
  50% {opacity:1;}
  100% {transform: scale(1.2) rotate(360deg);opacity:0;}
}

body {
  background-color: #28AFB0; 
  font-family: "Pacifico";
  font-weight:400;
  font-size: 1.5em;
  color: #ccc;
  height:100%;
}

a {
  font-family: "Pacifico";
  text-decoration-line: none;
  color: #ccc;
}

body:before, body:after {
  content:'';
  opacity:0;
  animation: sun 10s infinite linear;
  display:block;
  position:absolute;
  width:400px;
  height:400px;
  background: rgba(249,223,116, 0.8);
  background-clip: padding-box;
  border-radius: 50%;
  top: -200px;
  left:30%;
  border: 50px solid rgba(249,223,116, 0.4);
  z-index:-1;
}

body:after {
  animation-delay: 5s;
}


.container {
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:200px;
}

.container:after {
  content:'';
  position:absolute;
  bottom: -20px;
  left:0;
  display:block;
  width:200px;
  height: 40px;
  border-radius:50%;
  background:hsla(0,0%,0%,0.05);
  z-index:-1;
}

.top { 
  overflow:hidden;
  position:relative;
  height:400px;
  width:200px;
  background:green;
  border-top-left-radius:100px;
  border-top-right-radius:100px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-image: linear-gradient(to bottom, rgba(250,188,60, .4), hsla(0,0%,100%,0)),
                    linear-gradient(to right, #FABC3C 50%, #FFB238 0);
}

.drop {
  opacity:0;
  position:absolute;
  left:20%;
  top:40%;
  width:20px;
  height:20px;
  background-image:linear-gradient(-45deg, rgba(250,208,80, 1), rgba(250,208,80, 0.2));
  border-radius:50%;
  transform: rotate(45deg);
  border-top-left-radius:0;
  animation-timing-function: easeIn;
  animation-iteration-count: infinite;
  animation-name: drop;
}

.drop--1 {
  animation-duration: 15s;
  animation-delay: 2s;
  left:20%;
  top:20%;
}

.drop--2 {
  animation-duration: 30s;
  left:60%;
  top:40%;
}

.drop--3 {
  animation-duration: 20s;
  animation-delay: 4s;
  left:30%;
  top:70%;
}

.drop--4 {
  animation-duration: 25s;
  animation-delay: 5s;
  left:55%;
  top:10%;
}

.drop--5 {
  animation-duration: 30s;
  animation-delay: 7s;
  left:80%;
  top:40%;
}

.drop--6 {
  animation-duration: 20s;
  animation-delay: 9s;
  left:30%;
  top:10%;
}

.drop--7 {
  animation-duration: 30s;
  animation-delay: 11s;
  left:65%;
  top:30%;
}

.bottom {
  width:40px;
  height:120px;
  background-color: #EFD294;
  background-image: linear-gradient(to right, hsla(0,0%,100%,0.5), hsla(0,0%,100%,0.1));
  background-size:4px;
  text-align:center;
  margin: 0 auto;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  writing-mode: vertical-lr;
}

.bottom:before {
  content:'';
  display:block;
  height:0;
  width:0;
  border:20px solid hsla(0,0%,0%,0.1);
  border-top-width:10px;
  border-bottom-width:10px;
  border-left-color:transparent;
  border-bottom-color:transparent;
}