@font-face {
  font-family: 'Comfortaa';
  font-weight: normal;
  src: url('comfortaa.ttf') format('truetype');
}

@font-face {
  font-family: 'Comfortaa';
  font-weight: bold;
  src: url('comfortaa-bold.ttf') format('truetype');
}
body, html {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: black;
    color: white;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.2vw;
    line-height: 2vw;
}

h1 {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0.2em
}
p {
    margin-top: 1vw;
    padding-top: 2.5vw;
    background: url(arrow.png) no-repeat center top;
    background-size: 2vw 1.6875vw;
}
#myVideo {
    position: fixed;
    min-width: 110%;
    min-height: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.3;
    transition: opacity 3s;
}

.main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main>div {
    display: grid;
    width: 79vw;
    height: 47vw;
    padding-bottom: 6vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1vw;
}

.main.rotated {
    transition: transform cubic-bezier(.75, 0, .45, .97) 5s;
    transform-origin: center center;
    transform: rotate(180deg) translate(50%, 50%);
}

.main.final {
    transition: all ease-in-out 2s, opacity 2s 2s;
    transform: rotate(180deg) translate(50%, 25%);
    top: 0%;
    opacity: 0;
}

.main.final>div {
    transition: transform 1.7s ease-in-out 0.3s;
    transform: scale(0.5, 0.5);
}

.keyboard {
    display: grid;
    width: 98vw;
    height: 10.666vw;
    position: absolute;
    bottom: 1vw;
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1vw;
}

.message {
    position: absolute;
    width: 98vw;
    height: 10.666vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.7, 1);
    text-align: center;
    opacity: 0;
    transition: transform 10s cubic-bezier(.08, .44, .49, .99);
}

.message.scaled {
    transform: translate(-50%, -50%) scale(3.5, 3);
}

.cipher, .key {
    display: block;
    background: rgba(10, 10, 10, 0.7) url(c.png) no-repeat;
    background-size: cover;
    border-radius: 1vw;
    opacity: 0;
}

.visible {
    opacity: 1;
}

.k0 {
    background-image: url(c0.png);
}

.k1 {
    background-image: url(c1.png);
}

.k2 {
    background-image: url(c2.png);
}

.k3 {
    background-image: url(c3.png);
}

.k4 {
    background-image: url(c4.png);
}

.k5 {
    background-image: url(c5.png);
}

.k6 {
    background-image: url(c6.png);
}

.k7 {
    background-image: url(c7.png);
}

.k8 {
    background-image: url(c8.png);
}

.k9 {
    background-image: url(c9.png);
}

.cipher.k0 {
    animation: k0-animation infinite;
}

.cipher.k2 {
    animation: k2-animation infinite;
}

.cipher.k3 {
    animation: k3-animation infinite;
}

.cipher.k5 {
    animation: k5-animation infinite;
}

.cipher.k6 {
    animation: k6-animation infinite;
}

.cipher.k7 {
    animation: k7-animation infinite;
}

.cipher.k8 {
    animation: k8-animation infinite;
}

.cipher.k9 {
    animation: k9-animation infinite;
}

.cipher.stop {
    animation: none !important;
}

#c10.stop {
    animation: k8b-animation 6s linear 0s 1 !important;
    background-image: url(c8b.png);
}

@keyframes k0-animation {
    0% {
        background-image: url(c0.png);
    }
    29% {
        background-image: url(c0.png);
    }
    30% {
        background-image: url(c0a.png);
    }
    31% {
        background-image: url(c0.png);
    }
    32% {
        background-image: url(c0a.png);
    }
    33% {
        background-image: url(c0.png);
    }
    100% {
        background-image: url(c0.png);
    }
}

@keyframes k2-animation {
    0% {
        background-image: url(c2.png);
    }
    29% {
        background-image: url(c2.png);
    }
    30% {
        background-image: url(c2a.png);
    }
    31% {
        background-image: url(c2.png);
    }
    32% {
        background-image: url(c2a.png);
    }
    33% {
        background-image: url(c2.png);
    }
    100% {
        background-image: url(c2.png);
    }
}

@keyframes k3-animation {
    0% {
        background-image: url(c3.png);
    }
    29% {
        background-image: url(c3.png);
    }
    30% {
        background-image: url(c3a.png);
    }
    31% {
        background-image: url(c3.png);
    }
    32% {
        background-image: url(c3a.png);
    }
    33% {
        background-image: url(c3.png);
    }
    100% {
        background-image: url(c3.png);
    }
}

