* {
    box-sizing: border-box;
    transform-style: preserve-3d;
    /* outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); */
}

:root {
    --blur: 1vmin;
    --perspective: 2000;
    --rotate-x: -20;
    --rotate-y: -45;
    --plane-height: 50;
    --plane-width: 50;
    --dark: 0;
    --zoomed: 0;
    --scale: calc(1 + (var(--zoomed) * 2));
    --wall-thickness: 4;
    --cm: calc((var(--plane-height) / 200));
    --transition: 0.2s;
    --floor-shade-one: #8f663d;
    --floor-shade-two: #c29970;
    --floor-shade-three: #e0ccb8;
    --windowsill-shade-one: #bf8a40;
    --windowsill-shade-two: #996f33;
    --windowsill-shade-three: #735326;
    --wall-shade-one: #fafafa;
    --wall-shade-two: #f2f2f2;
    --wall-shade-three: #e6e6e6;
    --wall-shade-four: #d9d9d9;
    --skirting-one: #ededed;
    --skirting-two: #e0e0e0;
    --fade-one: #f7baba;
    --fade-two: #bae3f7;
    --fade-three: #e3baf7;
    --fade-four: #baf7ba;
    --cube: #f2f2f2;
    --leg-one: #1a1a1a;
    --leg-two: #1f1f1f;
    --leg-three: #242424;
    --leg-four: #292929;
    --rug: #a8a8a8;
    --peripheral-one: #333;
    --peripheral-two: #4d4d4d;
    --peripheral-three: #666;
    --peripheral-four: #000;
    --mac-one: #ccc;
    --mac-two: #b3b3b3;
    --blind: #f2e6d9;
    --mac-three: #999;
    --pot-one: #bf6a40;
    --pot-two: #953;
    --pot-three: #734026;
    --chair-one: #000;
    --chair-two: #1a1a1a;
    --chair-three: #333;
    --chair-four: #4d4d4d;
    --chair-accent-one: #000;
    --chair-accent-two: #424242;
    --bg: #150429;
    --bg: #d1e5fa;
    --light: #ccc;
    --icon: #69c;
    /* login */
}

body {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* .dg.ac {
  z-index: 100;
  transform: translate3d(0, 0, 50vmin);
} */

[type="checkbox"] {
    position: absolute;
    left: 100%;
    opacity: 0;
    height: 0;
    width: 0;
}

label {
    position: fixed;
    z-index: 100;
    right: 1rem;
    top: 8rem;
    border-radius: 50%;
    height: 44px;
    width: 44px;
    cursor: pointer;
    transform: translate3d(0, 0, 50vmin)
        translate(0, calc((var(--index) * -100%) + (var(--index) * -10px)));
}

svg {
    height: 28px;
    width: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[for="play"] {
    --index: 0;
}

[for="dark"] {
    --index: 2;
}

[for="cmd"] {
    --index: 1;
}

#play:checked ~ .scene__wrapper {
    --spin: 25;
}

#dark:checked ~ .scene__wrapper .light-cube div,
#dark:checked ~ .scene__wrapper .light-cube:after {
    -webkit-animation: fade 10s calc(2 * var(--transition)) infinite linear;
    animation: fade 10s calc(2 * var(--transition)) infinite linear;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fade {
    0%,
    100% {
        background: var(--fade-one);
    }

    25% {
        background: var(--fade-two);
    }

    50% {
        background: var(--fade-three);
    }

    75% {
        background: var(--fade-four);
    }
}

@keyframes fade {
    0%,
    100% {
        background: var(--fade-one);
    }

    25% {
        background: var(--fade-two);
    }

    50% {
        background: var(--fade-three);
    }

    75% {
        background: var(--fade-four);
    }
}

#dark:checked ~ .scene__wrapper .light-cube:after {
    filter: blur(var(--blur));
}

#dark:checked ~ .scene__wrapper .wall--left div:nth-of-type(3):after {
    opacity: 1;
}

#dark:checked ~ .scene__wrapper .wall--right-right div:nth-of-type(1):after,
#dark:checked ~ .scene__wrapper .shelf div:nth-of-type(5):after {
    -webkit-animation: fade 10s calc(2 * var(--transition)) infinite linear;
    animation: fade 10s calc(2 * var(--transition)) infinite linear;
}

#dark:checked ~ .scene__wrapper .author div:nth-of-type(3):after {
    color: #ccc;
}

#dark:checked ~ .scene__wrapper .author div:nth-of-type(4):after {
    transition: transform var(--transition) var(--transition);
    transform: translate(-8%, -16%);
}

#dark:checked ~ .scene__wrapper .windowsill div:nth-of-type(1),
#dark:checked ~ .scene__wrapper .windowsill div:nth-of-type(5),
#dark:checked ~ .scene__wrapper .floor div:nth-of-type(5) {
    filter: brightness(0.25);
}

#dark:checked ~ .scene__wrapper .plant__plant {
    filter: brightness(0.5);
}

#dark:checked ~ .scene__wrapper .chair__back div:nth-of-type(3):after {
    filter: brightness(0.25);
}

#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(1) {
    filter: brightness(0.1);
}

#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(3) {
    filter: brightness(0.3);
}

#dark:checked ~ .scene__wrapper .desk__top div:nth-of-type(5) {
    filter: brightness(0.2);
}

#dark:checked ~ .scene__wrapper .logo-canvas div {
    filter: brightness(0.35);
}

#dark:checked ~ .scene__wrapper .logo-canvas div:nth-of-type(1) {
    filter: brightness(0.35) grayscale(1);
}

#dark:checked ~ .scene__wrapper .rug div:nth-of-type(5) {
    filter: brightness(0.25);
}

