@font-face {
    font-family: Kanit;
    src: url("../ressources/fonts/Kanit/Kanit-Regular.ttf");
}

@font-face {
    font-family: Housepipes;
    src: url("../ressources/fonts/housepipes-font/HousepipesNormal-LVB5.ttf");
}


body {
    margin: 0;
    width: 100vw;
    height: 100vh;

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

    background-color: rgb(57, 221, 207);

    overflow: hidden;
}

#screens {
    width: 100%;
    background-color: white;
    display: flex;

    --border: 4px rgb(14, 181, 178) solid;
    --screens_aspect_ratio: 4/3;
}


/* TOP SCREEN */

#top_screen {
    flex: 1;
    aspect-ratio: var(--screens_aspect_ratio);

    border: var(--border);
}

#top_screen h1 {
    display: flex;

    position: relative;
    top: 30%;
}

#title_first_part {
    display: block;
    flex: 3;

    text-align: right;
    font-size: 18pt;
    font-family: Kanit;

    padding-top: 0.9cm;
    padding-bottom: auto;
}

#title_second_part {
    display: block;
    flex: 5;

    font-size: 70pt;
    font-family: Kanit;
}


/* BOTTOM SCREEN */

#bottom_screen {
    flex: 1;
    aspect-ratio: var(--screens_aspect_ratio);

    border-right: var(--border);
    border-top: var(--border);
    border-bottom: var(--border);

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

#text {
    width: 60%;
    text-align: center;
    
    font-family: Housepipes;
}

#text h2 {
    font-size: 30pt;
}

#text p {
    font-size: 15pt;
}

#text a {
    display: block;
}

#credits_warning_link {
    text-decoration: none;
}

#continue_link {
    color: black;
    text-decoration: none;

    margin-top: 0.5cm;
}

/* Stylus */
#stylus {
    height: min(50vh, 50vw);
    position: absolute;

    left: 95%;
    top: 50%;
    transform: rotate(32deg);
}