@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Nanum+Gothic+Coding&display=swap');

article {
  position: relative;
}

section {
  border: 0.5vmin solid;
  border-radius: 0.5vmin;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 65vmin;
  height: 75vmin;
  background: linear-gradient(#c9c8, #c9c0);
}

.bubble {
  font-family: 'Comic Neue', 'Comic Sans', serif;
  white-space: pre;
  top: -10%;
  left: 50%;
  font-size: 4.5vmin;
  text-align: center;
}

.bubble::before {
  content: "";
  height: 40%;
  width: 50%;
  border: 0;
  border-right: 1vmin solid;
  border-bottom: 0.5vmin solid #0000;
  border-radius: 0 0 100% 0;
  top: 100%;
  left: 0;
  transform: translateX(-50%);
}

.person {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cartoon {
  --skin: #fca;
  --skin-shadow: #f0b090;
  --skin-light: #fdc;
  --shirt: #eee;
  --hair: #631;
  --hair-light: #963;
  --hair-dark: #520;
  --pants: #69b;
  --table: indianred;
  width: 80vmin;
  aspect-ratio: 1;
  position: relative;
  aoverflow: hidden;
  position: absolute;
  bottom: -38%;
  right: 0%;
}

.cartoon div,
.cartoon div::before,
.cartoon div::after {
  position: absolute;
  box-sizing: border-box;
}

.face {
  width: 20%;
  height: 25%;
  background: #f004;
  border-radius: 100% / 110% 140% 60% 80%;
  border: 0.5vmin solid;
  border-bottom: 0.8vmin solid;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
  box-shadow:
    inset 0.75vmin 1vmin var(--skin-shadow),
    inset -0.5vmin -0.5vmin var(--skin-light)
    ;
  background: 
    var(--skin);
}

.face::before {
  content: "";
  width: 100%;
  height: 50%;
  background: var(--skin);
  border: 0.5vmin solid;
  border-top: 0.76vmin solid;
  transform: rotate(30deg);
  border-bottom: 0;
  border-radius: 50% / 100% 100% 0 0;
  left: 19.5%;
  top: -10%;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  box-shadow:
    inset 1.1vmin 1vmin var(--skin-shadow),
    inset -0.5vmin 0vmin var(--skin-light)
    ;
}

.ear {
  width: 8.5%;
  aspect-ratio: 1;
  border: 0.5vmin solid;
  border-left: 0.75vmin solid;
  border-radius: 50%;
  border-right: 0.25vmin solid #0000;
  transform: scaleX(-1) rotate(10deg);
  background: var(--skin);
  left: 53%;
  top: 17%;
}

.face .ear {
  width: 40%;
  height: 40%;
  border: 0.5vmin solid;
  border-left: 0.75vmin solid;
  border-radius: 50%;
  border-right: 0.25vmin solid #0000;
  transform: rotate(10deg);
  top: 15%;
  left: -22%;
  background: var(--skin)
}

.ear::before {
  content: "";
  width: 80%;
  height: 70%;
  border: 0.5vmin solid;
  border-radius: 50%;
  border-top: 0.4vmin solid;
  border-left: 0.25vmin solid #0000;
  border-bottom: 0.7vmin solid #0000;
  top: 20%;
  box-shadow: inset -0.5vmin 0.5vmin var(--skin-shadow);
}

.ear::after {
  content: "";
  width: 40%;
  aspect-ratio: 1;
  border:0.5vmin solid;
  border-radius: 50%;
  border-bottom: 0.35vmin solid;
  border-right-color: #0000;
  background: var(--skin);
  top: 60%;
  left: 30%;
  transform: rotate(50deg);
  box-shadow: -0.5vmin -0.25vmin  var(--skin-shadow)
}

.hair {
  width: 25%;
  aspect-ratio: 1;
  background: var(--hair);
  border-radius: 50%;
  box-shadow: 
    /* color */
    2vmin -4vmin 0 1vmin var(--hair),
    2.2vmin -1.25vmin 0 -0.75vmin var(--hair),
    0vmin 1.75vmin 0 -0.75vmin var(--hair),
    7vmin -4.75vmin 0 0.75vmin var(--hair),
    4.75vmin -3vmin 0 -1vmin var(--hair),
    11vmin -4vmin 0 0.5vmin var(--hair),
    13.75vmin -2.25vmin 0 0.125vmin var(--hair),
    14vmin -2vmin 0 0.25vmin var(--hair-light),
    
    -1.125vmin -3.3vmin 0 0.3vmin var(--hair),
    -1.5vmin 0 0 -0.25vmin var(--hair),
    0vmin -5.5vmin 0 -0.5vmin var(--hair),
    3vmin -6vmin 0 0.5vmin var(--hair),
    7vmin -7vmin 0 0.75vmin var(--hair),
    11vmin -6.5vmin 0 0.25vmin var(--hair),
    13.5vmin -5vmin 0 -0.75vmin var(--hair),
    
    -1.5vmin -3vmin 0 0.5vmin var(--hair-dark),
    -2vmin 0 var(--hair-dark),
    
    /* lines */
    0.125vmin 0.25vmin 0 0.2vmin,
    2.25vmin -3.75vmin 0 1vmin,
    2.5vmin -1vmin 0 -0.75vmin,
    0.5vmin 1.75vmin 0 -0.75vmin,
    7vmin -4.5vmin 0 0.9vmin,
    5vmin -2.6vmin 0 -1vmin,
    10.75vmin -3.75vmin 0 0.5vmin,
    14.125vmin -2vmin 0 0.66vmin,
    
    -1.5vmin -3.1vmin 0 1vmin,
    -1.5vmin 0 0 0.8vmin,
    0vmin -5.5vmin 0 0.12vmin,
    3vmin -6vmin 0 1vmin,
    7vmin -7vmin 0 1.2vmin,
    11vmin -6.5vmin 0 0.75vmin,
    13.5vmin -5vmin 0 -0.35vmin,
    /* shadows */
    7vmin -4vmin 0 0.9vmin var(--skin-shadow),
    10.75vmin -3.5vmin 0 0.75vmin var(--skin-shadow)
    ;
}

.hair-back {
  width: 5%;
  aspect-ratio: 1;
  border: 0.5vmin solid;
  background: var(--hair);
  border-radius: 50%;
  left: 40%;
  top: 28%; 
  box-shadow: 
    10.75vmin -10.2vmin var(--hair),
    10vmin -13vmin 0 0.25vmin var(--hair),
    9.25vmin -15vmin var(--hair),
    11vmin -10.25vmin var(--hair-light),
    
    10.25vmin -13vmin 0 0.5vmin,
    9.25vmin -15vmin 0 0.4vmin,
    11.05vmin -10.25vmin 0 0.4vmin
}

.mouth {
  width: 55%;
  height: 30%;
  border: 0.25vmin solid #0000;
  border-left: 0.5vmin solid #0000;
  border-bottom: 0.5vmin solid;
  border-radius: 50%;
  top: 50%;
  left: 30%;
  transform: rotate(15deg);
}

.mouth::before {
  content: "";
  aspect-ratio: 1;
  width: 20%;
  border: 0.4vmin solid;
  border-radius: 50%;
  border-right-color: #0000;
  border-bottom-color: #0000;
  top: 77%;
  left: 5%;
}

.chin {
  width: 15%;
  height: 10%;
  top: 85%;
  left: 55%;
  border-top: 0.25vmin solid #0000;
  border-right: 0.4vmin solid;
  border-radius: 50%;
  box-shadow: 0.5vmin 0 0 -0.25vmin var(--skin-shadow)
}

.eye {
  width: 28%;
  height: 27%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 50% 60%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 70%, #000 20%, #0000 21%),
    white;
  border: 0.45vmin solid;
  transform: rotate(20deg);
  left: 70%;
  top: 30%;
  box-shadow: 
    inset 0.25vmin -0.25vmin #0001
/*     ,
    -0.125vmin 0.125vmin 0 0.125vmin var(--skin-shadow); */
}

/* .eye {
  background: 
    linear-gradient(160deg, var(--skin) 20%, #000 0 26%, #0000 27%),
    radial-gradient(circle at 50% 45%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 55%, #000 20%, #0000 21%),
    white;
}

.eye ~ .eye {
  background: 
    linear-gradient(-170deg, var(--skin) 20%, #000 0 26%, #0000 27%),
    radial-gradient(circle at 50% 45%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 55%, #000 20%, #0000 21%),
    white;
} */

.eye::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 100%;
  border: 0.5vmin solid #0000;
  border-top: 1vmin solid;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.eye ~ .eye {
  width: 30%;
  height: 28%;
  left: 38%;
  transform: rotate(15deg);
  top: 25%;
}

.eye ~ .eye::before {
  transform: translate(-60%, -50%) rotate(-10deg)
}

.nose {
  width: 22%;
  aspect-ratio: 1;
  border: 0.25vmin solid #0000;
  border-top: 0.5vmin solid;
  border-right: 0.75vmin solid;
  border-radius: 50%;
  top: 50%;
  left: 60%;
  background: var(--skin);
  box-shadow: 
    inset -0.125vmin 0.25vmin var(--skin-light),
    inset -0.5vmin 0vmin var(--skin-shadow)
}

.cheek {
  width: 80%;
  height: 15%;
  background: #f002;
  border-radius: 50%;
  transform: rotate(10deg);
  top: 40%;
  left: 15%;
  filter: blur(1vmin);
}

.neck {
  width: 5%;
  height: 20%;
  border: 0.5vmin solid;
  border-radius: 100% / 20% 20%;
  background: 
    radial-gradient(circle at 140% 50%, var(--skin-shadow) 60%, #0000 0),
    var(--skin);
  top: 20%;
  left: 47%;
  transform: translateX(-50%);
}

.neck {
  width: 8%;
  top: 19%;
  border-radius: 0;
  border-bottom-color: #0000;
  background: 
    radial-gradient(circle at 100% 58%, var(--skin-shadow) 60%, #0000 0),
    var(--skin);
}

.body {
  width: 25%;
  height: 34%;
  border: 0.5vmin solid;
  border-top: 0.75vmin solid;
  border-right-width: 0.75vmin;
  border-radius: 100% / 60% 70% 120% 40%;
  top: 37%;
  left: 46.5%;
  transform: translateX(-50%);
  background: 
    radial-gradient(150% 80% at 70% 100%, #0000 60%, #0008 62% 65%, #0000 67%) 65% 64% / 50% 15% no-repeat,
    radial-gradient(150% 80% at 60% 100%, #0000 60%, #0008 62% 65%, #0000 67%) 76% 65.5% / 40% 15% no-repeat,
    radial-gradient(90% 50% at 52% 0, var(--skin) 20%, #000 21% 23%, #0000 24% 28%, #000 29% 31%, var(--shirt) 32%),
    repeating-conic-gradient(at 52% -0%, #0000 0 2%, #000 0 3%),
    var(--shirt);
  box-shadow: 
    inset -1vmin -0.75vmin white,
    inset 1vmin 0 #0001
}

.body::before {
  content: "";
  width: 104%;
  height: 100%;
  border: 0.5vmin solid;
  border-right: 0.7vmin solid;
  border-radius: 100% / 120% 160% 20% 24%;
  top: 10%;
  left: -0.5vmin;
  background: var(--shirt);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  box-shadow: 
    inset -1vmin 0 white,
    inset 1vmin 0 #0001
}

.body::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100% / 60% 50% 120% 40%;
  top: 0vmin;
  right: -0.6vmin;
/*   box-shadow: inset -1.5vmin 1.25vmin 0 -1.25vmin white; */
  background: 
    linear-gradient(var(--shirt) 20%, #0000 0),
    linear-gradient(47deg, #0000 86%, var(--shirt) 86.25%);
  clip-path: polygon(76% 5.5%, 100% 5.5%, 100% 30%, 75% 30%);
}

.arm-1 {
  width:15%;
  height: 20%;
  border: 0.5vmin solid;
  border-radius: 100% / 80% 150% 20% 40%;
  background: var(--shirt);
  box-shadow: inset -0.5vmin -0.2vmin white;
  border-right-width: 0.75vmin;
  top: 43%;
  left: 44%;
  transform-origin: top left;
  transform: rotate(-30deg);
}

.arm-2 {
  width: 13%;
  height: 18%;
  border: 0.5vmin solid;
  border-radius: 100% / 170% 130% 20% 20%;
  background: var(--shirt);
  border-right-width: 0.75vmin;
  border-left-width: 0.75vmin;
  top: 44.5%;
  left: 32.5%;
  transform-origin: top right;
  transform: rotate(40deg);
  clip-path: polygon(0 0, 30% 0, 80% 40%, 100% 40%, 100% 100%, 0 100%);
  box-shadow: 
    inset -0.5vmin 0 0 -0.125vmin #fff6,
    inset 1.125vmin 0 #0001,
    0.25vmin 0 #0003
    ;
}

.sleeve-2 {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  border: 0.5vmin solid;
  top: 40%;
  left: 31%;
  box-shadow: 
    0 0 0 0.5vmin var(--skin-light),
    0 -1vmin 0 4.5vmin var(--skin),
    0 -1.5vmin 0 5.25vmin var(--skin-shadow),
    0 -1.75vmin 0 6vmin;
  clip-path: polygon(-100% 00%, 50% 30%, 50% 60%, -100% 120%);
}

.sleeve {
  width: 80%;
  bottom: 5%;
  left: 10%;
  height: 10%;
  border: 0.5vmin solid;
  border-bottom: 0.125vmin solid #0000;
  border-radius: 50%;
  background: #0002;
}

.sleeve::before {
  content: "";
  width: 100%;
  height: 1500%;
  background: var(--skin);
  border: 0.5vmin solid;
  border-right: 0.75vmin solid;
  border-top: 0;
  border-radius: 0% 30% 90% 80% / 100%;
  box-shadow: 
    inset -0.5vmin 0 0 -0.125vmin #fff6,
    inset 0.75vmin 0 #0001
    ;
}

.sleeve::after {
  content: "";
  width: 90%;
  height: 1500%;
  background: var(--skin);
  border: 0.5vmin solid;
  border-left: 0.5vmin solid;
  border-radius: 100% / 120% 120% 80% 80%;
  transform-origin: 50% 100%;
  transform: rotate(90deg) translate(-34%, 18%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
  box-shadow: 
    inset 0.5vmin 0 0 -0.125vmin #fff6,
    inset -0.75vmin 0 #0001
    ;
}

.table {
  width: 57%;
  height: 5%;
  border: 0.5vmin solid;
  background: var(--table);
  border-right: 0;
  border-radius: 0.5vmin 0 0 0.5vmin;
  top: 63%;
  right: 0;
}

.laptop {
  width: 41%;
  height: 3%;
  border: 0.5vmin solid;
  border-radius: 0.5vmin;
  background: silver;
  top: 60%;
  left: 60%;
  background: 
    linear-gradient(#0003 0 0) 30% 50% / 8% 40% no-repeat,
    linear-gradient(#0003 0 0) 23% 50% / 4% 40% no-repeat,
    linear-gradient(#0003 0 0) 17% 50% / 4% 40% no-repeat,
    linear-gradient(90deg, silver 40%, #ddd 0)
}

.laptop::before {
  content: "";
  width: 70%;
  height: 1400%;
  border: 0.5vmin solid;
  top: 0vmin;
  left: 40%;
  transform: translate(0, -100%) skew(-5deg);
  border-radius: 1vmin 1vmin 0.5vmin 0.5vmin;
  background:
    radial-gradient(circle at 55% 50%, #fff5 12%, #0000 13%),
    silver;
}

.chair {
  width: 40%;
  height: 60%;
  border: 0.5vmin solid;
  border-radius: 100% / 30% 30% 120% 120%;
  border-left: 0.75vmin solid;
  background:
    repeating-linear-gradient(#0000 0 1.5%, #0006 0 2%),
    repeating-linear-gradient(90deg, #0000 0 1.5%, #0006 0 2%),
    repeating-linear-gradient(45deg, #0000 0 1.5%, #0006 0 2%),
    repeating-linear-gradient(-45deg, #0000 0 1.5%, #0006 0 2%),
    #eee8
    ;
  box-shadow:
    inset 0.75vmin 0.5vmin #0001,
    inset 0 0 0 3.5vmin #ccc,
    inset 0.1vmin 0.1vmin 0 4.1vmin #000
    ;
  top: 33.33%;
  left: 12%;
  transform: skew(6deg);
  backdrop-filter: blur(3px)
}

section:nth-child(1) .bubble::before{
  left: 60%;
  transform: scaleX(-1);
  width: 200%;
  height: 70%;
}



section:nth-child(1) .bubble {
  top: -25%;
  white-space: pre-wrap;
}

/* panel 2*/
section:nth-child(2) .mouth {
  width: 35%;
  height: 3%;
  border: 0.25vmin solid #0000;
  border-left: 0.5vmin solid #0000;
  border-bottom: 0.5vmin solid;
  border-radius: 50%;
  top: 72%;
  left: 40%;
  transform: rotate(17deg);
}

section:nth-child(2) .mouth::before {
  content: "";
  aspect-ratio: 1.3;
  width: 30%;
  border: 0.35vmin solid;
  border-radius: 50%;
  border-right: 0.1vmin solid #0000;
  border-bottom: 0.1vmin solid #0000;
  left: -10%;
  transform: rotate(-30deg) translate(0, -40%);
}

section:nth-child(2) .eye::after,
section:nth-child(3) .eye::after{
  content: "";
  position: absolute;
  width: 140%;
  height: 50%;
  border: 0.5vmin solid #0000;
  border-bottom: 1vmin solid;
  border-radius: 50%;
  left: -60%;
  transform: translate(-75%, -70%)
}

section:nth-child(2) .eye ~ .eye,
section:nth-child(3) .eye ~ .eye{
  clip-path: none;
  clip-path: polygon(0 0%, 100% 20%, 100% 100%, 0 100%);
  background: 
    linear-gradient(15deg, #0000 80%, #000 0),
    radial-gradient(circle at 50% 60%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 70%, #000 20%, #0000 21%),
    white;
}

section:nth-child(2) .arm-2 {
  transform: rotate(20deg);
  top: 43%;
    left: 32%;
}

section:nth-child(2) .sleeve-2 {
  transform: rotate(3deg);
  top: 43%;
    left: 34%;
}

section:nth-child(2) .face::before {
  box-shadow: inset -4vmin 3vmin 4vmin 1vmin #0f02
}

.hand-2 {
  width: 12%;
  height: 10%;
  border: 0.5vmin solid;
  border-top: 0.75vmin solid;
  background: var(--skin);
  border-radius: 50%;
  transform: rotate(-7deg);
  top: 60%;
  left: 40%;
}

section:nth-child(2) .person {
  --skin: #ffd4aa;
  transform: scale(1.1) translate(2%, -2%);
}

section:nth-child(2) .bubble {
  top: -4;
  left: 60%;
}


/* panel 3 */
section:nth-child(3) .cartoon {
  --skin: #cd7;
  --skin-shadow: #bc6;
  --skin-light: #de8;  
}


section:nth-child(3) .face::before {
  box-shadow: inset -4vmin 3vmin 4vmin 1vmin #8c66
}

section:nth-child(3) .person {
    transform: scale(1.25) translate(2%, -2%);
}


section:nth-child(3) .mouth {
  transform: scaleY(-1) rotate(-10deg);
  top: 70%;
  height: 25%;
}

section:nth-child(3) .bubble {
  top: -10%;
  left: 65%;
  font-weight: bold;
}

/* panel 4 */
section:nth-child(4) .cartoon {
  --skin: #8c6;
  --skin-shadow: #7b5;
  --skin-light: #9d7;
}

section:nth-child(4) .person {
    transform: scale(1.3) translate(5%, -5%);
  bottom: 5%;
  top: auto;
}

section:nth-child(4) .face::before {
  box-shadow: inset -4vmin 3vmin 4vmin 1vmin #0803
}

section:nth-child(4) .bubble {
  top: -20%;
  left: 73%;
  font-size: 7vmin;
  font-weight: bold;
  line-height: 0.8;
  font-family: 'Comic Neue', 'Comic Sans', serif;
  white-space: pre;
}

section:nth-child(4) .bubble::first-line {
  font-size: 5vmin;
}


section:nth-child(4) .eye::after {
  content: "";
  position: absolute;
  width: 140%;
  height: 50%;
  border: 0.5vmin solid #0000;
  border-bottom: 1vmin solid;
  border-radius: 50%;
  left: -60%;
  transform: translate(-75%, -70%);

}

section:nth-child(4) .eye {
  clip-path: none;
  clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 100%);
  background: 
    linear-gradient(-15deg, #0000 80%, #000 0),
    radial-gradient(circle at 50% 60%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 70%, #000 20%, #0000 21%),
    white;
}

section:nth-child(4) .eye ~ .eye {
  clip-path: polygon(0 0%, 100% 20%, 100% 100%, 0 100%);
  background: 
    linear-gradient(15deg, #0000 80%, #000 0),
    radial-gradient(circle at 50% 60%, #fff 9%, #0000 10%),
    radial-gradient(circle at 60% 70%, #000 20%, #0000 21%),
    white;
}

section:nth-child(4) .mouth {
  height: 18%;
  width: 41%;
  border: 0.5vmin solid;
  border-radius: 60% 120% 120% 60% / 100% 40% 60% 100%;
  top: 66%;
  left: 35%;
  background:
    linear-gradient(90deg, #0000 30%, #000 0 35%, #0000 0) 50% 50% / 100% 70% no-repeat,
    linear-gradient(90deg, #0000 55%, #000 0 60%, #0000 0) 50% 50% / 100% 80% no-repeat,
    linear-gradient(90deg, #0000 80%, #000 0 85%, #0000 0) 50% 50% / 100% 60% no-repeat,
    linear-gradient(#fff 44%, #000 0 56%, #fff 0)
    ;
}

section:nth-child(4) .mouth::before {
  content: none;
}


section:nth-child(4) .eyebrow {
  width: 70%;
  height: 30%;
  left: 39%;
  transform: rotate(12deg);
  background:
    linear-gradient(18deg, #0000 45%, #000 46% 60%, #0000 61%) 15% 220% / 40% 80% no-repeat,
    linear-gradient(-12deg, #0000 45%, #000 0 60%, #0000 0) 92% 230% / 37% 80% no-repeat;
}

/* Panel 5 */
section:nth-child(5) .bubble {
    top: -25%;
}

section:nth-child(5) .bubble::before {
  left: 80%;
  transform: scaleX(-1);
  width: 200%;
  height: 70%;
}

section:nth-child(5) .bubble + .bubble {
    top: 18%;
    right: 5%;
 
  left: auto;
}

section:nth-child(5) .bubble + .bubble::before {
  width: 400%;
  height: 200%;
}