#dark:checked ~ .scene__wrapper {
    --dark: 1;
    --floor-shade-one: #241a0f;
    --floor-shade-two: #47331f;
    --floor-shade-three: #6b4d2e;
    --windowsill-shade-one: #735326;
    --windowsill-shade-two: #4d3719;
    --windowsill-shade-three: #261c0d;
    --wall-shade-one: #616161;
    --wall-shade-two: #595959;
    --wall-shade-three: #4d4d4d;
    --wall-shade-four: #404040;
    --skirting-one: #545454;
    --skirting-two: #474747;
    --fade-one: #f7baba;
    --fade-two: #bae3f7;
    --fade-three: #e3baf7;
    --fade-four: #baf7ba;
    --leg-one: #0d0d0d;
    --leg-two: #0f0f0f;
    --leg-three: #121212;
    --leg-four: #141414;
    --rug: #0f1924;
    --peripheral-one: #1a1a1a;
    --peripheral-two: #262626;
    --peripheral-three: #333;
    --peripheral-four: #404040;
    --mac-one: #333;
    --mac-two: #2e2e2e;
    --mac-three: #262626;
    --pot-one: #734026;
    --pot-two: #4d2b19;
    --blind: #4d3319;
    --pot-three: #26150d;
    --chair-one: #000;
    --chair-two: #0d0d0d;
    --chair-three: #1a1a1a;
    --chair-four: #262626;
    /* --chair-accent-one: #666;
  --chair-accent-two: #7a1f1f; */
    --bg: #05192e;
    --cube: #666;
    --light: #fff;
    --icon: #0f4c8a;
}

:checked + label svg:last-of-type {
    display: block;
}

:checked + label svg:first-of-type {
    display: none;
}

label svg:last-of-type {
    display: none;
}

.scene {
    perspective: calc(var(--perspective, 800) * 1px);
    transform-style: preserve-3d;
    height: 115vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(var(--scale)) translate3d(0, 0, 50vmin);
}

.scene__wrapper {
    transition: background var(--transition);
    background: var(--bg);
}

.plane {
    height: calc(var(--plane-height, 25) * 1vmin);
    width: calc(var(--plane-width, 25) * 1vmin);
    transform-style: preserve-3d;
    transform: rotateX(
            calc(
                (
                        var(--rotate-x, -24) -
                            (var(--zoomed) * var(--rotate-x, -24))
                    ) *
                    1deg
            )
        )
        rotateY(
            calc(
                (
                        (
                                var(--rotate-y, -24) -
                                    (var(--zoomed) * var(--rotate-y, -24))
                            ) +
                            (var(--zoomed) * -90)
                    ) *
                    1deg
            )
        )
        rotateY(-35deg) translate3d(0, 0, 0) rotateX(90deg) translate3d(0, 0, 0);
}

/*.plane:before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    filter: blur(var(--blur));
    height: 130%;
    width: 130%;
    position: absolute;
    transform: translate3d(0, 0, -10vmin);
    z-index: -1;
}*/

.cuboid {
    --width: var(--cuboid-width, 15);
    --height: var(--cuboid-height, 10);
    --depth: var(--cuboid-depth, 4);
    height: calc(var(--depth) * 1vmin);
    width: calc(var(--width) * 1vmin);
    position: absolute;
    transform: rotateZ(calc(var(--starting-rotation, 0) * 1deg))
        translate3d(
            calc(var(--x, 0) * 1vmin),
            calc(var(--y, 0) * 1vmin),
            calc(var(--z, 0) * 1vmin)
        )
        rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg))
        rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg))
        rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg));
    transform-style: preserve-3d;
}

.cuboid__side {
    transform-style: preserve-3d;
}

.cuboid > div:nth-of-type(1) {
    height: calc(var(--height) * 1vmin);
    width: 100%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(-90deg)
        translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
}

.cuboid > div:nth-of-type(2) {
    height: calc(var(--height) * 1vmin);
    width: 100%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg)
        translate3d(0, 0, calc((var(--depth) / 2) * 1vmin));
    position: absolute;
    top: 50%;
    left: 50%;
}

.cuboid > div:nth-of-type(3) {
    height: calc(var(--height) * 1vmin);
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg)
        translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
    position: absolute;
    top: 50%;
    left: 50%;
}

.cuboid > div:nth-of-type(4) {
    height: calc(var(--height) * 1vmin);
    width: calc(var(--depth) * 1vmin);
    transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg)
        translate3d(0, 0, calc((var(--width) / 2) * 1vmin));
    position: absolute;
    top: 50%;
    left: 50%;
}

.cuboid > div:nth-of-type(5) {
    height: calc(var(--depth) * 1vmin);
    width: calc(var(--width) * 1vmin);
    transform: translate(-50%, -50%)
        translate3d(0, 0, calc((var(--height) / 2) * 1vmin));
    position: absolute;
    top: 50%;
    left: 50%;
}

.cuboid > div:nth-of-type(6) {
    height: calc(var(--depth) * 1vmin);
    width: calc(var(--width) * 1vmin);
    transform: translate(-50%, -50%)
        translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg);
    position: absolute;
    top: 50%;
    left: 50%;
}

.studio {
    height: 100%;
    width: 100%;
    transform: translate3d(0, 0, calc((-10 + (var(--zoomed) * -10)) * 1vmin));
}

.floor {
    --height: 1;
    --width: calc(60 + var(--wall-thickness));
    --depth: calc(60 + var(--wall-thickness));
    --z: -0.5;
    --y: calc(var(--wall-thickness) * -1);
    --x: calc(var(--wall-thickness) * -1);
    transition: background var(--transition);
}

.floor div:not(.studio__shadow) {
    background: var(--floor-shade-three);
}

.floor div:nth-of-type(1) {
    background: var(--floor-shade-one);
}

.floor div:nth-of-type(3) {
    background: var(--floor-shade-two);
}

.floor div:nth-of-type(5) {
    transition: filter var(--transition);
    filter: brightness(1);
}

.floor div:nth-of-type(5):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: rotate(90deg);
    background: url("./img/floor.jpeg") 0 0/15vmin 15vmin;
}

.wall {
    transition: background var(--transition);
}

