/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);


body {
    margin-top: 4em;
    padding: 5em;
    color: #f1f1f1;
}

/* Cursor */
#cursor{
    position: relative;
    width: 2vw;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 5vh;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}
/* Animation */
.typewriter-animation {
    font-family: 'Anonymous Pro', monospace;
    animation:
            typewriter 2s steps(20) 1s 1 normal both,
            blinkingCursor 500ms steps(50) infinite normal;
}
@keyframes typewriter {
    from { width: 0; }
    to { width: 26%; }
}
@keyframes blinkingCursor{
    from { border-right-color: rgba(255,255,255,.75); }
    to { border-right-color: transparent; }
}

/* Loader */

.tetrominos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-112px, -96px);
}

.tetromino {
    width: 96px;
    height: 112px;
    position: absolute;
    transition: all ease 0.3s;
    background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

.box1 {
    animation: tetromino1 1.5s ease-out infinite;
}

.box2 {
    animation: tetromino2 1.5s ease-out infinite;
}

.box3 {
    animation: tetromino3 1.5s ease-out infinite;
    z-index: 2;
}

.box4 {
    animation: tetromino4 1.5s ease-out infinite;
}


@keyframes tetromino1 {
    0%, 40% {
        /* compose logo */ /* 1 on 3 */ /* L-shape */
        transform: translate(0, 0);
    }
    50% {
        /* pre-box */
        transform: translate(48px, -27px);
    }
    60%, 100% {
        /* box */ /* compose logo */
        transform: translate(96px, 0);
    }
}
@keyframes tetromino2 {
    0%, 20% {
        /* compose logo */ /* 1 on 3 */
        transform: translate(96px, 0px);
    }
    40%, 100% {
        /* L-shape */ /* box */ /* compose logo */
        transform: translate(144px, 27px);
    }
}
@keyframes tetromino3 {
    0% {
        /* compose logo */
        transform: translate(144px, 27px);
    }
    20%, 60% {
        /* 1 on 3 */ /* L-shape */ /* box */
        transform: translate(96px, 54px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(48px, 27px);
    }
}
@keyframes tetromino4 {
    0%, 60% {
        /* compose logo */ /* 1 on 3 */ /* L-shape */ /* box */
        transform: translate(48px, 27px);
    }
    90%, 100% {
        /* compose logo */
        transform: translate(0, 0);
    }
}

.div_sh{

}

.svg_enter{
    position: absolute;
    right: 10%;
    bottom: 5%;
    width: 10%;
}
.sh_text{
    position: absolute;
    right: 10%;
    bottom: 25%;
    font-family: 'Anonymous Pro', monospace;
}