body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  display: none;
}

.container {
  height: 70vh;
  width: 70vw;

  padding-bottom: 20%;
  margin-left: 14.5%;
  position: absolute;

  display: flex;
  flex-direction: column;
  align-items: center;
  caret-color: transparent;
  /* border: solid red; */
  background: rgb(255, 255, 255);
}


/** __________SCREEN____________ **/

iframe {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  position: absolute;

  border: 0;
  border-radius: 11px;
}

.screen {
  z-index: 20;

  width: 48%;
  padding-bottom: 27%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10.9%;
  margin-bottom: 10%;
  position: absolute;
  border: solid rgb(53, 53, 53);
  border-radius: 13px;
}


#pc_rim {
  z-index: 18;

  width: 50%;
  padding-bottom: 30.7%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 13px;
  background: rgb(0, 0, 0);
}

#back-lit {
  z-index: 10;

  width: 50%;
  padding-bottom: 30%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 13px;
  background: rgba(0, 0, 0, 1);
  box-shadow: 0 0 20px rgba(0, 68, 255, 0.57);
}

/** __________CAMERA____________ **/

#cam_holder {
  z-index: 14;

  width: 8%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 8%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 20px / 20px;
  border: 4.4px solid #000000;
  background: rgba(45.69, 45.69, 45.69, 1);
}

#cam_cover {
  z-index: 15;

  width: 1.3%;
  padding-bottom: 1.3%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 8.44%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 50px / 50px;
  border: 1.33px solid #8e8e8e;
  background: rgba(0, 0, 0, 1);
}

#cam_lens {
  z-index: 16;

  width: 0.5%;
  padding-bottom: 0.5%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 8.9%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 50px / 50px;
  background: rgb(1, 85, 146);
}

/** __________STAND____________ **/

#leg {
  z-index: 11;

  width: 7%;
  padding-bottom: 21%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 30%;
  margin-bottom: 10%;
  position: absolute;

  background: rgb(54, 52, 52);
}

#feet {
  z-index: 12;

  width: 27%;
  padding-bottom: 2.5%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 50%;
  margin-bottom: 10%;
  position: absolute;

  border-top-left-radius: 50px;
  border-top-right-radius: 50px;

  background: rgba(43.56, 43.56, 43.56, 1);
}


/** _______BOX_________ **/

#box_top {
  z-index: 5;

  width: 77%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 48%;
  margin-bottom: 10%;
  position: absolute;

  background: rgb(78, 78, 78);
}

#box_front {
  z-index: 9;

  width: 77.5%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 55.8%;
  margin-bottom: 10%;
  position: absolute;

  background: #d9d9d9;
  border-radius: 21%;
}

#box_back {
  z-index: 4;

  width: 46.4%;
  padding-bottom: 5%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 47%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 20%;
  background: rgb(78, 78, 78);
  box-shadow: 0 0 5px rgba(255, 117, 129, 0.57);
}

#Line_left {
  z-index: 6;

  width: 40%;
  padding-bottom: 13%;
  transform: rotate(32deg);

  margin-left: 76%;
  margin-right: 10%;
  margin-top: 40%;
  margin-bottom: 10%;
  position: absolute;

  background: rgb(255, 255, 255);
}

#Line_right {
  z-index: 6;

  width: 40%;
  padding-bottom: 13%;
  transform: rotate(-32deg);

  margin-left: 10%;
  margin-right: 76%;
  margin-top: 40%;
  margin-bottom: 10%;
  position: absolute;

  background: rgb(255, 255, 255);
}


/**  _________BUTTONS__________ **/

.TV__channels {
  padding: 0;
  z-index: 25;

  width: 55%;
  padding-bottom: .5%;

  margin-left: 17%;
  margin-right: 10%;
  margin-top: 58%;
  margin-bottom: 10%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* border: solid red; */
}

.TV__channel {
  list-style-type: none;
  width: 10%;
  padding-bottom: 10%;
  border-radius: 50%;
  float: left;
  position: relative;
}

.TV__channel a {
  width: 55%;
  padding-bottom: 55%;
  border-radius: 50%;

  margin-left: 25%;
  margin-right: 10%;
  margin-top: 24%;
  margin-bottom: 10%;
  position: absolute;

  background-color: #454040;
  box-shadow: 0 0 5px rgb(255, 0, 0);
}