.wall--left {
    --height: calc(220 * var(--cm));
    --width: var(--wall-thickness);
    --depth: calc((240 * var(--cm)) + var(--wall-thickness));
    --z: calc(110 * var(--cm));
    --x: calc(var(--wall-thickness) * -1);
    --y: calc(var(--wall-thickness) * -1);
}

.wall--left div:nth-of-type(1) {
    background: var(--wall-shade-four);
}

.wall--left div:nth-of-type(2) {
    background: var(--wall-shade-one);
}

.wall--left div:nth-of-type(3) {
    background: var(--wall-shade-one);
    overflow: hidden;
}

.wall--left div:nth-of-type(3):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    filter: blur(var(--blur));
    background:
        radial-gradient(rgba(0, 0, 0, 0.5), transparent 100%) 80% 64%/20% 35%
            no-repeat,
        radial-gradient(rgba(0, 0, 0, 0.5), transparent 100%) 45% 58%/45% 20%
            no-repeat,
        radial-gradient(rgba(0, 0, 0, 0.5), transparent 100%) 36% 100%/64% 30%
            no-repeat;
}

.wall--left div:nth-of-type(3):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80%;
    width: 80%;
    overflow: hidden;
    filter: blur(var(--blur));
    transform: rotate(41deg) translate(-18%, -36%);
    opacity: 0;
    transition: opacity var(--transition) var(--transition);
    background: radial-gradient(
        circle at 50% 100%,
        rgba(242, 236, 217, 0.85),
        transparent 60%
    );
}

.wall--left div:nth-of-type(5) {
    background: var(--wall-shade-three);
}

.wall--left div:nth-of-type(4),
.wall--left div:nth-of-type(6) {
    background: var(--wall-shade-two);
}

.wall--right-lower {
    --height: calc(100 * var(--cm));
    --width: 50;
    --depth: var(--wall-thickness);
    --z: calc(50 * var(--cm));
    --y: calc(var(--wall-thickness) * -1);
}

.wall--right-lower:after {
    content: "";
    height: 30%;
    width: calc((114 * var(--cm)) * 1vmin);
    top: 102%;
    left: calc((22 * var(--cm)) * 1vmin);
    filter: blur(calc(0.75 * var(--blur)));
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    transform-origin: 50% 0;
    transform: rotateX(90deg) translate(0, calc((44 * var(--cm)) * 1vmin));
}

.wall--right-lower div {
    background: var(--wall-shade-four);
}

.wall--right-lower div:nth-of-type(5) {
    background: var(--wall-shade-three);
}

.wall--right-lower div:nth-of-type(2),
.wall--right-lower div:nth-of-type(3) {
    background: var(--wall-shade-one);
}

.wall--right-left {
    --height: calc(220 * var(--cm));
    --width: calc(22 * var(--cm));
    --depth: var(--wall-thickness);
    --z: calc(110 * var(--cm));
    --y: calc(var(--wall-thickness) * -1);
}

.wall--right-left div {
    background: var(--wall-shade-four);
}

.wall--right-left div:nth-of-type(3) {
    background: var(--wall-shade-two);
}

.wall--right-left div:nth-of-type(2) {
    background: var(--wall-shade-one);
}

.wall--right-upper {
    --height: calc(22 * var(--cm));
    --width: calc(240 * var(--cm));
    --depth: var(--wall-thickness);
    --z: calc(209 * var(--cm));
    --y: calc(var(--wall-thickness) * -1);
}

.wall--right-upper div {
    background: var(--wall-shade-four);
}

.wall--right-upper div:nth-of-type(2),
.wall--right-upper div:nth-of-type(3) {
    background: var(--wall-shade-one);
}

.wall--right-upper div:nth-of-type(5) {
    background: var(--wall-shade-three);
}

.wall--right-right {
    --height: calc(220 * var(--cm));
    --width: calc((240 - 136) * var(--cm));
    --depth: var(--wall-thickness);
    --z: calc(110 * var(--cm));
    --y: calc(var(--wall-thickness) * -1);
    --x: calc(136 * var(--cm));
}

.wall--right-right div {
    background: var(--wall-shade-four);
}

.wall--right-right div:nth-of-type(1):after {
    content: "";
    position: absolute;
    height: 24%;
    width: 70%;
    border-radius: 50%;
    background: none;
    filter: blur(calc(2 * var(--blur)));
    top: 15%;
    left: 15%;
    opacity: 0.75;
}

.wall--right-right div:nth-of-type(2),
.wall--right-right div:nth-of-type(3) {
    background: var(--wall-shade-one);
}

.wall--right-right div:nth-of-type(4) {
    background: var(--wall-shade-four);
}

.wall--right-right div:nth-of-type(5) {
    background: var(--wall-shade-three);
}

.windowsill {
    --height: calc(2 * var(--cm));
    --depth: calc(22 * var(--cm));
    --width: calc(114 * var(--cm));
    --z: calc(100 * var(--cm));
    --x: calc(22 * var(--cm));
    --y: calc(var(--wall-thickness) * -0.8);
}

.windowsill div {
    background: var(--windowsill-shade-one);
}

.windowsill div:nth-of-type(1) {
    transition: filter var(--transition);
    filter: brightness(0.5);
    background: url("./img/wood.jpeg");
}

.windowsill div:nth-of-type(2) {
    background: var(--wall-shade-one);
}

.windowsill div:nth-of-type(5) {
    transition: filter var(--transition);
    background: url("./img/wood.jpeg");
}

.windowsill div:nth-of-type(6) {
    background: var(--windowsill-shade-three);
}

.studio-light {
    --width: calc(4 * var(--cm));
    --height: calc(15 * var(--cm));
    --depth: calc(30 * var(--cm));
    --z: calc(146 * var(--cm));
    --rotate-cuboid-z: 20;
    --rotate-cuboid-x: 30;
    --rotate-cuboid-y: 45;
    top: 86%;
    left: 15%;
    margin-top: calc((-15 * var(--cm)) * 1vmin);
}

