.phone {
  border: solid #000;
  border-width: 15px 9px;
  border-radius: 9px;
  margin: auto;
  overflow: hidden;
  background: #000;
  transition: all 0.75s ease-out;
}
.phone iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.view_1 {
  transform: translateZ(-10vh) rotateX(50deg) rotateY(5deg) rotateZ(-50deg);
  border: solid #000;
  border-width: 12px 12px 15px 15px;
  border-radius: 18px;
  box-shadow: -3px 3px 6px -1px #666, -3px 3px 0 1px #111, -8px 7px 0 -1px #111, -12px 12px 0 -5px #111, -18px 15px 0 -5px transparent, -25px 15px 75px -15px rgba(0, 0, 0, 0.75);
}

.view_1 iframe {
  transform: rotate(90deg);
  margin-top: 235px;
  margin-left: -210px;
  width: 784px; /* Height and width are swapped to accommodate landscape */
  height: 381px;
  
}


.view_2 {
  transform: rotateX(0deg) rotateY(-45deg) rotateZ(0deg);
  box-shadow: 5px 1px 0 #111, 9px 2px 0 #111, 12px 3px 0 #111, 15px 4px 0 #111, 0 7px 20px #111;
}

.view_2 iframe {margin-top: 81px;
margin-top: 9px;
  width: 400px; /* Height and width are swapped to accommodate landscape */
  height: 820px;
}

.view_3 {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  box-shadow: 0px 3px 0 #111, 0px 4px 0 #111, 0px 5px 0 #111, 0px 7px 0 #111, 0px 10px 20px #111;
}

.view_3 iframe {
  transform: rotate(-90deg);
  margin-top: 210px;
  margin-left: -210px;
  width: 840px; /* Height and width are swapped to accommodate landscape */
  height: 420px;
}

#controls {
  position: absolute;
  top: -3px;
  left: 20px;
  font-size: 0.7em;
  color: #333;
}

#controls div {
  margin: 10px;
}

#controls div label {
  width: 120px;
  display: block;

}


#views {
  position: absolute;
  top: 9px;
  right: 20px;
  width: 200px;
}

#views button {
  width: 120px;
  border: 1px solid #222;border-radius:4px;
  background-color: #090909;
  height: 36px;
  padding: 9px;
  color: #999;
  transition: all 0.2s;
}

#views button:hover {
  color: #444;
  background-color: #eee;
}

/* @media (max-width: 1200px) {
  #wrapper {
    transform: scale(1, 1);
  }
}

@media (max-width: 900px) {
  #wrapper {
    transform: scale(0.8, 0.8);
  }
}
@media (max-width: 700px) {
  #wrapper {
    transform: scale(0.6, 0.6);
  }
}
@media (max-width: 500px) {
  #wrapper {
    transform: scale(0.4, 0.4);
  }
} */

html, body {overflow:hidden;
  height: 100%; /* Ensure both html and body cover the full viewport height */
  margin: 0; /* Remove default margins */
}

body {
  background: transparent;overflow:hidden;
  /*background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEg8mpJYDkh-cOq_hHSnNeKqfex-Cg3BJNn6-wliDEAVaKnATqcws2kJZ6dt7THwF8_rBg_kSC_MY47EyeIgIBcLMIR5fFZhnB_wUINovJvjHc6XPorB1QL6PI7zM3B0l8Kkt2IA24eup4c1b9v3LOr0BP20mWy-cZhQYZbvxuW_9ajdTrHft4cBfPV3kyg1'); 
 */ 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Ensure the image covers the entire background */
  height: 100%; /* Cover the full height of the body */
  margin: 0; /* Remove default margins */
}