.TV__channel a:active {
  box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px,
    inset rgba(0, 0, 0, 0.15) 0 -2px 5px,
    /* inner shadow */
    rgba(100, 100, 100, 0.6) 0 2px 1px,
    rgba(100, 100, 100, 0.6) 0 2px 1px;
  /* color border */
}

.TV__channel .power {
  width: 90%;
  padding-bottom: 90%;
  border-radius: 50%;

  margin-left: 6%;
  margin-right: 0%;
  margin-top: 6.5%;
  margin-bottom: 0%;
  position: absolute;

  background-color: #00000000;
}
.TV__channel .hidden {
  width: 0%;
  padding-bottom: 0%;
  border-radius: 50%;

  margin-left: 0%;
  margin-right: 0%;
  margin-top: 55%;
  margin-bottom: 0%;
  position: absolute;

  background-color: #000000;
}

#but_base {
  z-index: 20;

  width: 5%;
  padding-bottom: 5%;

  margin-left: 0%;
  margin-right: 0%;
  margin-top: 58.3%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 50%;
  background: rgb(0, 0, 0);
}

#light_1 {
  z-index: 23;

  width: 2%;
  padding-bottom: 0.35%;
  transform: rotate(90deg);

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 59.6%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 50px;
  background: rgb(255, 0, 30);
  box-shadow: 0 0 10px rgb(255, 0, 30);
}

#light_cover {
  z-index: 22;

  width: 2%;
  padding-bottom: 2%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 58.5%;
  margin-bottom: 10%;
  position: absolute;

  border-radius: 40%;
  background: rgb(0, 0, 0);
}

#light_2 {
  z-index: 21;

  width: 3.7%;
  padding-bottom: 3.7%;

  margin-left: .035%;
  margin-right: 0%;
  margin-top: 59%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 50%;
  background: rgb(255, 0, 0);
}

#light_cover2 {
  z-index: 22;

  width: 3.1%;
  padding-bottom: 3.1%;

  margin-left: 0%;
  margin-right: 0%;
  margin-top: 59.3%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 50%;
  background: rgb(0, 0, 0);
}


/** __________SPEAKER____________ **/

#speak_r {
  z-index: 10;
  width: 8%;
  padding-bottom: 6%;

  margin-left: 2%;
  margin-right: 69%;
  margin-top: 57.8%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 35%;
  background: rgb(110, 110, 110);
}

#speak_l {
  z-index: 10;
  width: 8%;
  padding-bottom: 6%;

  margin-left: 69%;
  margin-right: 2%;
  margin-top: 57.8%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 35%;
  background: rgb(110, 110, 110);
}

#speak_rx {
  z-index: 10;

  width: 7%;
  padding-bottom: 5%;

  margin-left: 2%;
  margin-right: 69%;
  margin-top: 58.33%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 35%;
  background-image: repeating-linear-gradient(rgb(0, 0, 0),
      rgb(125, 125, 125) 10%);
}

#speak_lx {
  z-index: 10;

  width: 7%;
  padding-bottom: 5%;

  margin-left: 69%;
  margin-right: 2%;
  margin-top: 58.33%;
  margin-bottom: 8%;
  position: absolute;

  border-radius: 35%;
  background-image: repeating-linear-gradient(rgb(0, 0, 0),
      rgb(125, 125, 125) 10%);
}


/** __________TEXT____________ **/

#logo {
  z-index: 20;

  width: 10%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 38.7%;
  margin-bottom: 10%;
  position: absolute;

  font-size: 1.1vw;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  color: #e3e3e3;
}

#text1 {
  z-index: 9;

  width: 50%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 0%;
  margin-bottom: 10%;
  position: absolute;

  color: #cdf1ff;
  font-size: 1.3vw;
  font-weight: bold;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  /* text-shadow: 0 0 30px rgb(254, 192, 255); */
}

#github {
  z-index: 9;

  width: 50%;
  padding-bottom: 10%;

  margin-left: 10%;
  margin-right: 10%;
  margin-top: 70%;
  margin-bottom: 10%;
  position: absolute;

  font-size: 1.3vw;
  font-weight: bold;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #ffe4fd;
  cursor: url(icons8-lady-beetle-10.png), pointer;
}