.studio-light div {
    background: var(--peripheral-four);
    transition: background var(--transition);
}

.studio-light div:nth-of-type(4) {
    background: var(--light);
    transition: background var(--transition) var(--transition);
}

.studio-light div:nth-of-type(5) {
    background: var(--peripheral-two);
}

.studio-light div:nth-of-type(3) {
    background: var(--peripheral-one);
}

.studio-light__stand {
    --width: calc(3 * var(--cm));
    --depth: calc(3 * var(--cm));
    --height: calc(80 * var(--cm));
    --z: calc(100 * var(--cm));
    top: 85%;
    left: 15%;
}

.studio-light__stand div {
    background: var(--peripheral-four);
}

.studio-light__stand div:nth-of-type(1) {
    background: var(--peripheral-one);
}

.studio-light__stand div:nth-of-type(3) {
    background: var(--peripheral-three);
}

.desk {
    height: calc((180 * var(--cm)) * 1vmin);
    width: calc((68 * var(--cm)) * 1vmin);
    top: calc((30 * var(--cm)) * 1vmin);
    left: calc((0 * var(--cm)) * 1vmin);
    position: absolute;
}

.desk__shadow {
    background: rgba(0, 0, 0, 0.5);
    filter: blur(var(--blur));
    position: absolute;
}

.desk__shadow--floor {
    background: radial-gradient(
        circle at 0 50%,
        rgba(0, 0, 0, 0.35) 50%,
        transparent 80%
    );
    height: 110%;
    width: 80%;
    top: 5%;
}

.desk__leg {
    --width: calc(8 * var(--cm));
    --depth: calc(5 * var(--cm));
    --height: calc(64 * var(--cm));
    --z: calc(32 * var(--cm));
    --x: calc(20 * var(--cm));
}

.desk__leg--right {
    --y: calc(15 * var(--cm));
}

.desk__leg--left {
    --y: calc(160 * var(--cm));
}

.desk__leg--bottom-right {
    --width: calc(50 * var(--cm));
    --height: calc(2 * var(--cm));
    --y: calc(15 * var(--cm));
    --x: calc(5 * var(--cm));
    --z: calc(1 * var(--cm));
}

.desk__leg--bottom-left {
    --width: calc(50 * var(--cm));
    --height: calc(2 * var(--cm));
    --x: calc(5 * var(--cm));
    --y: calc(160 * var(--cm));
    --z: calc(1 * var(--cm));
}

.desk__leg div {
    transition: background var(--transition);
    background: var(--leg-one);
}

.desk__leg div:nth-of-type(1) {
    background: var(--leg-two);
}

.desk__top {
    --height: calc(4 * var(--cm));
    --width: calc(68 * var(--cm));
    --depth: calc(180 * var(--cm));
    --z: calc(64 * var(--cm));
}

.desk__top div {
    background: url("./img/desk.jpeg") 0 0/20vmin 30vmin;
    transition:
        filter var(--transition),
        background var(--transition);
}

.desk__top div:nth-of-type(1) {
    filter: brightness(0.25);
}

.desk__top div:nth-of-type(5) {
    filter: brightness(0.5);
}

.desk__top div:nth-of-type(6) {
    background: var(--floor-shade-three);
}

.author {
    --height: calc(40 * var(--cm));
    --width: calc(2 * var(--cm));
    --depth: calc(60 * var(--cm));
    --y: calc(90 * var(--cm));
    --x: var(--cm);
    --z: calc(190 * var(--cm));
}

.author div {
    background: #000;
}

.author div:nth-of-type(4):after {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 8%;
    left: 4%;
    height: 100%;
    width: 100%;
    transition: transform var(--transition);
    filter: blur(var(--blur));
}

.author div:nth-of-type(3) {
    background: #262626;
}

.author div:nth-of-type(3):after {
    transition: color var(--transition);
    content: "1337";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    font-weight: bold;
    font-family: sans-serif;
    font-size: calc((22 * var(--cm)) * 1vmin);
    text-align: center;
    line-height: calc((40 * var(--cm) * 1vmin));
}

.shelf {
    --height: calc(5 * var(--cm));
    --depth: calc(26 * var(--cm));
    --width: calc(60 * var(--cm));
    --z: calc(144 * var(--cm));
    --y: var(--cm);
    --x: calc(170 * var(--cm));
}

.shelf div {
    background: var(--wall-shade-three);
}

.shelf div:nth-of-type(5) {
    background: var(--wall-shade-one);
    overflow: hidden;
}

.shelf div:nth-of-type(5):after {
    content: "";
    height: 200%;
    border-radius: 50%;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    filter: blur(calc(2 * var(--blur)));
    transform: translate(-80%, -50%);
}

.shelf div:nth-of-type(3) {
    background: var(--wall-shade-two);
}

.shelf div:nth-of-type(2):after {
    content: "";
    width: 100%;
    height: 250%;
    position: absolute;
    top: 110%;
    left: 4%;
    background: rgba(0, 0, 0, 0.5);
    transform-origin: 50% 0;
    transform: skewX(-5deg);
    filter: blur(var(--blur));
}

.light-cube {
    --height: calc(15 * var(--cm));
    --width: calc(15 * var(--cm));
    --depth: calc(15 * var(--cm));
    --z: calc(155 * var(--cm));
    --x: calc(180 * var(--cm));
    --y: calc(5 * var(--cm));
    --rotate-cuboid-z: 40;
}

.light-cube div {
    background: var(--wall-shade-one);
}

.light-cube div:nth-of-type(1) {
    background: var(--wall-shade-three);
}

.light-cube div:nth-of-type(3) {
    background: var(--wall-shade-two);
}

.skirting--left {
    --height: calc(8 * var(--cm));
    --width: calc(2 * var(--cm));
    --depth: calc(240 * var(--cm));
    --z: calc(4 * var(--cm));
}

