$seat-base: rgb(189, 165, 105);
$seat-left: rgb(193, 61, 32);
$seat-middle: rgb(210, 96, 28);
$seat-right: rgb(200, 66, 34);
$under-seat: rgb(28, 21, 13);
$floor: rgb(94, 92, 79);
$floor-shadow: rgb(15,9, 6);
$door-base: rgb(106, 97, 71);
$door: rgb(58, 51, 37);
$door-jam: rgb(15, 15, 13);
$frame-big: rgb(157, 147, 116);
$frame-big-hl-dk: rgb(124, 113, 87);
$frame-big-hl-lt: rgb(158, 147, 116);
$bar: rgb(107, 95, 71);
$bar-lt: rgb(255, 245, 176);
$bar-dk: rgb(65, 59, 41);
$bar-shadow-lt: rgb(140, 116, 86);
$bar-shadow-dk: rgb(51, 37, 16);
$bar-wrap: rgb(106, 99, 75);

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Nanum Gothic Coding', monospace;
  font-size: 11px;
}

.paper {
  height: 50vmin;
  width: 70vmin;
  background: #cc0000;
  position: relative;
  z-index: -1000;
}

.floor {
  position: absolute;
  height: 4vmin;
  width: 70vmin;
  background: linear-gradient(to right, #222, #222, $floor);
  right: 0vmin;
  bottom: 0vmin;
  z-index: -2;
}

.door-base {
  position: absolute;
  height: 3vmin;
  width: 30vmin;
  background: $door-base;
  border-bottom: .25vmin solid grey;
  bottom: 4vmin;
  right: 0;
  z-index: -10;
}

.seat-container1 {
  position: absolute;
  width: 46vmin;
  background: transparent;
  top: 25vmin;
  border-right: 1vmin solid transparent;
  border-bottom: 13vmin solid $seat-base;
  border-radius: 0 3vmin 1vmin 0;
}

.seat-container-edge {
  position: absolute;
  width: 43.5vmin;
  height: .25vmin;
  background: #222;
  top: 24.75vmin;
  z-index: 11;
  opacity: .85;
}

.seat-container2 {
  position: absolute;
  width: 48.75vmin;
  background: transparent;
  top: 36vmin;
  border-right: 3vmin solid transparent;
  border-bottom: 3vmin solid $seat-base;
}

.seat-container3 {
  position: absolute;
  width: 48.75vmin;
  background: transparent;
  top: 38.5vmin;
  border-bottom: 3vmin solid $seat-base;
  border-radius: 0 1vmin 1vmin 0;
}

.under-seat {
  position: absolute;
  width: 45vmin;
  height: 5.5vmin;
  background: $under-seat;
  bottom: 3vmin;
  z-index: -1;
}

.frame-right {
  position: absolute;
  width: 2vmin;
  height: 23vmin;
  background: linear-gradient(to right, $frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  // border-left: 2vmin solid $frame-big;
  // border-right: 2vmin solid $frame-big;
  // border-bottom: 2vmin solid $frame-big;
  left: 10vmin;
}

.frame-bottom {
  position: absolute;
  width: 32vmin;
  height: 2vmin;
  background: linear-gradient(to right, $frame-big-hl-dk, $frame-big-hl-lt, $frame-big-hl-dk);
  left: 10vmin;
  top: 21vmin;
  z-index: 2;
}

.frame-left {
  position: absolute;
  width: 2vmin;
  height: 23vmin;
  background: linear-gradient(to right, $frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  left: 41vmin;
}

.frame-hl {
  position: absolute;
  width: 29vmin;
  height: .2vmin;
  background: $bar-lt;
  left: 12vmin;
  top: 21vmin;
  z-index: 2;
}

.bar1 {
  position: absolute;
  width: 1.75vmin;
  height: 45vmin;
  background: linear-gradient($bar-lt, $bar-dk);
  border-left: .5vmin solid $bar-shadow-lt;
  border-right: .3vmin solid $bar-shadow-dk;
  right: 19.75vmin;
  border-radius: 0 0 1vmin 1vmin;
  z-index: 1;
}

.bar2 {
  position: absolute;
  width: 1.75vmin;
  height: 7vmin;
  background: $bar;
  border-left: .75vmin solid $bar-shadow-dk;
  border-right: .75vmin solid $bar-lt;
  right: 21.75vmin;
  top: 38.75vmin;
  transform: rotate(-45deg);
  border-radius: 0 0 1vmin 1vmin;
  z-index: 0;
}

.bar3 {
  position: absolute;
  width: 1.2vmin;
  height: 14vmin;
  background: $bar-lt;
  border-left: .5vmin solid $bar-shadow-dk;
  right: 22vmin;
  top: 22.75vmin;
  transform: rotate(-20deg);
  border-radius: 1vmin 1vmin;
  z-index: .5;
}

.bar-wrap {
  position: absolute;
  width: 2.25vmin;
  height: 3vmin;
  background: linear-gradient(to right, $bar-lt, $bar-wrap, $bar-wrap);
  border-bottom: .25vmin solid $bar-shadow-dk;
  right: 19.5vmin;
  top: 32.2vmin;
  border-radius: .25vmin;
  z-index: 1;
}

.frame-single {
  position: absolute;
  width: 2vmin;
  height: 25vmin;
  background: linear-gradient($frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  left: 2vmin;
  z-index: 10;
}

.ad-frame-right {
  position: absolute;
  width: 1vmin;
  height: 16vmin;
  background: linear-gradient(to right, $frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  border-left: .25vmin solid $bar-dk;
  left: 33vmin;
  z-index: 3;
}

.ad-frame-bottom {
  position: absolute;
  width: 16vmin;
  height: 1vmin;
  background: linear-gradient(to right, $frame-big-hl-dk, $frame-big-hl-lt, $frame-big-hl-dk);
  box-shadow: 0vmin 0vmin 12vmin 1vmin rgba(0,0,0,0.75);
  left: 18vmin;
  top: 16vmin;
  z-index: 1;
}

.ad-highlight {
  position: absolute;
  width: 14vmin;
  height: .2vmin;
  background: #fff;
  top: 16vmin;
  left: 19vmin;
  z-index: 1;
  opacity: .5;
}

.ad-frame-left {
  position: absolute;
  width: 1vmin;
  height: 16vmin;
  background: linear-gradient(to right, $frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  border-right: .25vmin solid $bar-dk;
  left: 18vmin;
  z-index: 1;
}

.ad {
  position: absolute;
  width: 15.75vmin;
  height: 16.5vmin;
  background: rgb(150, 131, 98);
  left: 18vmin;
}

.add-reflect1 {
  position: absolute;
  width: 6vmin;
  height: 3vmin;
  left: 1.25vmin;
  top: 1vmin;
  border-radius: 50%;
  background: transparent;
  border-bottom: .5vmin solid #fff;
  transform: skew(55deg);
  opacity: .25;
}

.add-reflect2 {
  position: absolute;
  width: 8vmin;
  height: 3vmin;
  right: .25vmin;
  top: 1.5vmin;
  border-radius: 50%;
  background: transparent;
  border-top: .5vmin solid #fff;
  transform: skew(20deg);
  opacity: .4;
}

.back-wall {
  position: absolute;
  width: 45vmin;
  height: 26vmin;
  background: #999;
  z-index: -2;
}

.back-wall-top {
  position: absolute;
  width: 45vmin;
  height: 10vmin;
  background: linear-gradient($bar-dk, #fff, #fff, rgb(244, 240, 92));
  z-index: 0;
}

.back-wall-bottom {
  position: absolute;
  width: 45vmin;
  height: 17vmin;
  background: #222;
  top: 10vmin;
  z-index: 0;
}

.back-wall-bottom:after {
  content: ' ';
  position: absolute;
  width: 40vmin;
  height: 15vmin;
  background: #222;
  border-radius: 40%;
  background: transparent;
  border-top: 5vmin dashed #222;
  top: -3vmin;
  z-index: 0;
}

.back-wall-hl {
  position: absolute;
  width: 40vmin;
  height: 15vmin;
  background: #222;
  border-radius: 20%;
  background: transparent;
  border-top: 4vmin dashed #fff;
  top: 6vmin;
  z-index: 1;
  opacity: .25
}

.back-wall-bottom:before {
  content: ' ';
  position: absolute;
  width: 45vmin;
  height: 15vmin;
  background: #222;
  border-radius: 10%;
  background: transparent;
  border-top: 2vmin solid #777;
  top: -2vmin;
  z-index: -10;
}

.back-wall-container {
  display: flex;
  opacity: .95;
}

.stripe {
  width: .75vmin;
  height: 30vmin;
  background: linear-gradient($bar-lt, $bar-dk, $bar-lt, #222);
  opacity: .2;
}

.back-wall-container .stripe:nth-child(odd) {
  background: linear-gradient($bar-dk, $bar-lt, $bar-dk, #222);
  opacity: .7;
}

.door {
  position: absolute;
  width: 23.5vmin;
  height: 43vmin;
  background: linear-gradient(rgb(239, 184, 132), #594e39, $door);
  border-bottom: .24vmin solid #222;
  right: 0;
  z-index: -2;
}

.door-panel-left {
  position: absolute;
  width: 2vmin;
  height: 44vmin;
  background: linear-gradient($frame-big-hl-lt, $frame-big-hl-dk, $frame-big-hl-lt);
  right: 23.5vmin;
  z-index: -2;
}

.door-window-left {
  position: absolute;
  width: 14.5vmin;
  height: 20.5vmin;
  background: linear-gradient(rgb(139, 121, 95),rgb(139, 121, 95), rgb(255, 255, 235));
  right: 7vmin;
  border-radius: 0 0 3.75vmin 4.75vmin;
  border-bottom: .25vmin solid #222;
}

.door-window-left2 {
  position: absolute;
  width: 12vmin;
  height: 20vmin;
  background: rgb(49, 40, 5);
  border: .25vmin solid rgba(33, 4, 0, .5);
  border-radius: 0 0 2.25vmin 2.25vmin;
  right: .75vmin;
}

.door-window-left2:after {
  content: ' ';
  position: absolute;
  width: 11vmin;
  height: 19.75vmin;
  background: linear-gradient(rgb(255, 255, 235), rgb(139, 121, 95), rgb(255, 255, 235), $bar);
  border-radius: 0 0 2vmin 2vmin;
  top: -.5vmin;
}

.door-window-glass {
  position: absolute;
  width: 10vmin;
  height: 19vmin;
  background: linear-gradient(to top, rgb(60, 65, 108), rgb(19, 15, 23));
  border-radius: 0 0 2vmin 2vmin;
  right: 8.9vmin;
}

.door-divider {
  position: absolute;
  width: 2vmin;
  height: 43vmin;
  background: rgb(46, 38, 37);
  right: 3.5vmin;
}

.door-window-right {
  position: absolute;
  width: 1.5vmin;
  height: 20vmin;
  background: linear-gradient(rgb(139, 121, 95),rgb(139, 121, 95), rgb(255, 255, 235), #666);
  border-left: .5vmin solid rgba(33, 4, 0, .5);
  border-radius: 0 0 0 2.25vmin;
  right: .0vmin;
}

.door-sign {
  position: absolute;
  width: 10vmin;
  height: 1.25vmin;
  background: #000;
  right: 8.75vmin;
  top: 22vmin;
}

.door-sign:after {
  content: ' ';
  position: absolute;
  width: 9vmin;
  height: .15vmin;
  background: #fff;
  left: .5vmin;
  top: .2vmin;
  opacity: .5;
}

.seat1-bottom {
  position: absolute;
  width: 10.25vmin;
  height: 2.5vmin;
  background: $seat-left;
  bottom: 11vmin;
  left: 2.15vmin;
  transform: skew(-55deg);
}

.seat1-bottom:after {
  content: ' ';
  position: absolute;
  height: 2.5vmin;
  width: 4vmin;
  background: $seat-left;
  left: -2vmin;
  transform: skew(55deg);
}

.seat1-top {
  position: absolute;
  width: 14.2vmin;
  height: 11vmin;
  background: $seat-left;
  bottom: 13.5vmin;
  border-radius: 0 1vmin 0 0;
}

.seat2-bottom {
  position: absolute;
  width: 8vmin;
  height: 2.5vmin;
  background: $seat-middle;
  bottom: 11vmin;
  left: 18.25vmin;
  transform: skew(-50deg);
}

.seat2-bottom:after {
  content: ' ';
  position: absolute;
  height: 2.5vmin;
  width: 5vmin;
  background: $seat-middle;
  left: -5vmin;
  transform: skew(0deg);
}

.seat2-bottom:before {
  content: ' ';
  position: absolute;
  height: 2.5vmin;
  width: 5.2vmin;
  background: $seat-middle;
  left: 6vmin;
  transform: skew(50deg);
}

.seat2-top {
  position: absolute;
  width: 14.5vmin;
  height: 11vmin;
  background: $seat-middle;
  bottom: 13.5vmin;
  left: 15vmin;
  border-radius: 1vmin 1vmin 0 0;
}

// seat right

.seat3-bottom {
  position: absolute;
  width: 10vmin;
  height: 2.5vmin;
  background: $seat-right;
  bottom: 11vmin;
  left: 35.25vmin;
  transform: skew(0deg);
}

.seat3-bottom:after {
  content: ' ';
  position: absolute;
  height: 2.5vmin;
  width: 6vmin;
  background: $seat-right;
  left: -5vmin;
  transform: skew(0deg);
}

.seat3-bottom:before {
  content: ' ';
  position: absolute;
  height: 2.5vmin;
  width: 6vmin;
  background: $seat-right;
  left: 5.45vmin;
  transform: skew(50deg);
}

.seat3-top {
  position: absolute;
  width: 13vmin;
  height: 11vmin;
  background: $seat-right;
  bottom: 13.5vmin;
  left: 30.25vmin;
  border-radius: 1vmin 0 0 0;
}

.seat3-top:after {
  content: ' ';
  position: absolute;
  width: 3vmin;
  height: 12vmin;
  background: $seat-right;
  left: 11.5vmin;
  transform: skew(5deg);
  border-radius: 0 1vmin 0 0;
}

// seat highlights

.seat-hl-left {
  position: absolute;
  width: 13vmin;
  height: 3vmin;
  border-bottom: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  bottom: 12.5vmin;
  opacity: .6;
}

.seat-hl-middle {
  position: absolute;
  width: 13.5vmin;
  height: 3vmin;
  border-bottom: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  left: 15.25vmin;
  bottom: 12.5vmin;
  opacity: .6;
  transform: skew(-25deg);
}

.seat-hl-right {
  position: absolute;
  width: 13.5vmin;
  height: 3vmin;
  border-bottom: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  bottom: 12.5vmin;
  left: 31vmin;
  opacity: .6;
}

.seat-hl2-left {
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 28vmin;
  transform: rotate(15deg);
  opacity: .25;
}

.seat-hl2-left:after {
  content: ' ';
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 1vmin;
  transform: rotate(-10deg);
  opacity: .25;
}

.seat-hl2-left:before {
  content: ' ';
  position: absolute;
  width: 13vmin;
  height: 5vmin;
  background: #222;
  border-radius: 50%;
  top: 3vmin;
  right: -2vmin;
  transform: rotate(-10deg);
  opacity: .35;
}

.seat-bottom-h {
  position: absolute;
  width: 11vmin;
  height: .75vmin;
  background: linear-gradient(to right, transparent, #fff, #fff, transparent);
  bottom: 11.5vmin;
  left: 15vmin;
  opacity: .5;
}

.seat-bottom-h2 {
  position: absolute;
  width: 11vmin;
  height: .75vmin;
  background: linear-gradient(to right, transparent, #fff, #fff, transparent);
  bottom: 11.5vmin;
  left: 33vmin;
  opacity: .5;
}

.seat-bottom-h3 {
  position: absolute;
  width: 11vmin;
  height: .75vmin;
  background: linear-gradient(to right, transparent, #fff, #fff, transparent);
  bottom: 11.5vmin;
  opacity: .25;
}

// seat hl2 middle 

.seat-hl2-middle {
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 28vmin;
  left: 15.25vmin;
  transform: rotate(12deg);
  opacity: .25;
}

.seat-hl2-middle:after {
  content: ' ';
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 1vmin;
  transform: rotate(-10deg);
  opacity: .25;
}

.seat-hl2-middle:before {
  content: ' ';
  position: absolute;
  width: 13vmin;
  height: 5vmin;
  background: #222;
  border-radius: 50%;
  top: 3vmin;
  right: -2.5vmin;
  transform: rotate(-10deg);
  opacity: .35;
}

// seat hl2 right

.seat-hl2-right {
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 28vmin;
  left: 31vmin;
  transform: rotate(10deg);
  opacity: .25;
}

.seat-hl2-right:after {
  content: ' ';
  position: absolute;
  width: 12vmin;
  height: 3vmin;
  border-top: .5vmin solid #fff;
  background: transparent;
  border-radius: 50%;
  top: 1vmin;
  transform: rotate(-5deg);
  opacity: .25;
}

.seat-hl2-right:before {
  content: ' ';
  position: absolute;
  width: 14vmin;
  height: 5vmin;
  background: #222;
  border-radius: 50%;
  top: 3vmin;
  right: -2.5vmin;
  transform: rotate(-10deg);
  opacity: .35;
}

.seat-hl3 {
  position: absolute;
  width: 46vmin;
  height: .25vmin;
  background: #fff;
  bottom: 13.75vmin;
  opacity: .25;
}

.seat-container-shadow {
  position: absolute;
  width: 48.5vmin;
  height: 2.1vmin;
  background: rgb(101, 82, 48);
  bottom: 8.5vmin;
}

.seat-tri-1 {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: .75vmin solid transparent;
  border-right: .75vmin solid transparent;
  border-top: 10vmin solid $seat-base;
  top: 25.5vmin;
  left: 13.95vmin;
  z-index: 10;
}

.seat-tri-2 {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: .75vmin solid transparent;
  border-right: .75vmin solid transparent;
  border-top: 10vmin solid $seat-base;
  top: 25.5vmin;
  left: 29.17vmin;
  z-index: 10;
}

.bar-slot {
  position: absolute;
  width: 2vmin;
  height: 2vmin; 
  background: rgb(118, 108, 85);
  border-bottom: .25vmin solid #222;
  border-radius: 50%;
  left: 44.1vmin;
  top: 22.5vmin;
  z-index: -1;
}

.ac-vent1 {
  position: absolute;
  width: 10vmin;
  height: 3.5vmin;
  background: #000;
  bottom: 4vmin;
}

.ac-vent2 {
  position: absolute;
  width: 15vmin;
  height: 3.5vmin;
  background: #000;
  bottom: 4vmin;
  left: 11.75vmin;
}

.ac-vent3 {
  position: absolute;
  width: 15vmin;
  height: 3.5vmin;
  background: #000;
  bottom: 4vmin;
  left: 28.5vmin;
}

.door-reflection {
  position: absolute;
  height: 10vmin;
  width: 8vmin;
  background: linear-gradient(to top, transparent, $door);
  border-top: 1vmin solid #000;
  left: 1.25vmin;
  top: 3vmin;
}

.reflect-ad {
  position: absolute;
  height: 3vmin;
  width: 10vmin;
  background: #fff;
  left: 0vmin;
  opacity: .25;
}

.reflect-ad2 {
  position: absolute;
  height: 2vmin;
  width: 10vmin;
  background: #cc0000;
  left: 0;
  bottom: 0;
}

.door-reflection-window {
  position: absolute;
  height: 10vmin;
  width: 5vmin;
  background: linear-gradient(to top, transparent, #000);
  border-radius: 1.5vmin 1.5vmin 0 0;
  left: 1vmin;
  top: 2vmin;
}

.door-reflection-reflection {
  position: absolute;
  height: 10vmin;
  width: 3.5vmin;
  background: linear-gradient(to top, transparent, rgb(60, 65, 108));
  border-radius: 1vmin 1vmin 0 0;
  left: .75vmin;
  top: .5vmin;
}