<article>
  <section class="flip"></section>
  <section class="bottomframe">
    <div class="liner"></div>
  </section>
  <section class="buttons">
    <button class="button-1"></button>
    <button class="button-2"></button>
    <button class="button-3"></button>
  </section>
  <section class="topframe">
    <div class="camera-section"></div>
    <div class="camera">
      <div class="lens"></div>
      <div class="megapixel">CSS ZOOM 4X</div>
    </div>
    <div class="notch"></div>
  </section>
  <section class="window">
    <div class="logo"></div>
    <div class="screen">
      <div class="cartoon" role="img" aria-labelledby="desc">
        <div id="desc">Polygonal drawing of a woman</div>
        <div class="face-1"></div>
        <div class="face-2"></div>
        <div class="face-3"></div>
        <div class="shirt"></div>
        <div class="shirt-clear"></div>
        <div class="shirt-dark"></div>
        <div class="shirt-dark-2"></div>
        <div class="lip-bottom"></div>
        <div class="lip-bottom-dark"></div>
        <div class="lip-bottom-light"></div>
        <div class="lip-top"></div>
        <div class="lip-top-dark"></div>
        <div class="lip-top-light"></div>
        <div class="chin-line"></div>
        <div class="cheek-2"></div>
        <div class="cheek-dark"></div>
        <div class="cheek-light"></div>
        <div class="eye-1-top"></div>
        <div class="eye-1-back"></div>
        <div class="eye-1-eyelid"></div>
        <div class="eye-1-eyebrow"></div>
        <div class="eye-cheek"></div>
        <div class="eye-2-top"></div>
        <div class="eye-2-lid"></div>
        <div class="eye-2-eyebrow"></div>
        <div class="hair-1"></div>
        <div class="hair-2"></div>
        <div class="hair-line"></div>
        <div class="shadow-nose"></div>
        <div class="shadow-ear"></div>
        <div class="nose-1"></div>
        <div class="nose-2"></div>
        <div class="hair-back"></div>
      </div>
      <time datetime="11:35">11:35<span>AM</span></time>
      <div class="battery"></div>
      <div class="signal"></div> 
    </div>
    <div class="sleep"></div>
  </section>

</article>

@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');

/* based on https://www.cnet.com/a/img/resize/03f41d05502e9dc455926d60e1901c67394caee7/hub/2010/10/21/69f06dd6-cc2e-11e2-9a4a-0291187b029a/motorola-razr-v3i_1.jpg?auto=webp&width=768 */

