.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
}