.skirting--left div {
    background: var(--skirting-one);
}

.skirting--left div:nth-of-type(3) {
    background: var(--skirting-one);
}

.skirting--left div:nth-of-type(3):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: blur(var(--blur));
    background: radial-gradient(
            circle at 50% 50%,
            rgba(0, 0, 0, 0.5) 0 75%,
            transparent
        )
        40% 0/70% 150% no-repeat;
}

.skirting--left div:nth-of-type(5) {
    background:
        linear-gradient(transparent, rgba(0, 0, 0, 0.5), transparent) 0 50%/100%
            70% no-repeat,
        var(--skirting-one);
}

.skirting--right {
    --height: calc(8 * var(--cm));
    --width: calc(240 * var(--cm));
    --depth: calc(2 * var(--cm));
    --z: calc(4 * var(--cm));
}

.skirting--right div {
    background: var(--skirting-two);
}

.rug {
    --height: calc(1 * var(--cm));
    --width: calc(213 * var(--cm));
    --depth: calc(223 * var(--cm));
    --x: calc(21 * var(--cm));
    --y: calc(10 * var(--cm));
    --z: calc(0.5 * var(--cm));
}

.rug div {
    background: var(--rug);
}

.rug div:nth-of-type(5) {
    transition: filter var(--transition);
    filter: brightness(1);
    background: url("./img/carpet.jpg");
    background-size: cover;
}

.monitor--main {
    --width: calc(3 * var(--cm));
    --depth: calc(87 * var(--cm));
    --height: calc(45 * var(--cm));
    --z: calc(106 * var(--cm));
    --y: calc(-46 * var(--cm));
    --x: calc(10 * var(--cm));
    top: 55%;
}

.monitor--portrait {
    --depth: calc(47 * var(--cm));
    --width: calc(3 * var(--cm));
    --height: calc(70 * var(--cm));
    --z: calc(120 * var(--cm));
    --x: calc(35 * var(--cm));
    --rotate-cuboid-z: 30;
    top: 8%;
}

.monitor div {
    background: var(--peripheral-one);
}

.monitor div:nth-of-type(3),
.monitor div:nth-of-type(5) {
    background: var(--peripheral-four);
}

.monitor div:nth-of-type(2) {
    background: var(--peripheral-three);
}

.monitor iframe {
    position: absolute;
    height: 650%;
    width: 650%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.15);
}

.monitor__arm {
    --width: calc(4 * var(--cm));
    --depth: calc(4 * var(--cm));
    --height: calc(30 * var(--cm));
    --z: calc(80 * var(--cm));
}

.monitor__arm--main {
    --x: calc(6 * var(--cm));
    top: 50%;
}

.monitor__arm--portrait {
    --x: calc(20 * var(--cm));
    --rotate-cuboid-z: 30;
    top: 15%;
}

.monitor__arm div {
    background: var(--peripheral-four);
}

.monitor__arm div:nth-of-type(3),
.monitor__arm div:nth-of-type(5) {
    background: var(--peripheral-four);
}

.monitor__arm div:nth-of-type(1) {
    background: var(--peripheral-one);
}

.mac {
    --width: calc(20 * var(--cm));
    --height: calc(5 * var(--cm));
    --depth: calc(20 * var(--cm));
    --z: calc(60 * var(--cm));
    --x: calc(44 * var(--cm));
    top: 10%;
}

.mac div {
    background: var(--mac-three);
}

.mac div:nth-of-type(1) {
    background: var(--mac-one);
}

.mac div:nth-of-type(3) {
    background: var(--mac-two);
}

.keyboard {
    --depth: calc(38 * var(--cm));
    --width: calc(14 * var(--cm));
    --height: calc(2 * var(--cm));
    --z: calc(1 * var(--cm));
}

.keyboard div {
    background: var(--peripheral-two);
}

.keyboard div:nth-of-type(1) {
    background: var(--peripheral-one);
}

.keyboard__keys {
    --depth: calc(36 * var(--cm));
    --width: calc(12 * var(--cm));
    --height: calc(3 * var(--cm));
    --z: calc(1.5 * var(--cm));
    --x: calc(1 * var(--cm));
    --y: calc(1 * var(--cm));
}

.keyboard__keys div {
    background: #999;
}

.keyboard__keys div:nth-of-type(5):after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    transform-origin: 0% 0%;
    width: calc((36 * var(--cm)) * 1vmin);
    height: calc((12 * var(--cm)) * 1vmin);
    transform: rotate(270deg) translate(-100%, 0%);
    background: url("./img/keyboard.webp");
    background-size: cover;
}

.keyboard__base {
    transform-style: preserve-3d;
    height: calc((38 * var(--cm)) * 1vmin);
    width: calc((14 * var(--cm)) * 1vmin);
    top: 50%;
    left: 60%;
    position: absolute;
    transform: translate3d(0, -50%, calc((66 * var(--cm)) * 1vmin));
}

.mousemat {
    height: 260%;
    width: 200%;
    background: url("./img/mousepad.gif");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, calc(var(--cm) * 0.1vmin));
}

.mouse {
    --depth: calc(6 * var(--cm));
    --width: calc(10 * var(--cm));
    --height: calc(4 * var(--cm));
    --z: calc(2 * var(--cm));
    top: -40%;
    left: 20%;
}

.mouse div {
    background: var(--peripheral-three);
}

.mouse div:nth-of-type(1) {
    background: var(--peripheral-one);
}

.mouse div:nth-of-type(2),
.mouse div:nth-of-type(3) {
    background: var(--peripheral-four);
}

