@font-face {
    font-family: DeterminationMono;
    src: url(https://toadsworthlp.github.io/ThisIsChujin/assets/fonts/DeterminationMono.otf);
}

body {
    background-color: black;
    margin: 0;
}

.portrait-wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 6vh;
    display: grid;
    width: 35%;

    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.portrait-layer {
    width: 100%;

    grid-column: 1;
    grid-row: 1;
}

@keyframes tape-overlay-animation {
    100% { background-position: 2700%; }
}

.tape-overlay {
    background: url("https://toadsworthlp.github.io/ThisIsChujin/assets/static/tape-overlay.png") left center;
    background-size: 2700%;
    animation: tape-overlay-animation 3s steps(27) infinite;
}

@keyframes static-overlay-animation {
    100% { background-position: 500%; }
}

.static-overlay {
    width: 100%;
    height: 100%;

    background: url("https://toadsworthlp.github.io/ThisIsChujin/assets/static/static-overlay.png") left center;
    background-size: 500%;
    animation: static-overlay-animation 0.3s steps(5) infinite;
}

@keyframes static-overlay-wrapper-animation {
    0%      { opacity: 1; }
    75%     { opacity: 1; }
    100%    { opacity: 0; }
}

.static-overlay-wrapper {
    animation: static-overlay-wrapper-animation 0.5s forwards ease;
}

.end-static-overlay-wrapper {
    animation: static-overlay-wrapper-animation 0.25s reverse forwards ease;
}

.text-wrapper {
    margin-top: 6vh;
    margin-left: 20vw;
    margin-right: 20vw;
    text-align: center;

    color: white;
    font-family: DeterminationMono, monospace;
    font-size: 4vh;
}

.bottom-info {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    font-family: DeterminationMono, monospace;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.make-your-own {
    margin: 8px;
    align-self: end;

    font-size: 3vh;
}

.make-your-own a {
    color: #505050;
}

.credits {
    display: flex;
    flex-direction: column;
    margin: 8px;
    color: #505050;

    font-size: 2vh;
}

.credits a {
    color: #505050;
}

.control-buttons {
    opacity: 0.5;

    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    display: flex;
    justify-content: flex-end;
}

.toggle-button {
    display: block;
    height: 100%;
    width: 2.75rem;
    margin-right: 8px;

    color: white;
}

.toggle-button input {
    margin: 0;
    position: absolute;
    opacity: 0;
}

.toggle-button-icon {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 100%;
}

.replay-container {
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;

    color: white;
    font-family: DeterminationMono, monospace;
    font-size: 4vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.replay-icon {
    margin-top: 16px;
    width: 15%;
}

@media (orientation: portrait) {
    .portrait-wrapper {
        width: 70%;
    }

    .text-wrapper {
        margin-left: 5vw;
        margin-right: 5vw;

        font-size: 4vw;
    }

    .make-your-own {
        font-size: 3vw;
    }

    .credits {
        font-size: 2vw;
    }
}