/*
  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(255, 204, 154);
}

.frame {
  width: 95vw;
  height: 57vw;
  background: rgb(255, 228, 201);
  margin: 2.5vw auto;
  position: relative;
}
.globe {
  width: 300px;
  height: 300px;
  background: red;
  border-radius: 50%;
  position: relative;
  top: 50%;
  left: 10%;
  z-index: 1;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(120, 163, 168) 100%); 
  border-radius: 50%; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.1); 
}
.orange1 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 35%;
  left: 25%;
  z-index: 3;
  background: radial-gradient(circle, rgb(255, 177, 67) 0%, rgb(175, 94, 18) 100%); 
  border-radius: 50%; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.1); 
}
.computer {
  position: relative;
  width: 400px;
  height: 500px;
  margin: 20px 0;
  background: rgb(207, 197, 174);
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top:-60%;
  left: 40%;
  z-index: 1;
  background: radial-gradient(circle, rgb(249, 237, 209) 20%, rgb(123, 117, 103) 100%); 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.1); 
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}
.screen{
  position: relative;
  width: 300px;
  height: 240px;
  margin: 20px 0;
  background: rgb(195, 237, 244);
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top:-110%;
  left: 43.5%;
  z-index: 2;
}
.orange2{
  width: 130px;
  height: 130px;
  background: rgb(255, 161, 85);
  border-radius: 50%;
  position: relative;
  top: -55%;
  left: 60%;
  z-index: 3;
  background: radial-gradient(circle, rgb(255, 177, 67) 0%, rgb(175, 94, 18) 100%); 
  border-radius: 50%; 
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.1); 
}
.keyboard {
  position: absolute;
  border-bottom: 150px solid rgb(66, 72, 79);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 400px;
  top: 60%;
  left:38%;
  z-index: 2;
}




/* Your CSS goes here */