#mainPage>h2 {
    text-align: center;
    font-size: 8vw;
    margin: 0.3em 0;
}

#codeSection,
#sandboxButtons,
#mainPage>div {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

#mainPage textarea, #mainPage iframe {
    border: black 0.3em solid;
}

#mainPage textarea {
    resize: none;
    font-size: 1.2em;
    width: 80vw;
    height: 60vw;
    background-color: #eee;
    font-family: monospace;
    padding: 0.5em;
    display: block;
    overflow: auto;
}

#mainPage>div {
    flex-direction: column;
    gap: 1em;
    margin: 1.5em;
}

#codeSection {
    flex-direction: column;
}

#sandboxOutput {
    aspect-ratio: 9 / 16;
    width: 100%;
    height: auto;
}

#sandboxButtons button {
    background-color: #aadddd;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0.3em;
    margin: 0.5em 0.2em;
}

#mainPage>section {
    width: fit-content;
}

#sandboxButtons button:hover {
    background-color: #ffaabb;
}

#bodyContent {
    margin: 1em auto;
    font-size: 5vmin;
    padding: 0 1em;
}

h3 {
	text-align: center;
	margin-bottom: 0.5em;
}

#bodyContent>p {
    margin: 0.1em 0;
}

@media all and (min-width: 768px) {
    #mainPage>h2 {
        font-size: 3vw;
    }

    #bodyContent {
        font-size: 3vmin;
    }

    #codeSection {
        flex-direction: row;
    }

    #mainPage textarea {
        width: 35vw;
        height: 30vw;
    }

    #sandboxOutput {
        aspect-ratio: 16 / 9;
        width: 75%;
    }
}