.matrix-background,
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #181c1f !important;
    margin: 0;
    padding: 0
}

.glowing-oval,
.inscription {
    opacity: 1;
    top: 50%;
    left: 50%
}

.inscription,
.text-container {
    font-family: monospace;
    user-select: none
}

.face,
.glowing-oval,
.text-container,
body,
button {
    overflow: hidden
}

.cube-container {
    display: flex;
    align-items: center;
    perspective: 500px
}

#cube {
    margin: auto;
    position: relative;
    transform-style: preserve-3d;
    transform: translate3d(-50%, -50%, 0);
    animation: 5s linear infinite rotate;
    z-index: 2;
}

@keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0)
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg)
    }
}

.face {
    position: absolute;
    border: 3px solid #181c1f;
    transition: background-color 1s;
    animation: 5s ease-in-out infinite glowBorder
}

@keyframes glowBorder {

    0%,
    100% {
        box-shadow: 0 0 1px transparent
    }

    10% {
        box-shadow: 0 0 3px transparent
    }

    30% {
        box-shadow: 0 0 6px var(--rune-color);
        opacity: .7 var (--rune-color)
    }

    50% {
        box-shadow: 0 0 10px var(--rune-color);
        opacity: 1 var(--rune-color)
    }

    60% {
        box-shadow: 0 0 13px var(--rune-color);
        opacity: .7 var(--rune-color)
    }

    70% {
        box-shadow: 0 0 16px var(--rune-color);
        opacity: 1 var(--rune-color)
    }

    85% {
        box-shadow: 0 0 16px var(--rune-color);
        opacity: .5 var(--rune-color)
    }

    95% {
        box-shadow: 0 0 22px var(--rune-color);
        opacity: .3 var(--rune-color)
    }
}

#cube .front {
    transform: translateZ(70px)
}

#cube .back {
    transform: rotateY(180deg) translateZ(70px)
}

#cube .right {
    transform: rotateY(90deg) translateZ(70px)
}

#cube .left {
    transform: rotateY(-90deg) translateZ(70px)
}

#cube .top {
    transform: rotateX(90deg) translateZ(70px)
}

#cube .bottom {
    transform: rotateX(-90deg) translateZ(70px)
}

#cube.move-out .front {
    animation: 3s forwards moveOutFront, 5s ease-in-out infinite glowBorder;
}

#cube.move-out .back {
    animation: 3s forwards moveOutBack, 5s ease-in-out infinite glowBorder;
}

#cube.move-out .right {
    animation: 3s forwards moveOutRight, 5s ease-in-out infinite glowBorder;
}

#cube.move-out .left {
    animation: 3s forwards moveOutLeft, 5s ease-in-out infinite glowBorder;
}

#cube.move-out .top {
    animation: 3s forwards moveOutTop, 5s ease-in-out infinite glowBorder;
}

#cube.move-out .bottom {
    animation: 3s forwards moveOutBottom, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .front {
    animation: 3s forwards moveInFront, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .back {
    animation: 3s forwards moveInBack, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .right {
    animation: 3s forwards moveInRight, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .left {
    animation: 3s forwards moveInLeft, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .top {
    animation: 3s forwards moveInTop, 5s ease-in-out infinite glowBorder;
}

#cube.move-in .bottom {
    animation: 3s forwards moveInBottom, 5s ease-in-out infinite glowBorder;
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    white-space: normal;
    letter-spacing: 15px;
    text-align: justify;
    text-justify: inter-character;
    color: #181c1f;
    animation: 5s ease-in-out infinite blinkingEffect
}

@keyframes blinkingEffect {

    0%,
    100% {
        color: #181c1f
    }

    10%,
    70% {
        filter: brightness(.3) var(--rune-color)
    }

    30%,
    60% {
        filter: brightness(.5) var(--rune-color)
    }

    50%,
    85% {
        filter: brightness(.7) var(--rune-color)
    }

    95% {
        color: var(--rune-color)
    }
}

.glowing-oval {
    position: fixed;
    transform: translate(-50%, -50%) scale(0);
    width: 100vw;
    height: 100vh;
    z-index: 2;
    transition: transform .3s, opacity .3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px
}

.inscription,
button,
button:before {
    position: absolute
}

.inscription {
    font-size: 2.5vw;
    line-height: 1.4;
    white-space: pre-wrap;
    text-align: center;
    z-index: 4;
    transform: translate(-50%, -50%);
    color: #fff
}

@media (min-width:1000px) {
    .inscription {
        font-size: 20px
    }
}

@keyframes expandOval {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0
    }

    100% {
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes contractOval {
    0% {
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0
    }
}

button {
    padding: 1vw;
    outline: 0;
    border: 1px solid var(--matrix-letter-color);
    background: linear-gradient(to right, var(--rune-color) 1%, transparent 30%, transparent 70%, var(--rune-color) 100%);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .2vw;
    transition: .2s;
    border-radius: 2vw;
    cursor: pointer;
    bottom: 4vw;
    right: 4vw;
    z-index: 10;
    font-size: 2vw
}

button:hover {
    color: #fff;
    box-shadow: inset 0 0 5px var(--rune-color), 0 0 5px 2px var(--rune-color)
}

button:before {
    content: "";
    left: -4em;
    width: 4em;
    height: 100%;
    top: 0;
    transition: transform .4s ease-in-out;
    background: linear-gradient(to right, transparent 1%, var(--rune-color) 40%, var(--rune-color) 60%, transparent 100%)
}

button:hover:before {
    transform: translateX(15em)
}

@media (min-width:800px) {
    #button {
        font-size: .5em;
        padding: 2vw 3.6vw
    }
}

.rules-container {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    color: #fff;
    font-size: .7em;
    line-height: 1;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid var(--matrix-letter-color);
    box-shadow: 0 0 10px #181c1f;
    max-height: 55vh;
    max-width: 70vw
}

.rules-container p {
    margin-bottom: 0
}

.rules-container::-webkit-scrollbar-track {
    background-color: var(--matrix-letter-color)
}

.rules-container::-webkit-scrollbar-thumb {
    background-color: var(--rune-color);
    border-radius: 10px
}

.rules-container::-webkit-scrollbar {
    width: 4px
}