/*
  Coding from Life – Sketch 2: fluid layout

  For sketch 2 you'll be positioning elements relative to a fluid container. This
  means you'll need to use percentages when positioning and sizingelements within
  your frame.
*/

body {
  background-color: rgb(242, 238, 221);
}

.frame {
  width: 95vw;
  height: 63vw;
  background: rgb(244, 108, 45);
  margin: 2.5vw auto;
  margin-top: 10%;
  position: relative;
}

/* Your CSS goes here */

.globe{
  position: absolute;
  width: 25%;
  aspect-ratio: 1/1;
  background: linear-gradient(214deg, rgba(255,255,255,1) 0%, rgba(221,221,235,1) 59%, rgb(91, 170, 204) 100%);
  border-radius: 50%;
  top: 48%;
  left: 14%;
  z-index: 1;
  border: solid 1px white;
}

.orange1{
  position: absolute;
  width: 11%;
  aspect-ratio: 1/1;
  background-color: rgb(238, 230, 126);background-image: repeating-linear-gradient(-45deg, rgba(231, 77, 74, 0.651), rgba(255,255,255, 0.25) 1px, transparent 1px, transparent 6px);
  background-size: 8px 8px;
  border: 2px solid rgb(120, 197, 4);
  border-radius: 50%;
  top: 75%;
  left: 33%;
  z-index: 2;
}
.orange2{
  position: absolute;
  width: 10%;
  aspect-ratio: 1/1;
  background-color: rgb(238, 197, 126);
  border-radius: 50%;
  background-image: repeating-linear-gradient(-45deg, rgba(238, 72, 72, 0.567), rgba(255,255,255, 0.25) 2px, transparent 2px, transparent 6px);
  background-size: 8px 8px;
  border: 2px solid rgb(173, 186, 154);
  top: 11%;
  left: 60%;
  z-index: 3;
  animation: fall 10s infinite;
}
@keyframes fall{
  0%{
    top: 11%;
    left: 60%;
    z-index: 3;
  }
  10%{
    top: 11%;
    left: 65%;
    rotate: 30deg;
  }
  40%{
    top: 55%;
    left: 70%;
    rotate: 120deg;
    background-color: rgb(238, 197, 126);
  }
  60%{
    top: 55%;
    left: 57%;
    rotate: 60deg;
    z-index: 0;
    background-color: rgb(234, 148, 105);
  }
  90%{
    top: 13%;
    left: 57%;
    z-index: 0;
    background-color: rgb(234, 148, 105);
  }
  95%{
    top: 12%;
    left: 58%;
    z-index: 0;
    background-color: rgb(234, 167, 105);
  }
  100%{
    top: 11%;
    left: 60%;
    z-index: 3;
    background-color: rgb(238, 197, 126);
  }
}

.bottle{
  position: absolute;
  width: 11%;
  height: 35%;
  background-color: rgb(233, 220, 230);
  border-radius: 40px 40px 25px 25px;
  border: 3px solid rgb(243, 245, 240);
  top: 52%;
  left: 70%;
  opacity: 80%;
  z-index: 6;
}
.bottle-neck{
  position: absolute;
  width: 5%;
  height: 9%;
  background-color: rgb(233, 220, 230);
  border-radius: 10px;
  transform: perspective(5px) rotateX(-1deg);
  border: 3px solid rgb(243, 245, 240);
  top: 45%;
  left: 73%;
  opacity: 80%;
  z-index: 5;
}

.cork{
  position: absolute;
  width: 4%;
  height: 8%;
  background-color: rgb(102, 65, 46);
  border-radius: 10px;
  top: 43%;
  left: 73.8%;
  z-index: 4;
}

.computer{
  z-index: 0;
  position: absolute;
  width: 25%;
  height: 55%;
  background-color: rgb(179, 214, 222);
  border-radius: 10px;
  top: 25%;
  left: 42.5%;
  filter: drop-shadow(15px 15px 4px #5791b9);
}
.keyboard{
  z-index: 0;
  position: absolute;
  width: 36%;
  height: 12%;
  background-color: rgb(135, 202, 217);
  border-radius: 10px;
  top: 70%;
  left: 37%;
  transform: perspective(5px) rotateX(1deg);
  filter: drop-shadow(0px 7px rgb(44, 115, 176));
}
.screen{
  z-index: 0;
  width: 80%;
  height: 50%;
  background-color: rgb(6, 64, 119);
  background-image: repeating-linear-gradient(-214deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 0px, transparent 13px);
  background-size: 9px;
  border-radius: 10px;
  margin: 3vh auto 8vh;
}