.mouse div:nth-of-type(5):after {
    content: "";
    height: 25%;
    width: 30%;
    background: #80e619;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

.logo-canvas {
    --width: calc(60 * var(--cm));
    --height: calc(60 * var(--cm));
    --depth: calc(2 * var(--cm));
    --z: calc(80 * var(--cm));
    --x: calc(168 * var(--cm));
    --y: var(--cm);
}

.logo-canvas div {
    background: #f2f2f2;
    filter: brightness(1);
    transition: filter var(--transition);
}

.logo-canvas div:nth-of-type(1) {
    background: url("https://seimpairiyun.thedev.id/img/logo3.png"), #fafafa;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(1) grayscale(1);
}

.logo-canvas div:nth-of-type(2):after {
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    filter: blur(var(--blur));
    position: absolute;
    top: 10%;
    left: -5%;
}

.window {
    width: calc((114 * var(--cm)) * 1vmin);
    background:
        linear-gradient(
            40deg,
            transparent 20%,
            rgba(255, 255, 255, 0.5),
            transparent 50%
        ),
        linear-gradient(
            40deg,
            transparent 50%,
            rgba(255, 255, 255, 0.25),
            transparent 60%
        ),
        rgba(209, 243, 250, 0.25);
    height: calc((95 * var(--cm)) * 1vmin);
    position: absolute;
    transform: rotateX(90deg)
        translate3d(
            calc((22 * var(--cm)) * 1vmin),
            calc((102 * var(--cm)) * 1vmin),
            calc((18 * var(--cm)) * 1vmin)
        );
    transform-origin: 50% 0%;
}

.window__frame--top,
.window__frame--middle,
.window__frame--bottom {
    --depth: calc(4 * var(--cm));
    --width: calc(115 * var(--cm));
    --height: calc(4 * var(--cm));
}

.window__frame--top div,
.window__frame--middle div,
.window__frame--bottom div {
    background: #fafafa;
}

.window__frame--top div:nth-of-type(6),
.window__frame--middle div:nth-of-type(6),
.window__frame--bottom div:nth-of-type(6) {
    background: #e6e6e6;
}

.window__frame--top {
    bottom: 0;
}

.window__frame--middle {
    top: 60%;
}

.window__frame--left,
.window__frame--right {
    --depth: calc(95 * var(--cm));
    --width: calc(4 * var(--cm));
    --height: calc(4 * var(--cm));
}

.window__frame--left div,
.window__frame--right div {
    background: #fafafa;
}

.window__frame--left div:nth-of-type(6),
.window__frame--right div:nth-of-type(6) {
    background: #e6e6e6;
}

.window__frame--right {
    right: 0;
}

.blinds {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, calc((-10 * var(--cm)) * 1vmin)) rotate(180deg);
}

.blinds:after {
    content: "";
    background: rgba(128, 128, 128, 0.1);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 0%;
    transition: transform calc(2 * var(--transition)) var(--transition);
    transform: scaleY(var(--dark));
}

.blind {
    height: 10%;
    width: 100%;
    position: absolute;
    top: -5%;
    left: 0;
    background: var(--blind);
    transform-origin: 50% 50%;
    transition:
        transform calc(2 * var(--transition)) var(--transition),
        background var(--transition);
    transform: translate(0, calc((var(--index) * (100 * var(--dark))) * 1%))
        rotateX(calc((-85 + (var(--dark) * 83)) * 1deg));
}

.plant {
    height: calc((14 * var(--cm)) * 1vmin);
    width: calc((14 * var(--cm)) * 1vmin);
    position: absolute;
    transform: translate3d(
        calc((208 * var(--cm)) * 1vmin),
        calc((6 * var(--cm)) * 1vmin),
        calc((146 * var(--cm)) * 1vmin)
    );
}

.plant__plant {
    transition: filter var(--transition);
    filter: brightness(1);
    height: calc((50 * var(--cm)) * 1vmin);
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    transform: translate(-50%, 0) rotateX(-90deg)
        translate3d(0, calc((var(--cm) * 10) * -1vmin), 0)
        rotateY(calc(var(--r, 0) * 1deg));
}

.plant__plant:nth-of-type(2) {
    --r: 90;
}

.plant__plant:nth-of-type(3) {
    --r: 220;
}

.plant__pot {
    --height: calc(10 * var(--cm));
    --width: calc(14 * var(--cm));
    --depth: calc(14 * var(--cm));
    --z: calc(6 * var(--cm));
}

.plant__pot div {
    background: var(--pot-three);
}

.plant__pot div:nth-of-type(1) {
    background: var(--pot-two);
}

.plant__pot div:nth-of-type(3) {
    background: var(--pot-one);
}

.plant__pot div:nth-of-type(5) {
    background: #111;
}

.chair__base {
    opacity: calc(1 - var(--zoomed));
    height: calc((66 * var(--cm)) * 1vmin);
    width: calc((66 * var(--cm)) * 1vmin);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-30%, -70%, calc((2 * var(--cm)) * 1vmin))
        rotateZ(-35deg);
}

.chair__shadow {
    background: rgba(0, 0, 0, 0.75);
    height: 115%;
    width: 115%;
    border-radius: 50%;
    filter: blur(calc(1.5 * var(--blur)));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -45%);
}

.chair__wheel {
    --height: calc(6 * var(--cm));
    --width: calc(6 * var(--cm));
    --depth: calc(6 * var(--cm));
    --z: calc(3 * var(--cm));
    --x: calc(30 * var(--cm));
    top: 50%;
    left: 50%;
    margin-left: calc((-3 * var(--cm)) * 1vmin);
    margin-top: calc((-3 * var(--cm)) * 1vmin);
}

.chair__wheel--one {
    --starting-rotation: 0;
}

.chair__wheel--two {
    --starting-rotation: 72;
}

.chair__wheel--three {
    --starting-rotation: 144;
}

.chair__wheel--four {
    --starting-rotation: 216;
}

.chair__wheel--five {
    --starting-rotation: 288;
}

.chair__wheel div {
    background: var(--peripheral-three);
}

.chair__wheel div:nth-of-type(1),
.chair__wheel div:nth-of-type(2) {
    background: #000;
}

