@media screen and (max-width:1024px){
  .container {
  width: 280px;
  height: 900px;
}
  .container .camera {
  width: 150.5px;
  height: 150.5px;
}
}

@media screen and (min-width:1025px){
  .container {
  width: 187px;
  height: 600px;
}

  .container .camera {
  width: 97.5px;
  height: 97.5px;
}
 
}

img.responsive{height: auto;}

body {
  background: #333;
  font-family: "Open Sans", sans;
}

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 1;
   background-color: #333;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.container {
  background: linear-gradient(#363730, #13130F);
  position: relative;
  margin: 50px auto;
  border-width: 6px;
  border-style: solid;
  border-image: linear-gradient(to bottom, #79797B 0%, #2A2922 100%);
  border-image-slice: 1;
  box-shadow: inset 0px 2px 8px 2px #111, 0px 5px 11px;
}
.container .logo {
  border: 2px solid #47B5DD;
  width: 85%;
  height: 4.5%;
  margin: 0 auto;
  position: relative;
  top: 3%;
font-size: 22px;
}
.container .logo::before, .container .logo::after {
  position: absolute;
  height: 100%;
  width: 50%;
  color: #FFF;
  display: flex;
  align-items: center;
}
.container .logo::before {
  content: "HAL";
  background: #47B5DD;
  justify-content: flex-end;
  padding-right: 2px;
}
.container .logo::after {
  content: "9000";
  background: #222;
  left: 50%;
}
.container .speaker {
  width: 100%;
  height: 23%;
  border-top: 6px solid #43423E;
  position: absolute;
  bottom: 0;
  box-shadow: 0px -2px 10px #111, inset 0px 4px 8px 0px #111;
  background-image: url("depositphotos_62038857-stock-photo-speaker-grill-texture.jpg");
  background-size: cover;
}
.container .camera {
  background-image: radial-gradient(ellipse at center, #ffd7aa 0%, #ffd7aa 3%, #ed0400 5%, #ed0400 22%, #530100 38%, #141212 72%, #141212 100%), url("bubble_6.png");
  background-size: cover;
  background-blend-mode: overlay;
  margin: 0 auto;
  border-radius: 50%;
  border: 6px solid #79797B;
  box-shadow: 1px 1px 9px 3px;
  position: relative;
  top: 38%;
}