/*
  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: 65vw;
  background: rgb(163, 210, 205);
  margin: 2.5vw auto;
  position: relative;
}

/* Your CSS goes here */
.orange1 {
  position: absolute;
  top: 2%;
  left: 59%;
  width: 12vw;
  height: 12vw;
  background: rgb(248, 106, 4);
  border-radius: 50%;
  box-shadow: -15px -10px 20px rgb(255, 163, 52) inset, 5px 2px 15px rgb(255, 170, 66) inset;
  background-image: repeating-linear-gradient(223deg, rgba(255, 51, 0, 0.25), rgba(255, 204, 0, 0.25) 1px, transparent 0px, transparent 2px);
  background-size: 200px;
  z-index: 100;
}

.orange2{
  position: absolute;
  width: 12vw;
  height: 12vw;
  top: 75%;
  left: 37%;
  background: rgb(248, 106, 4);
  border-radius: 50%;
  box-shadow: -15px -10px 20px rgb(255, 163, 52) inset, 5px 2px 15px rgb(255, 170, 66) inset;
  background-image: repeating-linear-gradient(223deg, rgba(255, 51, 0, 0.25), rgba(255, 204, 0, 0.25) 1px, transparent 0px, transparent 2px);
  background-size: 200px;
  z-index: 800;
}

.computer{
  position: relative;
  top: 18%;
  left: 45%;
  width: 26vw;
  height: 32vw;
  background-color: rgb(164, 163, 160);
}

.screen{
  position: absolute;
  left: 47.2%;
  top: 20%;
      width: 22vw;
      height: 17vw;
      margin: 20px 0;
      border-radius: 50% / 10%;
      color: white;
      text-align: center;
      text-indent: .1em;
  background-image: linear-gradient(90deg, black, rgb(49, 49, 49), black);
  border-radius: 15px;
}

.screen:before{
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

.keyboard{
  position: relative;
  border-bottom: 80px solid rgb(187, 187, 187);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 10vw;
	width: 40vw;
  border-radius: 15px;
  left: 36%;
  top: 1%;
  }

  .keyboard2{
    position: relative;
    width: 42vw;
    height: 2.5vw;
    background-color: #808080;
    left: 36%;
    top: -1%;
    border-radius: 5px;
  }

  .globe{
    position: absolute;
      width: 25vw;
      height: 25vw;
      border-radius: 50%;
      top: 50%;
      left: 18%;
      background: radial-gradient(circle at 30% 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); 
      z-index: 600;
  }


  .bottle {
    position: absolute;
    right: 10.2%;
    top: 53%;
    width: 15vw;
    height: 29vw;
    border-radius: 60vw 60vw 90vw 90vw / 70vw 70vw 0vw 0vw;
    background-image: radial-gradient(circle at 40% 20%, white 0.5%,rgb(217, 217, 217,0));
    opacity: 80%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    z-index: 600;
}

.bottle-neck{
position: absolute;
right: 14.2%;
top: 45%;
width: 8vw;
height: 6vw;
border-radius: 60vw 60vw 90vw 90vw / 40vw 40vw 20vw 20vw;
background-image: radial-gradient(circle at 40% 90%, white 0.5%,rgb(217, 217, 217,0));
opacity: 70%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
z-index: 600;
}

.cork {
  position: absolute;
  background-image: linear-gradient(to right, rgb(144, 82, 23) 20%, rgb(69, 35, 3) 50%, rgb(144, 82, 23) 100%); 
  right: 15%;
  top: 40%;
  height: 6vw;
  width: 6.5vw; 
  z-index: 500;
}