h1
{
    font-family: 'amorria', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant: small-caps;
    font-size: 8rem;
    font-weight: 500;
    text-align: center;
    /* visibility: hidden; */
}

@font-face {
    font-family: 'amorria';
    src: url('./media/amorria.ttf') format('truetype');
}

@font-face {
    font-family: 'nihonium';
    src: url('./media/Nihonium113.ttf') format('truetype');
}







#main_page .logo
{
    margin: 4rem 0 1rem 0;
    max-height: 70svh;
    max-width: 70svh;
    width: min(80svw, 80svh);
}

#main_page button
{
    font-size: 1.5rem;
    font-family: 'nihonium', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color: white;
    text-shadow: .065em .065em 0 black, 0 0 .1em black;
    cursor: pointer;
    transition: filter .35s ease;
}

.startpage button:hover
{
    filter: brightness(125%);
}

.startpage button
{
    aspect-ratio: 4;
    width: 5em;
    border: 0;
    outline: 0;
}

.startpage button.green { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%23106f2f" stroke="%23106f2f" x="1" y="5" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2340ef6f" stroke="%23208f3f" x="1" y="1" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2300000040" x="4" y="24" width="192" height="18"></rect></svg>'); }
.startpage button.yellow { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%236f6210" stroke="%236f6210" x="1" y="5" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%23efcf40" stroke="%238f7b20" x="1" y="1" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2300000040" x="4" y="24" width="192" height="18"></rect></svg>'); }
.startpage button.purple { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%2367106f" stroke="%2367106f" x="1" y="5" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%23c640ef" stroke="%2384208f" x="1" y="1" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2300000040" x="4" y="24" width="192" height="18"></rect></svg>'); }
.startpage button.blue { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%2310396f" stroke="%2310396f" x="1" y="5" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%234089ef" stroke="%2320668f" x="1" y="1" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2300000040" x="4" y="24" width="192" height="18"></rect></svg>'); }
.startpage button.red { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50"><rect fill="%236f1026" stroke="%236f1026" x="1" y="5" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%23ef4063" stroke="%238f2036" x="1" y="1" width="198" height="44" rx="2" stroke-width="2"></rect><rect fill="%2300000040" x="4" y="24" width="192" height="18"></rect></svg>'); }

#main_page
{
    height: 100%;
}

.startpage
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
}

#main_page .startpage button
{
    width: min(7em, 90svw);
    font-size: min(2.5rem, 8svw);
    margin-bottom: .75rem;
}

.startpage > div
{
    display: flex;
    flex-direction: column;
}

.startpage > img
{
    width: 60rem;
}


#titlescreen
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: url('media/background.webp');
    background-size: cover;
    background-position: 50% 50%;
    overflow-y: scroll;
}


.turn_device, .invalid_device
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100svw;
    height: 100svh;
    z-index: 999;
    background: #0009;
    backdrop-filter: blur(10px);
}

.turn_device h1, .invalid_device h1
{
    font-size: min(6svw, 6svh);
    margin-bottom: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    text-align: center;
    font-variant: normal;
    font-weight: 700;
}

.turn_device svg, .invalid_device svg
{
    width: min(24svw, 24svh);
}
@media only screen and (orientation: landscape) { .turn_device { display: none; } }
@media only screen and (max-width: 960px) { .startpage > img { width: 100%; } }