@keyframes k5-animation {
    0% {
        background-image: url(c5.png);
    }
    29% {
        background-image: url(c5.png);
    }
    30% {
        background-image: url(c5a.png);
    }
    31% {
        background-image: url(c5.png);
    }
    32% {
        background-image: url(c5a.png);
    }
    33% {
        background-image: url(c5.png);
    }
    100% {
        background-image: url(c5.png);
    }
}

@keyframes k6-animation {
    0% {
        background-image: url(c6.png);
    }
    29% {
        background-image: url(c6.png);
    }
    30% {
        background-image: url(c6a.png);
    }
    31% {
        background-image: url(c6.png);
    }
    32% {
        background-image: url(c6a.png);
    }
    33% {
        background-image: url(c6.png);
    }
    100% {
        background-image: url(c6.png);
    }
}

@keyframes k7-animation {
    0% {
        background-image: url(c7.png);
    }
    29% {
        background-image: url(c7.png);
    }
    30% {
        background-image: url(c7a.png);
    }
    31% {
        background-image: url(c7.png);
    }
    32% {
        background-image: url(c7a.png);
    }
    33% {
        background-image: url(c7.png);
    }
    100% {
        background-image: url(c7.png);
    }
}

@keyframes k8-animation {
    0% {
        background-image: url(c8.png);
    }
    29% {
        background-image: url(c8.png);
    }
    30% {
        background-image: url(c8a.png);
    }
    31% {
        background-image: url(c8.png);
    }
    32% {
        background-image: url(c8a.png);
    }
    33% {
        background-image: url(c8.png);
    }
    100% {
        background-image: url(c8.png);
    }
}

@keyframes k8b-animation {
    0% {
        background-image: url(c8.png);
    }
    29% {
        background-image: url(c8.png);
    }
    30% {
        background-image: url(c8b.png);
    }
    31% {
        background-image: url(c8.png);
    }
    32% {
        background-image: url(c8b.png);
    }
    33% {
        background-image: url(c8.png);
    }
    51% {
        background-image: url(c8.png);
    }
    52% {
        background-image: url(c8b.png);
    }
    53% {
        background-image: url(c8.png);
    }
    65% {
        background-image: url(c8.png);
    }
    66% {
        background-image: url(c8b.png);
    }
    67% {
        background-image: url(c8.png);
    }
    68% {
        background-image: url(c8b.png);
    }
    69% {
        background-image: url(c8.png);
    }
    70% {
        background-image: url(c8b.png);
    }
    71% {
        background-image: url(c8.png);
    }
    80% {
        background-image: url(c8.png);
    }
    81% {
        background-image: url(c8b.png);
    }
    82% {
        background-image: url(c8.png);
    }
    83% {
        background-image: url(c8b.png);
    }
    84% {
        background-image: url(c8.png);
    }
    85% {
        background-image: url(c8b.png);
    }
    86% {
        background-image: url(c8.png);
    }
    91% {
        background-image: url(c8.png);
    }
    95% {
        background-image: url(c8.png);
    }
    96% {
        background-image: url(c8.png);
    }
    99% {
        background-image: url(c8.png);
    }
    100% {
        background-image: url(c8b.png);
    }
}

@keyframes k9-animation {
    0% {
        background-image: url(c9.png);
    }
    29% {
        background-image: url(c9.png);
    }
    30% {
        background-image: url(c9a.png);
    }
    31% {
        background-image: url(c9.png);
    }
    32% {
        background-image: url(c9a.png);
    }
    33% {
        background-image: url(c9.png);
    }
    100% {
        background-image: url(c9.png);
    }
}

@keyframes blink-animation {
    50% {
        background-image: none;
    }
}

.selected {
    animation: blink-animation 1s step-start 0s infinite !important;
}

body::after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url(c0a.png) url(c2a.png) url(c3a.png) url(c5a.png) url(c6a.png) url(c7a.png) url(c8a.png) url(c9a.png) url(c0.png) url(c2.png) url(c3.png) url(c5.png) url(c6.png) url(c7.png) url(c8.png) url(c9.png) url(c8b.png) url(arrow.png);
}