/*
    font-family: 'Overpass', sans-serif;
    font-family: 'Open Sans', sans-serif;
*/

@font-face {
    font-family: "Binary";
    src: url("binxchr.ttf");
}


html {
    scroll-behavior: smooth;
}

body{
    background-color: #121212;
    min-height: 100%;
    height: 100%;
}



/* 3D Cube */
.wrap {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.cube {
    margin: auto;
    position: relative;
    margin-top: 32%;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
}

.cube > div {
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 100%;
    opacity: 0.9;
    background-color: #000;
    border: solid 1px #eeeeee;
    color: #ffffff;
    overflow-wrap: anywhere;
    overflow: hidden;
}
.front {
    transform: translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}

.left {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}

.top {
    transform: rotateX(-270deg) translateY(-100px);
    transform-origin: top center;
}

.bottom {
    transform: rotateX(270deg) translateY(100px);
    transform-origin: bottom center;
}

@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube {
    animation: rotate 20s infinite linear;
}