<div class="screen">
   <div class="speaker">
   </div>
   <div class="camera">
      <div class="camera2">
      </div>
   </div>

   <div class="cborder">
      <div class="hourhand">
      </div>
      <div class="minutehand">
      </div>
      <div class="secondhand">

      </div>
   </div>
   <p> Pure CSS Clock & Phone</p>
</div>

@import url("https://fonts.googleapis.com/css?family=Muli");

$firstcolor: rgb(211, 204, 227);
$secondcolor: rgb(233, 228, 240);
$thirdcolor: rgb(252, 0, 255);
$forthcolor: rgb(0, 219, 222);

body {
   background: linear-gradient(to right, $firstcolor, $secondcolor);
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   color: black;
   font-family: Muli;
   font-size: 30px;
   margin-left: -380px;
   margin-top: 100px;
}
.screen {
   margin-top: 550px;
   border: 5px solid black;
   width: 250px;
   height: 500px;
   background: linear-gradient(to right, $thirdcolor, $forthcolor);
   border-radius: 35px;
   position: absolute;
   box-shadow: inset 0 0 10px #000000, 2px 2px 100px -6px black;
}

.speaker {
   width: 50px;
   height: 3px;
   border: 1px solid black;
   margin-top: 20px;
   margin-left: 100px;
   border-radius: 100px;
   background-color: hsla(360, 5%, 65%, 1);
   position: relative;
}

.camera {
   width: 15px;
   height: 15px;
   border-radius: 100px;
   border: 1.5px solid black;
   background-color: white;
   margin-top: -15px;
   margin-left: 45px;
   position: absolute;
}

.camera2 {
   width: 7px;
   height: 7px;
   border-radius: 100px;
   border: 1.5px solid black;
   background-color: black;
   margin-top: 3px;
   margin-left: 20px;
   position: absolute;
}

.cborder {
   width: 200px;
   height: 200px;
   border: 1.2px solid black;
   border-radius: 100px;
   position: relative;
   margin-top: 70px;
   margin-left: 23px;
}

.hourhand {
   width: 1.5px;
   height: 50px;
   background-color: hsla(0, 95%, 65%, 1);
   position: absolute;
   margin-top: 50px;
   margin-left: 99px;
   border-radius: 50px;
   transform-origin: 50% 100%;
}

.minutehand {
   width: 2.5px;
   height: 90px;
   background-color: hsla(285, 95%, 85%, 1);
   position: absolute;
   margin-top: 10px;
   margin-left: 99px;
   border-radius: 50px;
   transform-origin: 50% 100%;
}

.secondhand {
   width: 2px;
   height: 90px;
   background-color: hsla(175, 95%, 55%, 1);
   position: absolute;
   margin-top: 10px;
   margin-left: 99px;
   border-radius: 50px;
   transform-origin: 50% 100%;
}

@keyframes rotate {
   100% {
      transform: rotateZ(360deg);
   }
}

.hourhand {
   animation: rotate 43200s infinite linear;
} //43200s
.minutehand {
   animation: rotate 3600s infinite linear;
} //3600s
.secondhand {
   animation: rotate 60s infinite linear;
} //60s