@font-face {
    font-family: "tegaki";
    src: url(assets/mitimasu.ttf);
}

@font-face {
    font-family: "dot";
    src: url(assets/x10y12pxDonguriDuel.ttf);
}

* {
    /* 余白を削除 */
    margin: 0;
    padding: 0;

    /* サイズ調整を直感的に */
    box-sizing: border-box;

    /* ドットをきれいに表示する */
    image-rendering: pixelated;

    /* 選択とかできないように */
    /* pointer-events: none; */
    user-select: none;
    touch-action: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    width: 100%;
    height: 100%;
}

body {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #111;

    color: azure;
    font-family: serif;
    font-size: 4vh;
}

#container {
    height: 90%;
    aspect-ratio: 16 / 9;

    position: relative;

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

    /* box-shadow: inset 0px 0px 8vh 2vh rgba(255, 255, 255, 0.3); */

    border: #111 solid 0.5vh;

    background-color: white;

    color: #111;

    overflow: hidden;

    & canvas {
        position: absolute;
        height: 100%;
    }
}

/* i-element- で始まるクラス名を持つ要素に適用 */
[class^="i-element-"] {
    position: absolute;

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

img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;
}

#error {
    display: none;
}

/* 横向きの時だけ表示 */
@media screen and (orientation: portrait) {
    #container {
        display: none;
    }
    #error {
        display: flex;
    }
}

.shake {
    animation: shake 0.8s infinite;
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-0.2vh, 0.3vh);
    }
    20% {
        transform: translate(0.3vh, -0.2vh);
    }
    30% {
        transform: translate(-0.3vh, -0.1vh);
    }
    40% {
        transform: translate(0.1vh, 0.3vh);
    }
    50% {
        transform: translate(-0.2vh, -0.3vh);
    }
    60% {
        transform: translate(0.3vh, 0.1vh);
    }
    70% {
        transform: translate(-0.1vh, -0.2vh);
    }
    80% {
        transform: translate(0.2vh, 0.3vh);
    }
    90% {
        transform: translate(-0.3vh, 0.1vh);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}