.chair__spine {
    --height: calc(30 * var(--cm));
    --width: calc(6 * var(--cm));
    --depth: calc(6 * var(--cm));
    --z: calc(20 * var(--cm));
    top: 50%;
    left: 50%;
    margin-left: calc((-3 * var(--cm)) * 1vmin);
    margin-top: calc((-3 * var(--cm)) * 1vmin);
}

.chair__spine div {
    background: #000;
}

.chair__spine div:nth-of-type(1) {
    background: var(--peripheral-four);
}

.chair__leg {
    --height: calc(4 * var(--cm));
    --width: calc(30 * var(--cm));
    --depth: calc(6 * var(--cm));
    --z: calc(8 * var(--cm));
    --x: calc(18 * var(--cm));
    top: 50%;
    left: 50%;
    margin-left: calc((-15 * var(--cm)) * 1vmin);
    margin-top: calc((-3 * var(--cm)) * 1vmin);
}

.chair__leg--one {
    --starting-rotation: 0;
}

.chair__leg--two {
    --starting-rotation: 72;
}

.chair__leg--three {
    --starting-rotation: 144;
}

.chair__leg--four {
    --starting-rotation: 216;
}

.chair__leg--five {
    --starting-rotation: 288;
}

.chair__leg div {
    background: var(--mac-one);
}

.chair__leg div:nth-of-type(1),
.chair__leg div:nth-of-type(2) {
    background: var(--mac-three);
}

.chair__seat {
    --height: calc(10 * var(--cm));
    --width: calc(50 * var(--cm));
    --depth: calc(40 * var(--cm));
    --z: calc(32 * var(--cm));
    top: 50%;
    left: 50%;
    margin-left: calc((-25 * var(--cm)) * 1vmin);
    margin-top: calc((-20 * var(--cm)) * 1vmin);
}

.chair__seat div {
    background: var(--chair-one);
}

.chair__seat div:nth-of-type(1),
.chair__seat div:nth-of-type(2) {
    background: var(--chair-accent-one);
}

.chair__wing {
    --height: calc(10 * var(--cm));
    --width: calc(50 * var(--cm));
    --depth: calc(16 * var(--cm));
    --z: calc(34 * var(--cm));
    top: 50%;
    left: 50%;
    margin-left: calc((-25 * var(--cm)) * 1vmin);
}

.chair__wing--right {
    margin-top: calc((-28 * var(--cm)) * 1vmin);
    --rotate-cuboid-x: -15;
}

.chair__wing--right div:nth-of-type(2) {
    background: var(--chair-accent-one);
    border: calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two);
}

.chair__wing--left {
    margin-top: calc((12 * var(--cm)) * 1vmin);
    --rotate-cuboid-x: 15;
}

.chair__wing--left div:nth-of-type(1) {
    background: var(--chair-accent-one);
    border: calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two);
}

.chair__wing div {
    background: var(--chair-two);
}

.chair__back {
    --height: calc(66 * var(--cm));
    --depth: calc(48 * var(--cm));
    --width: calc(10 * var(--cm));
    --z: calc(64 * var(--cm));
    --rotate-cuboid-y: 10;

    right: 0%;
    top: 50%;
    margin-top: calc((-24 * var(--cm)) * 1vmin);
}

.chair__back div {
    background: var(--chair-three);
}

.chair__back div:nth-of-type(1),
.chair__back div:nth-of-type(2) {
    background: var(--chair-two);
    border: calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two);
}

.chair__back div:nth-of-type(3):after {
    content: "";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50%;
    width: 100%;
    filter: brightness(1);
    transition: filter var(--transition);
    background: url("https://seimpairiyun.thedev.id/img/logofull.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.chair__top {
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: calc(var(--spin, 0) * 1s);
    animation-duration: calc(var(--spin, 0) * 1s);
    /* --spin: 20; */
}

@-webkit-keyframes spin {
    to {
        transform: rotateZ(5deg);
    }
}

@keyframes spin {
    to {
        transform: rotateZ(360deg);
    }
}

.chair__headrest {
    --height: calc(20 * var(--cm));
    --depth: calc(40 * var(--cm));
    --width: calc(10 * var(--cm));
    --z: calc(100 * var(--cm));
    top: 50%;
    right: -5%;
    margin-top: calc((-20 * var(--cm)) * 1vmin);
}

.chair__headrest div {
    background: var(--chair-two);
}

.chair__headrest div:nth-of-type(1),
.chair__headrest div:nth-of-type(2) {
    border: calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two);
}

.chair__headrest div:nth-of-type(5) {
    background: var(--chair-three);
}

.chair__armrest--horizontal {
    --height: calc(4 * var(--cm));
    --width: calc(30 * var(--cm));
    --depth: calc(8 * var(--cm));
    --z: calc(52 * var(--cm));
    left: 20%;
}

.chair__armrest--horizontal--right {
    top: -5%;
}

.chair__armrest--horizontal--left {
    bottom: -5%;
}

.chair__armrest--horizontal div {
    background: var(--chair-four);
}

.chair__armrest--horizontal div:nth-of-type(1) {
    background: var(--chair-three);
}

.chair__armrest--vertical {
    --height: calc(20 * var(--cm));
    --depth: calc(6 * var(--cm));
    --width: calc(6 * var(--cm));
    --z: calc(40 * var(--cm));
    left: 35%;
}

.chair__armrest--vertical--right {
    top: -4%;
}

.chair__armrest--vertical--left {
    bottom: -4%;
}

.chair__armrest--vertical div {
    background: var(--chair-three);
}

.chair__armrest--vertical div:nth-of-type(1) {
    background: var(--chair-one);
}

/* LOGIN */
*,
*:after,
*:before {
    box-sizing: border-box;
}

