/*
this is a css document. You edit how
things actually look on the page, and 
even where they're positioned.
you get things by going .class,
where class is the name you gave them
in the html doc.

IMPORTANT DETAILS
You can change the font of anything by finding where
ive referenced the class of it, and changing the 
font-family attribute. It gives you options if you
re-type font-family :)

*/

.body {
    margin: 0;
    position: relative;
    background-color: rgba(188,245,255,255);
    font-family: 'Noto Sans JP', sans-serif;
}

/* here im making it so it resisez nice,
    or at least im trying to */

@media (min-aspect-ratio: 16/9) 
{
    .body 
    {
        width: 100vw;
        height: calc(100vw * 9 / 16);
        overflow-x: hidden;
    }

    .intro-text .text
    {
        font-size: 3vw;
    }

    .input
    {
        width: 12vw;
        height: 4vh;
    }

    .label1,
    .label2
    {
        font-size: 2vh;
    }

}

@media (max-aspect-ratio: 16/9) 
{
    .body 
    {
        width: calc(100vh * 16 / 9);
        height: 100vh;
        overflow-y: hidden;
    }

    .intro-text .text
    {
        font-size: 3vh;
    }

    .input
    {
        height: 4vh;
        width: 12vw;
    }

    .label1,
    .label2
    {
        font-size: 2vh;
    }
} 

.backgroundImage 
{
    height: 100%;
    width: 100%;
    display: block;

    pointer-events: none;
}

/* intro text time */
.intro-text
{
    position: absolute;

    font-family: monospace;
    font-size: x-large;

    top: 0%;
    left: 2%;
    width: 60vw;
    height: 25vh;
}



/* input box time */

.label1
{
    position: absolute;
    top: 27%;
    left: 3%;

    font-family: monospace;

    z-index: 102;
}

.paragraphs
{
    position: absolute;
    top: 30%;
    left: 3%;

    font-family: monospace;

    border-color: aqua;
    border-width: 4px;
    border-style: groove;
    background-color: transparent;

    z-index: 102;
}

.label2
{
    position: absolute;
    top: 37%;
    left: 3%;

    font-family: monospace;

    z-index: 102;
}

.sentences
{
    position: absolute;
    top: 40%;
    left: 3%;

    font-family: monospace;

    border-color: aqua;
    border-width: 4px;
    border-style: groove;
    background-color: transparent;

    z-index: 102;
}

.button
{
    position: absolute;
    top: 47%;
    left: 3%;

    font-family: monospace;

    border-color: aqua;
    border-width: 4px;
    border-style: groove;
    background-color: transparent;

    z-index: 102;
}

.button:hover
{
    cursor:pointer;
}

/* output box time */
.output
{
    position: absolute;

    border-width: 4px;
    border-color: aqua;
    border-style: groove;
    background-color: rgba(0, 149, 255, 0.164);

    top: -6%;
    width: 40%;
    height: 50%;

    margin-left: 20%;
    margin-right: 20%;
    margin-top: 20%;
    margin-bottom: 20%;

    overflow: auto;
    overflow-wrap:break-word;
}

.output .text
{
    font-size: medium;
    font-family:verdana;
}