article {
  position: absolute;
  font-size: 36vmin;
  width: 1em;
  aspect-ratio: 20 / 37;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  --texture:
    repeating-linear-gradient(transparent 0 13%, #ffffff04 0 calc(13% + 1px), transparent 0) 30% 0% / 40% 100% no-repeat,
    repeating-linear-gradient(transparent 0 7%, #ffffff06 0 calc(7% + 1px), transparent 0) 70% 0% / 33% 100% no-repeat,
    repeating-linear-gradient(transparent 0 11%, #ffffff04 0 calc(11% + 1px), transparent 0) -10% 0% / 35% 100% no-repeat,
    repeating-linear-gradient(transparent 0 17%, #ffffff08 0 calc(17% + 1px), transparent 0) 110% 0% / 27% 100% no-repeat,
    repeating-linear-gradient(transparent 0 13%, #00000004 0 calc(13% + 1px), transparent 0) 60% -10% / 33% 100% no-repeat,
    repeating-linear-gradient(transparent 0 8%, #00000004 0 calc(8% + 1px), transparent 0) 21% 2% / 27% 100% no-repeat,
    repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7% / 19% 100% no-repeat,
    repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 71% 15% / 19% 100% no-repeat,
    
    repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0% / 4.0% 10.0%,
    repeating-linear-gradient(transparent 0 7%, #ffffff04 0 calc(7% + 1px), transparent 0) 70% 0% / 3.3% 10.0%,
    repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0% / 3.5% 10.0%,
    repeating-linear-gradient(transparent 0 17%, #ffffff05 0 calc(17% + 1px), transparent 0) 110% 0% / 2.7% 10.0%,
    repeating-linear-gradient(transparent 0 13%, #00000003 0 calc(13% + 1px), transparent 0) 60% -10% / 3.3% 10.0%,
    repeating-linear-gradient(transparent 0 8%, #00000003 0 calc(8% + 1px), transparent 0) 21% 2% / 2.7% 10.0%,
    repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7% / 1.9% 10.0%,
    repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 71% 15% / 1.9% 10.0%;
  
  
}

article::before {
  caontent: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.cnet.com/a/img/resize/03f41d05502e9dc455926d60e1901c67394caee7/hub/2010/10/21/69f06dd6-cc2e-11e2-9a4a-0291187b029a/motorola-razr-v3i_1.jpg?auto=webp&width=768);
  background-position: center center;
  background-size: auto 100%;
  opacity: 0.5;
  z-index: 5;
}

article *,
article *::before,
article *::after {
  position: absolute;
  box-sizing: border-box;
}

.window {
  width: 72.5%;
  height: 44%;
  top: 43.75%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0c0c0c;
  border-radius: 0.1125em 0.1125em 1.125em 1.125em / 0.1125em 0.1125em 0.2em 0.2em;
  box-shadow:
    /* top */
/*     inset 0 0.03em 0.03em -0.03em #333a, */
    inset 0 0.004em 0.0033em -0.003em #fffc,
    0 -0.005em 0.002em -0.002em #0005,
    /* bottom */
    0 0.004em 0.002em -0.0025em #fffc,
    0 0.005em 0.002em -0.002em #0008,
    inset 0 -0.004em 0.002em -0.002em #0c0c0ccc,
    inset 0 -0.005em 0.0025em -0.0025em #fff8,
    inset 0 -0.05em 0.02em -0.05em #6663
    
}

.screen {
  width: 53%;
  height: 40.75%;
  background: #333;
  top: 43.75%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 0.0075em;
}

@keyframes sleep {
  0%, 99% { opacity: 0; }
  100% { opacity: 1; }
}

.sleep {
  animation: sleep 10s forwards;
  width: 53%;
  height: 40.75%;
  background: #222;
  top: 43.75%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0.002em 0.02em #000c;
}

article:has(button:active) .sleep {
  animation: none;
  opacity: 0;
}

.screen::after {
  content: "";
  width: 100%;
  height: 100%;
    box-shadow: inset 0 0.002em 0.02em #000c;
}

.logo {
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 82%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(#c6c3d055, #c6c3d011),
    var(--texture),
    #595b6b;
  box-shadow: 
    inset 0 0 0.001em 0.002em #595b6b,
    inset 0 0.001em 0.005em 0.0015em #fff3,
    inset 0 -0.001em 0.005em 0.0015em #0001

}

.logo::before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: 
    conic-gradient(at 50% 30%, #0000 159deg, #13141e 0 200deg, #0000 201deg) 24% 0% / 50% 65% no-repeat,
    conic-gradient(at 50% 30%, #0000 159deg, #13141e 0 200deg, #0000 201deg) 79% 0% / 50% 65% no-repeat,
    #f000;

  -webkit-mask:
    radial-gradient(closest-side circle at 72% 63%, #0000 85%, #000 90%) 0 0 / 51% 100% no-repeat,
    radial-gradient(closest-side circle at 32% 64%, #0000 79%, #000 83%) 100% 0 / 51% 100% no-repeat
}

.logo::after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:
    linear-gradient(110deg, #0000 39%, #13141e 40% 45%, #0000 46%) 12.8% 55% / 50% 40% no-repeat,
    linear-gradient(-110deg, #0000 39%, #13141e 40% 45%, #0000 46%) 91% 55% / 50% 40% no-repeat
}

.topframe {
  clip-path: polygon(
   0 -100%, 100% -100%,
    /* button 3 */
    100% 15.75%, 99% 18%, 99% 37%, 100% 39.25%,
   100% 100%, 0 100%,
    /* button 2 */
    0 63%, 1.5% 61.5%, 1.5% 50.5%, 0 49%,
    /* button 1 */
    0 39.5%, 1.5% 38%, 1.5% 17.5%, 0 15.5%
  );
  --teaxture: linear-gradient(#0000 0 0);
  width: 96.5%;
  height: 80.5%;
  left: 50%;
  top: 3%;
  transform: translateX(-50%);
  border-radius: 55em 53em 77em 77em / 20em 20em 23em 23em;
  border-radius: 55em 53em 77em 77em / 25em 25em 23em 23em;
  background:
    
    radial-gradient(7% 200% at 0 0, #fff 50%, #fff0),
    radial-gradient(6.5% 200% at 0 100%, #000 60%, #fff0),
    radial-gradient(6.5% 30% at 100% 80%, #000c 30%, #0000),
    
    radial-gradient(at 0% 50%, #4d505e99, #5d606e00 50%),
    radial-gradient(at 100% 0, #5d606eaa, #5d606e00 30%),
    radial-gradient(at 100% 40%, #4d505eaa, #5d606e00 40%),
    
    conic-gradient(at 50% 77.5%, #e1ddedaa, #4c4c5daa 45deg, #737382aa 90deg, #bebaca44 110deg, #bebacaaa 130deg, #aaa6b6aa 140deg 165deg, #e5e2efaa 178deg 182deg, #c1becbaa 190deg, #4f4e5faa 225deg, #747483aa, #686877aa, #747180aa 300deg, #c6c3d0aa 350deg, #e1ddedaa),
    var(--texture),
    linear-gradient(#aaa, #aaa0 30%),
    linear-gradient(90deg, #ccc8 40%, #fff 47% 53%, #ccc0 60%) 0 0 / 100% 50% no-repeat,
    linear-gradient(90deg, #cccc, #777c),
    #d1cddd;
/*    background: #0f06; */
  box-shadow:
    inset 0 -0.002em 0.003em #000,
    0 -0.025em 0.02em -0.015em #0c0c0cee,
    0 -0.062em 0.02em -0.055em #0008,
    
    /* bottom */
    
    inset 0 -0.25em 0.013em -0.245em #05040966,
    inset 0 -0.2375em 0.01em -0.225em #050409,
    inset 0.004em -0.236em 0.01em -0.225em #fff8,
    inset -0.006em -0.233em 0.01em -0.225em #fff8,
    
/*     inset 0.2em -0.2em 0.0015em -0.27em #0c0c0c,
    inset -0.2015em -0.2em 0.0015em -0.27em #0c0c0ccc, */
    inset 0.2em -0.2em 0.0015em -0.27em #242428ee,
    inset -0.2015em -0.2em 0.0015em -0.27em #232428ee,
    
    inset 0 -0.25em 0 -0.225em #343438,
    inset -0.0035em -0.251em 0.002em -0.223em #050409ee,   
    
    inset -0.008em -0.2525em 0.006em -0.223em #fff6,
    inset 0 -0.1em 0 -0.076em #0c0c0ccc,
    
    
    /* top */
    inset 0 0.155em 0.02em -0.14em #fffc,
    inset 0 0.17em 0.01em -0.15em #c3c4d088,
    inset 0 0.18em 0.02em -0.16em #d3d4e088,
    inset -0.1em 0.3em 0.01em -0.2975em #e3e4f0cc,
    inset 0.1em 0.3em 0.01em -0.2975em #e3e4f0cc,
    
    /* left side*/
    inset 0.2em 0 0.0075em -0.19em #0c0c0ccc,
    inset 0.2105em 0 0.005em -0.2em #fff,
    inset 0.205em 0 0.005em -0.19em #534f5f,
    inset 0.22em 0 0.0075em -0.19em #c3c4d0,
    inset 0.26em 0 0.0175em -0.22em #bfbfcd,
    inset 0.27em 0 0.005em -0.23em #534f5f04,
    inset 0.3em 0 0.0075em -0.25em #e3e4f077,
    /* right side*/
    inset -0.2em 0 0.0075em -0.19em #0c0c0c77,
    inset -0.205em 0 0.01em -0.19em #c3cfd6cc,
    inset -0.22em 0 0.0075em -0.19em #b3b4c0,
    inset 0.23em 0 0.0075em -0.2em #c3c4d0,
    inset -0.26em 0 0.0175em -0.22em #afafbd,
    inset -0.27em 0 0.005em -0.23em #534f5f04,
    inset -0.3em 0 0.0075em -0.25em #d3d4e0aa
    
    /* beyond bottom :P */
/*     0 0.0275em  #05040966 */
}

.camera-section {
  width: 35%;
  height: 5.25%;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  -webkit-mask:
    linear-gradient(#000 30%, #0000 0),
/*     radial-gradient(at 0 100%, #0000, #000 50%) 0 100% / 50% 80% no-repeat; */
    linear-gradient(-45deg, #0000, #000 20%) 100% 100% / 70% 100% no-repeat,
    linear-gradient(45deg, #0000, #000 20%) 0% 100% / 70% 100% no-repeat;
}

.camera-section::before,
.camera-section::after {
  --corner: linear-gradient(#0000 0 0);
  content: "";
  border-radius: 0.025em 0 0 0;
  width: 55%;
  height: 100%;
  top: 0;
  left: 2%;
  top: 4%;
  transform: skewX(-35deg);
  background: 
    radial-gradient(50% 100% at 0 0, #534f5f88, #0000 50%),
    var(--corner),
    linear-gradient(#bfbfcd, #bfbfcd00)
    #c1bec7;
  box-shadow:
    0 -0.015em 0.02em -0.015em #000c,
    inset 0.01em 0.01em 0.01em #f3f0ff
}

.camera-section::after {
  transform: scaleX(-1) skewX(-35deg);
  left: auto;
  right: 2%;
  --corner: radial-gradient(at 0 100%, #a8a7b2, #a8a7b200 50%);
  clip-path: polygon(0 -100%, 90% -100%, 80% 200%, -100% 200%)
}

.camera {
  width: 30%;
  height: 11%;
  left: 50%;
  top: 0;
  transform: translate(-50%);
}

.camera::before,
.camera::after {
  content: "";
  height: 100%;
  width: 66%;
  left: 5%;
  background: #0c0c0c;
  border-radius: 0.025em 0 0 0.0375em;
  transform: skewX(-10deg);
  box-shadow: 
    0 0 0.005em #fff,
    -0.0025em 0 0.0025em #fff8;
}

.camera::after {
  transform: scaleX(-1) skewX(-10deg);
  left: auto;
  right: 5%;
  box-shadow: 
    0 0 0.005em #fff,
    -0.0025em 0 #fff8;
  clip-path: polygon(-100% -10%, 80% -10%, 90% 110%, -10% 110%);
}

.lens {
  width: 30%;
  aspect-ratio: 1;
  background: #2f2a2d;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%);
  top: 12%;
  z-index: 1;
  box-shadow: inset 0.002em 0.005em 0.025em 0.002em #0006 
}

.lens::before {
  content: "";
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0.015em;
  background: 
    radial-gradient(farthest-side circle at 60% 85%, #fff, transparent 14%),
    radial-gradient(farthest-side circle at 60% 90%, #FF69B4cc 10%, transparent 50%),
    radial-gradient(farthest-side circle at 55% 75%, #0000 65%, #e8edf344 70%, #0000 75%),
    #0c0c0ccc;
}

.megapixel {
  width: 100%;
  text-align: center;
  bottom: 6%;
  font-size: 0.0225em;
  font-family: Arial, verdana, sans-serif;
  z-index: 1;
  font-weight: 500;
  color: #eee;
  text-shadow: 0 0em 0.2em #fff8;
  filter: blur(0.04em);
}

.bottomframe {
  width: 97.5%;
  height: 100%;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  border-radius: 0 0 100% 100% / 50% 50% 50% 45%;
  clip-path: circle(112% at 50% 0%);
  -webkit-mask: radial-gradient(100% 100% at 50% 0, #000 97.4%, #0000 97.5%);
  background: 
    /* left side */
    radial-gradient(15% 80% at 0 50%, #fff5 40%, #0000 50%) no-repeat,
    radial-gradient(1.7% 69% at 6% 20%, #000c, #0000) no-repeat,
    radial-gradient(1.8% 90% at 5.5% 20%, #fff9, #0000) no-repeat,
    radial-gradient(120% 150% at 100% 10%, #0000 93%, #000),
    /* right side */
    radial-gradient(15% 80% at 100% 50%, #fff5 40%, #0000 50%) no-repeat,
    radial-gradient(1% 65% at 94% 20%, #0006, #0000) no-repeat,
    radial-gradient(1.75% 70% at 95% 20%, #fff9, #0000) no-repeat,
    
    /* bottom shadows */
    radial-gradient(200% 100% at 50% 0, #0000 88%, #000c 92%),
    radial-gradient(190% 100% at 50% 0, #0000 89%, #000 91%),
    
    linear-gradient(#0000 75%, #47445188 90%),
    radial-gradient(#a7a4afee, #a7a4af00),
    var(--texture),
    
    radial-gradient(200% 100% at 50% 0, #0000 80%, #e3e4f055 85%, #34373d),
/*     linear-gradient(#e3e4f044, #e3e4f000), */
    #a7a4af;
  abackground: #0000;
  box-shadow:
    inset 0 0 0.025em,
    inset 0 -0.01em 0.03em 0.01em #0c0c0c33,
    inset 0.4em -0.6em 0.06em -0.64em #7f7c87cc,
    inset 0.002em 0.2em 0.005em 0.018em #0c0c0c77 ,
    inset 0.2em 1em 0.0075em -0.19em #0c0c0ccc,
    inset 0.2105em 1em 0.005em -0.2em #fff5,
    inset 0.21em 1em 0.002em -0.19em #534f5f33,
    inset 0.22em 1em 0.0075em -0.19em #c3c4d055,
    inset 0.26em 1em 0.0175em -0.22em #bfbfcd55,
    inset 0.27em 1em 0.005em -0.23em #534f5f04,
    inset 0.3em 1em 0.0075em -0.25em #e3e4f055
}

.liner {
  width: 103%;
  height: 20%;
  border-radius: 120% 130% 115% 120% / 100%;
  background: #ff04;
  left: 50%;
  top: 65.4%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: 
    radial-gradient(110% 100%, #000 38%, #0000 44%),
    radial-gradient(115% 100%, #fff7 40%, #fff0 43%),
    #2d2d2f;
  box-shadow:
    /* left */
    inset 0.03em 0.04em 0.01em,
    /* bottom shadow/light */
    inset 0 0.19em 0.02em -0.015em #0c0c0c88,
    inset 0 -0.035em 0.01em -0.02em #000,
    inset 0 -0.033em 0.01em -0.02em #fffc,
    0 0.029em 0.01em -0.028em #fff,
    0 0.03em 0.004em -0.023em #0002
    ;
}

.liner::before,
.liner::after {
  content: "";
  background: #000;
  width: 0.003em;
  height: 100%;
  left: 9%;
  box-shadow: 0 0 0.015em 0.004em #0c0c0ccc;
  filter: blur(0.002em);
}

.liner::after {
  left: 89.5%;
}

.flip {
  width: 99%;
  height: 14%;
  left: 50%;
  top: 1%;
  transform: translate(-50%);
  border-radius: 17% / 100%;
  background:
    linear-gradient(#0008 0 0) 13% 0 / 0.004em 100% no-repeat,
    linear-gradient(#0008 0 0) 87.5% 0 / 0.004em 100% no-repeat,
    radial-gradient(farthest-side, #fff6, #fff0) 87% 17% / 2.4% 50% no-repeat,
    linear-gradient(#0006, #535255 30%, #000c 60%),
    #3b3b3b;
  box-shadow: 
/*      0 0 0 1em red, */
    inset 0 0.008em 0.017em 0.01em #1a191ccc;
  clip-path: polygon(0 0, 12.5% 0, 13% 1%, 13.75% 0, 86.5% 0, 87.25% 1%, 88% 0, 100% 0, 100% 100%, 0 100%);
   clip-path: polygon(0 0.07em, 5.5% 0.002em, 12.85% 0.002em, 13% 0.006em, 13.75% 0.0em, 86.5% 0.00em, 87.25% 0.006em, 88% 0.002em, 94.5% 0.002em, 100% 0.07em, 100% 100%, 0 100%);
}

time {
  font-size: 0.1em;
  font-family: Dosis;
  bottom: 0.01em;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(0.012em);
  text-shadow:
     0.000em -0.025em #fff,
     0.025em -0.025em #fff,
     0.025em  0.000em #fff,
     0.025em  0.025em #fff,
     0.000em  0.025em #fff,
    -0.025em  0.025em #fff,
    -0.025em  0.000em #fff,
    -0.025em -0.025em #fff;
}

time span {
  position: relative;
  font-size: 0.7em;
  margin-left: 0.16em;
}

.signal {
  top: 0.03em;
  left:0.01em;
  width: 0.01em;
  height: 0.017em;
  background: black;
  box-shadow: 
    0.013em 0,
    0.013em -0.0075em,
    0.0265em 0,
    0.0265em -0.015em,
    0.04em 0,
    0.04em -0.015em,
    0.04em -0.0225em;
  filter:
    drop-shadow(0.0035em 0 #fff)
    drop-shadow(-0.003em 0 #fff)
    drop-shadow(0 0.0035em #fff)
    drop-shadow(0 -0.003em #fff)
    blur(0.00125em)
}

.battery {
  top: 0.02em;
  right: 0.01em;
  width: 0.01em;
  height: 0.015em;
  background: black;
  box-shadow: 
    -0.013em 0.005em,
    -0.013em -0.005em,
    -0.0265em 0.005em,
    -0.0265em -0.005em,
    -0.04em 0.005em #080,
    -0.04em -0.005em #080,
    -0.0535em 0.005em #080,
    -0.0535em -0.005em #080;
  filter:
    drop-shadow(0.0035em 0 #fff)
    drop-shadow(-0.003em 0 #fff)
    drop-shadow(0 0.0035em #fff)
    drop-shadow(0 -0.003em #fff)
    blur(0.00125em)
}

.buttons {
  width: 100%;
  height: 100%;
  top: 0;
  let: 0;
}

button {
  border: 0;
  font-size: 1em;
  width: 0.05em;
  max-width: 50%;
  background: #534f5f;
  border-radius: 0.0075em;
  transition: 0.125s;
  margin: 0;
  padding: 0;
}

button:active {
  transform: translate(10%, 0);
  transition: 0.25s;
}

.button-3:active {
  transform: translate(-10%, 0);
}

.button-1 {
  height: 0.3475em;
  top: 0.295em;
  left: 0.004em;
  background:
    linear-gradient(60deg, #0c0c0c00 83%, #0c0c0c 87%),
    radial-gradient(250% 100% at 35% -2%, #fffc 5%, #0c0c0c77 10%, #0000 15%),
    linear-gradient(90deg, #0c0c0c 1%, #0000 20% 30%, #0b0506 45%),
    linear-gradient(110deg, #0000 66%, #0c0c0cee 80%),
    radial-gradient(at 0 50%, #000, #0000 30%),
    linear-gradient(#a1a09c, #bab8b6);
  clip-path: polygon(-10% -10%, 100% -10%, 100% 110%, -10% 110%, 0 53%, 15% 52%, 15% 43%, 0 42%);
  box-shadow: inset 0 0 0.01em #0c0c0ccc
}

.button-2 {
  left: 0.004em;
  top: 0.79em;
  height: 0.2em;
  background:
    linear-gradient(60deg, #0c0c0c00 73%, #0c0c0ccc 79%),
    radial-gradient(250% 200% at 35% -2%, #fffc 5%, #0c0c0c77 10%, #0000 15%),
    linear-gradient(90deg, #0c0c0c 1%, #0000 20% 30%, #0b0506 45%),
    linear-gradient(110deg, #0000 46%, #0c0c0cee 80%),
    radial-gradient(at 0 50%, #0002, #0000 30%),
    linear-gradient(#a1a09c, #bab8b6);
  box-shadow: inset 0 0 0.01em #0c0c0ccc
}

.button-3 {
  right: 0.0035em;
  top: 0.295em;
  height: 0.3475em;
  background:
radial-gradient(30% 80% at 100% 50%, #000, #0000),
    linear-gradient(110deg, #0c0c0c 20%, #0000 25%),
    radial-gradient(250% 200% at 65% -2%, #fffc 5%, #0c0c0c77 8%, #0000 15%),
    linear-gradient(-90deg, #0c0c0c 1%, #0000 20% 25%, #0b0506 50%),
    linear-gradient(-110deg, #0000 66%, #000 80%),
    radial-gradient(at 100% 50%, #0001, #0000 30%),
    linear-gradient(#b1b0ac, #cac8c6);
  box-shadow: inset 0 0 0.01em #0c0c0ccc
}

.notch {
  width: 20.5%;
  height: 2.2%;
  transform: translate(-50%, -50%);
  top: 89.75%;
  left: 50%;
  filter: drop-shadow(0 0 0.004em #fffc)
}

.notch::before {
  box-shadow: inset 0 0.005em 0.01em #0c0c0ccc;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.13em 0.13em 400% 400%;
  background: 
    linear-gradient(#0000 70%, #0c0c0c77),
    radial-gradient(100% 100% at 50% 0, #0c0c0ccc 30%, #0000 50%),
    radial-gradient(at 50% 0%, #fff4, #fff0 50%) 0 0 / 50% 100% repeat-x,
    #4c5889;
    ;
  -webkit-mask:
    radial-gradient(100% 100% at 50% -20%, #0000 50%, #000 53%);
  clip-path: circle(800% at 50% -3371%);
}



/* Screen */
#desc {
  height: 0;
  width: 0;
  overflow: hidden;
  left: -1000in;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  height: 110%;
  background: #687edf;
  filter: blur(0.002em);
}

.cartoon div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.face-1 {
  background: #dc9178;
  clip-path: polygon(46.80% 76.10%,39.20% 27.00%,44.50% 14.30%,61.00% 10.90%,72.60% 19.00%,74.50% 27.10%,74.00% 38.30%,73.80% 42.30%,73.40% 46.30%,71.60% 52.90%,69.80% 56.40%,66.90% 61.10%,64.50% 63.50%,64.00% 68.70%,65.80% 70.20%,70.30% 80.40%);
}

.shirt-clear {
  background: #00237a;
  clip-path: polygon(-0.40% 103.60%,1.00% 93.00%,2.80% 91.40%,5.80% 87.20%,9.40% 84.80%,8.20% 89.20%,8.60% 92.60%,10.20% 89.2%,12.40% 96.8%,12.4% 108.8%,24.8% 102.8%,22.2% 96.20%,29.8% 100.6%,29.4% 113.6%,4.00% 112.8%);
}

.shirt-dark {
  background: #2e2334;
  clip-path: polygon(103.60% 98.00%,98.80% 92.00%,97.20% 87.00%,95.40% 83.20%,93.00% 81.80%,94.40% 85.00%,94.40% 90.20%,94.20% 97.00%,94.00% 101.0%,90.60% 101.8%,90.60% 97.20%,89.40% 90.80%,87.20% 85.60%,87.00% 92.40%,87.00% 114.0%);
}

.shirt-dark-2 {
  background: #2e2334;
  clip-path: polygon(65.10% 69.55%,64.55% 70.95%,63.95% 72.45%,64.90% 73.95%,61.50% 76.30%,62.30% 77.90%,65.40% 77.40%,67.85% 75.80%,69.90% 76.55%,70.55% 73.15%,69.55% 72.55%,67.50% 71.75%,67.05% 71.30%,66.00% 69.45%);
}

.lip-bottom-light {
  background: rgba(255,255,255,0.33);
  clip-path: polygon(61.60% 56.05%,63.55% 56.20%,62.40% 57.45%,61.30% 57.25%,61.25% 56.80%);
}

.shadow-ear {
  background: rgba(0,0,0,0.2);
  clip-path: polygon(34.00% 35.00%,32.20% 35.20%,32.20% 29.80%,32.60% 21.80%,39.00% 11.40%,44.00% 9.80%,38.00% 16.60%,42.60% 16.20%,38.80% 22.80%,43.20% 19.00%,44.60% 14.80%,49.80% 14.80%,43.60% 20.80%,38.60% 26.20%,36.80% 28.60%,39.40% 28.60%,38.40% 35.00%,38.80% 47.80%,37.00% 44.60%,37.00% 40.60%,34.20% 43.80%,33.00% 42.60%,34.60% 40.60%,35.20% 37.60%);
}

.shadow-nose {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(54.10% 47.20%,56.10% 45.40%,59.40% 45.10%,61.60% 45.90%,59.00% 44.70%,54.70% 45.00%,48.40% 47.60%,48.70% 50.10%,53.20% 48.20%);
}

.hair-line {
  background: #945164;
  opacity: 0.5;
  clip-path: polygon(50.60% 14.40%,46.80% 23.20%,44.60% 32.70%,44.00% 44.20%,45.40% 49.60%,48.20% 56.80%,50.00% 59.40%,46.30% 54.20%,43.80% 47.10%,43.20% 38.40%,44.00% 29.60%,45.70% 20.40%,48.90% 15.90%);
}

.cheek-light {
  background: rgba(255,255,255,0.2);
  clip-path: polygon(66.10% 43.30%,68.35% 46.05%,67.90% 48.45%,63.30% 50.40%,64.55% 51.60%,67.25% 52.55%,69.65% 46.90%,71.90% 42.65%,70.65% 42.05%,67.80% 43.25%);
}

.cheek-dark {
  background: rgba(0,0,0,0.1);
  clip-path: polygon(60.20% 64.20%,64.25% 60.15%,67.50% 53.85%,69.90% 49.40%,65.10% 46.05%,64.70% 47.55%,65.80% 50.40%,67.10% 51.90%,64.00% 55.20%,61.45% 58.40%,55.85% 59.65%,58.85% 60.55%,62.70% 60.35%);
}

.lip-bottom-dark {
  background: #2856e3;
  clip-path: polygon(52.90% 55.10%,57.70% 54.70%,56.00% 56.30%,56.80% 57.90%,54.50% 57.30%);
}

.lip-bottom {
  background: #b557b0;
  clip-path: polygon(52.80% 55.90%,57.70% 54.60%,63.50% 55.80%,62.80% 57.30%,61.10% 58.00%,58.50% 58.40%,55.20% 57.60%);
}

.chin-line {
  background: rgba(0,0,0,0.75);
  clip-path: polygon(45.10% 60.50%,54.20% 65.40%,58.80% 65.80%,64.20% 64.20%,58.50% 66.30%,56.20% 66.50%,53.60% 66.40%,47.30% 62.90%);
}

.eye-1-back {
  background: #ad8495;
  clip-path: polygon(64.20% 37.48%,67.53% 37.52%,70.60% 36.95%,68.98% 36.10%,64.95% 36.70%);
}

.eye-1-top {
  background: #945164;
  clip-path: polygon(64.00% 37.50%,65.58% 38.50%,68.23% 38.58%,70.73% 37.33%,71.95% 36.98%,72.15% 35.75%,70.98% 34.20%,70.20% 35.00%,65.10% 36.38%);
}

.eye-1-eyelid {
  background: #2d2136;
  clip-path: polygon(63.30% 37.00%,65.10% 35.70%,68.50% 35.00%,70.20% 35.20%,71.20% 36.50%,71.00% 37.40%,69.40% 36.70%,68.40% 36.70%,68.20% 37.50%,67.30% 37.60%,66.60% 37.60%,65.20% 37.00%,64.10% 37.80%);
}

.lip-top-light {
  background: #b0533f;
  clip-path: polygon(61.90% 55.30%,63.80% 54.60%,64.30% 56.00%,63.10% 56.00%);
}

.lip-top-dark {
  background: #ba6174;
  clip-path: polygon(58.90% 53.20%,59.20% 55.60%,61.70% 55.80%,64.30% 55.30%,62.80% 53.30%,60.70% 53.10%);
}

.lip-top {
  background: #8258a8;
  clip-path: polygon(52.70% 55.20%,55.60% 53.10%,57.70% 52.90%,59.10% 53.30%,61.70% 53.20%,63.10% 53.70%,64.50% 55.90%,63.20% 56.20%,59.80% 55.60%,58.60% 55.90%,55.70% 55.20%);
}

.eye-2-top {
  background: #ae8597;
  clip-path: polygon(45.90% 36.70%,49.90% 37.20%,53.20% 36.10%,50.10% 35.10%,47.40% 35.80%);
}

.cheek-2 {
  background: #97678d;
  clip-path: polygon(49.40% 50.40%,50.40% 50.80%,52.80% 48.10%,50.90% 46.90%);
}

.eye-cheek {
  background: #97678d;
  clip-path: polygon(56.00% 32.20%,49.40% 31.80%,49.40% 35.60%,50.20% 37.90%,46.30% 41.20%,50.10% 45.90%,54.30% 37.70%,51.90% 37.30%,53.70% 35.30%,55.40% 35.20%);
}

.eye-1-eyebrow {
  background: #6a3d4a;
  clip-path: polygon(62.70% 33.10%,66.40% 32.40%,70.20% 32.20%,72.30% 32.80%,70.90% 30.40%,65.50% 30.70%,63.30% 31.30%);
}

.eye-2-lid {
  background: #0b3584;
  clip-path: polygon(44.10% 36.10%,48.60% 34.40%,51.10% 34.60%,53.70% 35.90%,52.70% 36.50%,51.50% 36.10%,51.40% 36.90%,50.50% 37.40%,49.50% 37.40%,48.60% 37.30%,47.80% 36.30%,45.50% 36.80%);
}

.eye-2-eyebrow {
  background: #0b3584;
  clip-path: polygon(43.30% 33.00%,47.90% 32.00%,55.10% 33.00%,56.10% 31.90%,52.30% 30.90%,47.50% 30.50%,44.20% 31.70%);
}

.hair-2 {
  background: #16173c;
  clip-path: polygon(31.60% 35.30%,33.60% 35.30%,34.60% 37.90%,35.70% 38.20%,38.30% 37.50%,38.30% 33.90%,40.80% 29.70%,39.60% 25.50%,44.50% 20.00%,51.30% 15.80%,52.70% 13.90%,51.40% 10.60%,53.60% 10.90%,53.20% 12.90%,55.10% 14.30%,62.60% 14.30%,57.10% 9.80%,54.80% 6.90%,52.40% 5.90%,47.90% 6.00%,42.80% 7.50%,39.70% 10.20%,35.90% 15.30%,32.60% 21.00%,32.40% 25.50%,32.00% 29.40%,31.30% 32.20%);
}

.hair-1 {
  background: #352225;
  clip-path: polygon(31.60% 35.30%,34.00% 35.30%,34.00% 37.50%,35.70% 37.80%,38.60% 40.40%,38.20% 33.80%,41.00% 29.20%,40.30% 25.40%,44.80% 19.30%,53.40% 14.90%,53.40% 13.90%,59.10% 14.10%,62.60% 13.70%,67.80% 17.60%,72.00% 23.20%,73.50% 29.40%,73.50% 32.70%,72.70% 33.00%,73.70% 34.00%,73.30% 36.70%,74.00% 38.70%,76.30% 29.20%,75.20% 20.10%,73.40% 14.10%,70.40% 10.00%,64.50% 7.50%,59.40% 7.00%,56.20% 5.70%,53.00% 6.00%,49.10% 6.10%,40.50% 8.90%,35.80% 15.00%,33.20% 19.30%,31.50% 28.40%,32.00% 29.60%,31.10% 31.90%);
}

.nose-1 {
  background: #2e171a;
  clip-path: polygon(61.05% 48.00%,61.35% 48.60%,62.05% 48.65%,62.35% 47.85%,61.80% 47.55%);
}

.nose-2 {
  background: #121a36;
  clip-path: polygon(56.00% 48.10%,56.85% 47.25%,57.65% 47.65%,57.15% 48.25%,56.45% 48.10%);
}

.hair-back {
  background: #131a36;
  clip-path: polygon(39.05% 52.05%,38.50% 53.50%,39.20% 56.55%,40.20% 57.50%,40.85% 56.45%,40.55% 54.05%);
}

.shirt {
  background: #001d5b;
  clip-path: polygon(-0.50% 103.80%,1.50% 91.90%,2.60% 91.30%,6.40% 85.90%,11.10% 82.90%,23.70% 77.50%,30.10% 74.80%,31.80% 72.90%,33.70% 72.90%,35.70% 71.40%,36.90% 70.10%,38.60% 69.60%,40.80% 72.40%,45.70% 74.10%,55.40% 74.90%,61.00% 74.00%,63.70% 72.90%,64.70% 70.40%,65.20% 69.30%,67.00% 71.30%,69.30% 72.30%,71.50% 74.00%,76.10% 76.00%,89.30% 80.00%,94.70% 82.60%,96.90% 85.60%,98.90% 91.00%,100.9% 106.6%);
}

.face-2 {
  background: #b2799f;
  clip-path: polygon(46.20% 14.20%,35.30% 42.50%,36.90% 51.10%,40.60% 53.50%,46.00% 72.70%,49.20% 86.90%,56.60% 78.60%,55.60% 66.30%,59.70% 65.50%,61.70% 60.10%,58.90% 60.30%,59.80% 58.40%,59.60% 55.50%,59.40% 53.00%,61.00% 53.00%,59.50% 49.00%,61.90% 43.60%,60.20% 37.90%,60.60% 33.00%,64.20% 33.00%,62.40% 37.50%,64.80% 42.00%,68.80% 46.20%,69.90% 39.50%,69.00% 34.90%,68.40% 31.20%,64.50% 31.30%,64.90% 17.60%,57.30% 17.80%,61.90% 11.40%
);
}

.face-3 {
  background: #0073ff;
  clip-path: polygon(37.90% 71.00%,40.80% 66.40%,41.30% 59.80%,40.30% 57.10%,38.70% 52.10%,38.70% 49.10%,37.10% 49.70%,35.10% 48.60%,32.70% 44.30%,31.80% 39.80%,32.10% 35.20%,38.90% 16.00%,48.90% 15.10%,54.00% 23.60%,52.00% 27.40%,54.00% 31.40%,58.60% 33.80%,59.70% 40.60%,58.30% 45.10%,59.90% 46.70%,57.10% 52.80%,56.20% 56.40%,57.60% 58.60%,54.40% 60.40%,56.40% 62.40%,56.50% 66.30%,53.20% 66.20%,52.90% 70.70%,50.60% 78.20%);
}