/* iPhone X: marvelapp/devices.css, resizable fork by Philip Kiely (MIT).
   Pro Display XDR: picturepan2/devices.css by Yan Zhu (MIT).
   Every length is a multiple of --u, set by the page. */

.iphone-x {
  width: calc(375 * var(--u));
  height: calc(812 * var(--u));
  padding: calc(26 * var(--u));
  background: #fdfdfd;
  box-shadow: inset 0 0 calc(11 * var(--u)) 0 black;
  border-radius: calc(66 * var(--u));
}
.iphone-x .overflow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: calc(66 * var(--u));
  overflow: hidden;
}
.iphone-x .shadow {
  border-radius: 100%;
  width: calc(90 * var(--u));
  height: calc(90 * var(--u));
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
}
.iphone-x .shadow--tl {
  top: calc(-20 * var(--u));
  left: calc(-20 * var(--u));
}
.iphone-x .shadow--tr {
  top: calc(-20 * var(--u));
  right: calc(-20 * var(--u));
}
.iphone-x .shadow--bl {
  bottom: calc(-20 * var(--u));
  left: calc(-20 * var(--u));
}
.iphone-x .shadow--br {
  bottom: calc(-20 * var(--u));
  right: calc(-20 * var(--u));
}
.iphone-x:before {
  width: calc(100% - 10 * var(--u));
  height: calc(100% - 10 * var(--u));
  position: absolute;
  top: calc(5 * var(--u));
  content: "";
  left: calc(5 * var(--u));
  border-radius: calc(61 * var(--u));
  background: black;
  z-index: 1;
}
.iphone-x .inner-shadow {
  width: calc(100% - 20 * var(--u));
  height: calc(100% - 20 * var(--u));
  position: absolute;
  top: calc(10 * var(--u));
  overflow: hidden;
  left: calc(10 * var(--u));
  border-radius: calc(56 * var(--u));
  box-shadow: inset 0 0 calc(15 * var(--u)) 0 rgba(255, 255, 255, 0.66);
  z-index: 1;
}
.iphone-x .inner-shadow:before {
  box-shadow: inset 0 0 calc(20 * var(--u)) 0 #FFFFFF;
  width: 100%;
  height: 116%;
  position: absolute;
  top: -8%;
  content: "";
  left: 0;
  border-radius: calc(200 * var(--u))/calc(112 * var(--u));
  z-index: 2;
}
.iphone-x .screen {
  border-radius: calc(40 * var(--u));
  box-shadow: none;
}
.iphone-x .top-bar, .iphone-x .bottom-bar {
  width: 100%;
  position: absolute;
  height: calc(8 * var(--u));
  background: rgba(0, 0, 0, 0.1);
  left: 0;
}
.iphone-x .top-bar {
  top: calc(80 * var(--u));
}
.iphone-x .bottom-bar {
  bottom: calc(80 * var(--u));
}
.iphone-x .volume, .iphone-x .volume:before, .iphone-x .volume:after, .iphone-x .sleep {
  width: calc(3 * var(--u));
  background: #b5b5b5;
  position: absolute;
}
.iphone-x .volume {
  left: calc(-3 * var(--u));
  top: calc(116 * var(--u));
  height: calc(32 * var(--u));
}
.iphone-x .volume:before {
  height: calc(62 * var(--u));
  top: calc(62 * var(--u));
  content: "";
  left: 0;
}
.iphone-x .volume:after {
  height: calc(62 * var(--u));
  top: calc(140 * var(--u));
  content: "";
  left: 0;
}
.iphone-x .sleep {
  height: calc(96 * var(--u));
  top: calc(200 * var(--u));
  right: calc(-3 * var(--u));
}
.iphone-x .camera {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  top: calc(9 * var(--u));
  border-radius: 100%;
  position: absolute;
  left: calc(154 * var(--u));
  background: #0d4d71;
}
.iphone-x .speaker {
  height: calc(6 * var(--u));
  width: calc(60 * var(--u));
  left: 50%;
  position: absolute;
  top: calc(9 * var(--u));
  margin-left: calc(-30 * var(--u));
  background: #171818;
  border-radius: calc(6 * var(--u));
}
.iphone-x .notch {
  position: absolute;
  width: calc(210 * var(--u));
  height: calc(30 * var(--u));
  top: calc(26 * var(--u));
  left: calc(108 * var(--u));
  z-index: 4;
  background: black;
  border-bottom-left-radius: calc(24 * var(--u));
  border-bottom-right-radius: calc(24 * var(--u));
}
.iphone-x .notch:before, .iphone-x .notch:after {
  content: "";
  height: calc(8 * var(--u));
  position: absolute;
  top: 0;
  width: calc(8 * var(--u));
}
.iphone-x .notch:after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);
  left: calc(-8 * var(--u));
}
.iphone-x .notch:before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);
  right: calc(-8 * var(--u));
}

.xdr-css {
  height: calc(475 * var(--u));
  width: calc(640 * var(--u));
}
.xdr-css .device-frame {
  background: #151515;
  border-radius: calc(4 * var(--u));
  box-shadow: inset 0 0 calc(2 * var(--u)) #d4d5d7;
  height: calc(368 * var(--u));
  padding: calc(8 * var(--u));
  position: relative;
  width: calc(640 * var(--u));
}
.xdr-css .device-frame::before {
  background: #050505;
  border-radius: 50%;
  content: "";
  height: calc(6 * var(--u));
  left: 50%;
  margin-left: calc(-3 * var(--u));
  position: absolute;
  text-align: center;
  top: calc(6 * var(--u));
  width: calc(6 * var(--u));
  z-index: 9;
}
.xdr-css .device-screen {
  border: calc(2 * var(--u)) solid #121212;
  border-radius: calc(2 * var(--u));
  height: calc(352 * var(--u));
  width: calc(624 * var(--u));
}
.xdr-css .device-power::after {
  background: radial-gradient(circle at center, #d4d5d7 85%, #9fa1a6 100%);
  border-top: calc(1 * var(--u)) solid #d4d5d7;
  content: "";
  height: calc(6 * var(--u));
  margin: 0 auto;
  position: relative;
  width: calc(152 * var(--u));
}
.xdr-css .device-power::before {
  background: linear-gradient(to bottom, #9fa1a6 0, #c7c8cb 40%, #c7c8cb 85%, white 90%, #6b6e74 100%);
  content: "";
  height: calc(102 * var(--u));
  margin: 0 auto;
  position: relative;
  width: calc(152 * var(--u));
}
.xdr-css .device-home {
  background: transparent;
  border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
  bottom: calc(-2 * var(--u));
  box-shadow: calc(-61 * var(--u)) 0 #6b6e74, calc(61 * var(--u)) 0 #6b6e74;
  height: calc(1 * var(--u));
  left: 50%;
  margin-left: calc(-15 * var(--u));
  position: absolute;
  width: calc(30 * var(--u));
}