/*
  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: black;
}

.frame {
  width: 95vw;
  height: 57vw;
  background: rgb(255, 97, 61);
  margin: 2.5vw auto;
  position: relative;
}

.globe {
  width: 23vw;
  height: 23vw;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 13%;
  background: radial-gradient(circle at 70% 40%, rgba(255,255,255,0.8) 50%, rgba(0,0,0,0.8) 100%), radial-gradient(ellipse at top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  box-shadow: inset 5px 15px 20px rgba(255, 255, 255, 0.5),
              -10px 10px 20px rgba(0, 0, 0, 0.3), 
              inset 10px -30px 20px rgba(0, 0, 0, 0.5); 
}

.orange1 {
  width: 10vw;
  height: 10vw;
  background: radial-gradient(circle at 70% 40%, rgba(255, 119, 0, 0.8) 50%, rgba(0,0,0,0.8) 100%), radial-gradient(ellipse at top, rgba(255, 119, 0, 1) 0%, rgb(255, 119, 0, 1) 100%);
  box-shadow: inset 5px 15px 20px rgba(255, 153, 0, 0.715),
              -10px 10px 20px rgba(0, 0, 0, 0.3), 
              inset 10px -30px 20px rgb(198, 14, 14); 
  position: absolute;
  border-radius: 50%;
  top: 77%;
  Left: 30%;
}

.orange2 {
  width: 10vw;
  height: 10vw;
  background: radial-gradient(circle at 10% 10%, rgba(255, 119, 0, 0.8) 50%, rgba(120, 0, 0, 0.8) 100%), radial-gradient(ellipse at top, rgba(255, 119, 0, 1) 0%, rgb(255, 119, 0, 1) 100%);
  box-shadow: inset 5px 15px 20px rgba(255, 153, 0, 0.442),
              -10px 10px 20px rgba(0, 0, 0, 0.151), 
              inset 10px -30px 20px rgba(255, 0, 0, 0.349); 
  position: absolute;
  border-radius: 50%;
  top: 4%;
  Left: 57%;
}

.bottle {
  display: block;
  width: 16vw;
  height: 25vw;
  background-color: rgba(255, 255, 255, 0.753);
  position: absolute;
  border-radius: 60vw 60vw 90vw 90vw / 60vw 60vw 40vw 40vw;
  top: 47.9%;
  Left: 70%;
  background: radial-gradient(circle at 95% 10%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.3);
  }
  

.bottle-neck {
  display: block;
  width: 9vw;
  height: 8vw;
  background-color: rgba(255, 255, 255, 0.672);
  position: absolute;
  border-radius: 60vw 60vw 40vw 40vw / 10vw 10vw 100vw 100vw;
  top: 33.9%;
  Left: 73.8%;
  background: radial-gradient(circle at 95% 10%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), radial-gradient(ellipse at top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.07);
  }

.cork {
  display: block;
  width: 7vw;
  height: 6vw;
  background-color: rgba(122, 43, 0, 0.781);
  position: absolute;
  border-radius: 60vw 60vw 40vw 40vw / 10vw 10vw 100vw 100vw;
  top: 30.9%;
  Left: 74.9%;
  background: radial-gradient(circle at 10% 10%, rgba(175, 82, 0, 0.8) 50%, rgba(220, 84, 0, 0.1) 100%), radial-gradient(ellipse at top, rgb(75, 35, 0) 0%, rgb(74, 35, 0, 0.1) 100%);
  box-shadow: inset 5px 15px 20px rgba(107, 39, 0, 0.442),
              -10px 10px 20px rgba(0, 0, 0, 0.151), 
              inset 10px -30px 20px rgba(101, 35, 0, 0.349); 
}

.computer {
  display: block;
  width: 28vw;
  height: 33vw;
  background-color: rgb(255, 226, 202);
  position: absolute;
  top: 18.9%;
  Left: 38.9%;
}

.keyboard {
  display: block;
  border-bottom: 7vw solid rgb(255, 237, 223);
  border-left: 2vw solid transparent;
  border-right: 2vw solid transparent;
  width: 39vw;
  position: absolute;
  top: 70.9%;
  Left: 29.9%;
  box-shadow: inset 5px 5px 20px rgba(0,0,0,0.5),
  0px 0px 0px rgba(0, 0, 0, 0.3), 
  inset 10px 10px 50px rgba(255, 255, 255, 0.5); 
}

.screen {
  position: relative;
  width: 23vw;
  height: 19vw;
  margin: 20px 0;
  background: rgb(0, 0, 0);
  border-radius: 10% / 50%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top: 24.9%;
  Left: 41.8%;
  box-shadow: inset 5px 5px 20px rgba(0,0,0,0.5),
  0px 10px 5px rgba(0, 0, 0, 0.3), 
  inset 10px 10px 50px rgba(255, 255, 255, 0.5); 
}