:root {
    --duration: 0.35s;
    --padding: 0.675rem;
    --radius: 8px;
    --ease: linear(
        0 0%,
        0.0036 9.62%,
        0.0185 16.66%,
        0.0489 23.03%,
        0.0962 28.86%,
        0.1705 34.93%,
        0.269 40.66%,
        0.3867 45.89%,
        0.5833 52.95%,
        0.683 57.05%,
        0.7829 62.14%,
        0.8621 67.46%,
        0.8991 70.68%,
        0.9299 74.03%,
        0.9545 77.52%,
        0.9735 81.21%,
        0.9865 85%,
        0.9949 89.15%,
        1 100%
    );
    --ease-out: linear(
        0 0%,
        0.4322 6.7%,
        0.5876 9.63%,
        0.7165 12.53%,
        0.8238 15.53%,
        0.9087 18.63%,
        0.9731 21.89%,
        1.0188 25.4%,
        1.0377 27.67%,
        1.0507 30.11%,
        1.058 32.77%,
        1.0598 35.74%,
        1.0528 41.1%,
        1.0164 56.54%,
        1.004 65.49%,
        0.998 78.52%,
        1 100%
    );
    --sw: min(120px, 90vw);
    --sh: 35px;
    --ew: min(300px, 90vw);
    --eh: min(205px, 80vh);

    /* Shadow */
    --base: hsl(
        var(--tint, 214) var(--saturated, 0%) 27% / calc(var(--alpha, 4) * 1%)
    );
    --shade: hsl(from var(--base) calc(h + 8) 25 calc(l - 5));
    --spread: 4;
    --s1: calc((var(--spread) * 1px) * pow(2, 0));
    --s2: calc((var(--spread) * 1px) * pow(2, 1));
    --s3: calc((var(--spread) * 1px) * pow(2, 2));
    --s4: calc((var(--spread) * 1px) * pow(2, 3));
    --s5: calc((var(--spread) * 1px) * pow(2, 4));
    /* this becomes the angle of spread, -1 through to 1 */
    --x: 0;
    --perfect-shadow:
        0 0 0 1px var(--base), 0 1px 1px -0.5px var(--shade),
        calc(var(--s1) * var(--x)) var(--s1) var(--s1) calc(var(--s1) * -0.5)
            var(--shade),
        calc(var(--s2) * var(--x)) var(--s2) var(--s2) calc(var(--s2) * -0.5)
            var(--shade),
        calc(var(--s3) * var(--x)) var(--s3) var(--s3) calc(var(--s3) * -0.5)
            var(--base),
        calc(var(--s4) * var(--x)) var(--s4) var(--s4) calc(var(--s4) * -0.5)
            var(--base),
        calc(var(--s5) * var(--x)) var(--s5) var(--s5) calc(var(--s5) * -0.5)
            var(--base);
    --border: color-mix(in lch, canvasText, transparent 90%);
    --hr: color-mix(in lch, canvas, canvasText 10%);
    --speed: 0.25s;
    --starting: color-mix(in lch, canvas, canvasText 20%);
    --text: white;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family:
        "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica,
        Arial, sans-serif, system-ui;
}

.disclosure {
    transition-property: width, height, border-radius;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
}

a,
button,
input {
    outline-color: rgb(0, 0, 0);
}

button {
    cursor: pointer;
}

[popovertargetaction="close"] {
    outline-offset: -1.875rem;
}

.hide {
    z-index: -1;
    display: none;
    opacity: 0;
}

.show {
    z-index: 1;
    display: block;
    opacity: 1;
}

/*BASH*/
/*MODAL TERMINAL */
.terminal {
    position: relative;
    display: block;
    max-width: 700px;
    overflow: hidden;
    padding: 10px 20px 10px 10px;
    -ms-flex-item-align: center;
    align-self: center;
}

.terminal-window {
    position: fixed;
    max-width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    /*opacity: 0;*/
    pointer-events: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.terminal-window:target {
    opacity: 1;
    pointer-events: auto;
}

.terminal-window > div {
    position: relative;
    margin: 8% auto;
    padding: 1rem 0rem 0rem 0rem;
    color: #444;
}

.bash-container {
    height: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    position: relative;
    display: block;
    /*     width          : 100%;*/
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
    margin-top: 90px;
    margin-bottom: 20px;
}

.bash-button,
.bash .buttons .maximize,
.bash .buttons .minimize,
.bash .buttons .close {
    padding: 0;
    margin: 0;
    margin-right: 4px;
    width: 12px;
    height: 12px;
    background-color: gainsboro;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.5);
}

.handle {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.bash {
    /*animation: bounceIn 1s ease-in-out;*/
    width: 700px;
}

.bash .handle {
    height: 22px;
    background: linear-gradient(0deg, #d8d8d8, #ececec);
    border-top: 1px solid white;
    border-bottom: 1px solid #b3b3b3;
    color: rgba(0, 0, 0, 0.7);
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}

.bash .buttons {
    position: absolute;
    float: left;
    margin: 0 8px;
}

.bash .buttons .close {
    background-color: #ff6159;
}

.bash .buttons .minimize {
    background-color: #ffbf2f;
}

.bash .buttons .maximize {
    background-color: #25cc3e;
}

.bash .terminal {
    background-color: black;
    opacity: 0.7;
    height: 250px;
    color: white;
    font-family: "Source Code Pro", monospace;
    font-weight: 400;
    font-size: 14px;
    white-space: pre-wrap;
    /*     white-space               : -moz-pre-wrap;
    white-space                      : -pre-wrap;
    white-space                      : -o-pre-wrap;
 */
    word-wrap: break-word;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-y: auto;
}

.bash .terminal::after {
    content: "|";
    animation: blink 2s steps(1) infinite;
}

.cmd {
    background-color: transparent;
    border-color: transparent;
    outline: none;
    margin: -5px;
    width: 0%;
}

.prompt {
    color: #bde371;
}

.path {
    color: #5ed7ff;
}

@keyframes blink {
    50% {
        color: transparent;
    }
}

@keyframes bounceIn {
    0% {
        transform: translateY(-1000px);
    }

    60% {
        transform: translateY(200px);
    }

    100% {
        transform: translateY(0px);
    }
}