html {
        font-size: 1vw;
    }

    body {
        background-color: rgb(0 0 0 / 10%);
        background-image: radial-gradient(gray 1px, transparent 0);
        background-blend-mode: multiply;
        background-repeat: repeat;
        background-size: 5px 5px;
        background-position: 0px 0px;

        display: block;
        margin: 0px;
    }

    .main {
        display: block;
        left: 50%;
        transform: translateX(-50%);

        margin-top: 1%;
        height: 99vh;
        padding: 3vh 19px;
        width: 30vw;
        position: relative;

        background-origin: border-box;
        background-color: beige;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        box-shadow: -5px 3px 3px rgb(20 20 20 / 40%);
    }

    @media only screen and (orientation:portrait) {
        .main { width: 80vw; }
        html { font-size: 4vw; }
    }

    .bar {
        height: 1.5em;
        font-size: 0.9em;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        border: solid grey;
        border-width: 1px 0px;
    }

    .bar > a {
        padding: 0 0.6em;
        text-decoration: none;
    }

    h1 {
        margin: -0.26em 0;
        font-size: 275%;
        text-shadow: 3px 0px 0 beige,
                     -3px 0 0 beige;
    }

    .lang {
        font: 0.9rem sans-serif;
        position: absolute;
        bottom: 1%;
        left: 50%;
        transform: translateX(-50%);
    }