*{
    box-sizing:border-box;
}
html, body { min-height:100dvh; }

body{
    margin:0;
    background:white;
    font-family:Arial, sans-serif;
}
#leftTop{
    position:absolute;
    left:0;
    top:0;
    width:46%;
    height:42%;
    background:#c8daf8;
    border:3px solid black;
    text-align:center;
}
#leftBottom{
    position:absolute;
    left:0;
    top:42%;
    width:46%;
    height:58%;
    background:#c9ffd5;
    border:3px solid black;
    box-sizing:border-box;
    padding:30px;
}
#rightTop{
    position:absolute;
    left:46%;
    top:0;
    width:54%;
    height:15%;
    border:3px solid black;
    background:white;
    text-align:center;
}
#rightMiddle{
    position:absolute;
    left:46%;
    top:15%;
    width:54%;
    height:75%;
    border:3px solid black;
    background:white;
}
#rightBottom{
    position:absolute;
    left:46%;
    top:90%;
    width:54%;
    height:10%;
    border:3px solid black;
    background:#c9ffd5;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
}

#rightMiddle{
    display:flex;
    justify-content:center;
    align-items:center;
}

#sketch{
    width:100%;
    height:100%;
}


canvas {
    display: block;
}
/* Left blue box */
#leftTop h1{
    font-size: clamp(0.1rem, 4vw, 5rem);
}
#leftTop h2{
    font-size: clamp(0.1rem, 3vw, 3.5rem);
}
#leftTop p{
    font-size: clamp(0.1rem, 2vw, 2.4rem);
}
/* Left green box */
#leftBottom h2{
    font-size: clamp(0.1rem, 2vw, 2.5rem);
}
#leftBottom p{
    font-size: clamp(0.01rem, 2vw, 2rem);
}
/* Right title */
#rightTop h1{
    font-size: clamp(0.1rem, 3vw, 4rem);
}
/* Bottom controls */
#rightBottom button{
    font-size: clamp(0.01rem, 1.8vw, 2rem);
}
#rightBottom label{
    font-size: clamp(0.01rem, 1.8vw, 2rem);
}
#volVal{
    font-size: clamp(0.01rem, 1.8vw, 2rem);
}


.controls {
    display: inline-flex;
    flex-wrap: wrap;          
    justify-content: center;
    align-items: center;
    gap: 12px;

    background: rgba(255,255,255,0.75);
    padding: 8px 12px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    margin: 0;
}

@media (orientation: portrait) and (max-width: 700px) {

    .controls {
        flex-direction: column;
        width: 90%;
        margin: 8px auto;
    }

    .controls > * {
        width: 100%;
    }

    .controls button {
        padding: 10px;
    }

    .controls label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    #vol {
        width: 100%;
    }

    #leftTop,
    #leftBottom,
    #rightTop,
    #rightMiddle,
    #rightBottom {
        position: static;
        width: 100%;
        left: auto;
        top: auto;
    }

    #rightMiddle {
        aspect-ratio: 1 / 1;
        min-height: 400px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {

    body {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    /* LEFT SIDE */

    #leftTop {
        height: 30%;
    }

    #leftBottom {
        top: 30%;
        height: 70%;

        overflow-y: auto;
        padding: 12px;
    }

    /* RIGHT SIDE */

    #rightTop {
        height: 12%;
    }

    #rightMiddle {
        top: 12%;
        height: 68%;

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

        overflow: hidden;
    }

    #rightBottom {
        top: 80%;
        height: 20%;

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

        padding: 4px;
    }

    .controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        gap: 6px;
        margin: 0;

        width: 100%;
    }

    /* Smaller text */

    #leftTop h1 {
        font-size: 1.5rem;
        margin: .2rem 0;
    }

    #leftTop h2 {
        font-size: 1rem;
        margin: .2rem 0;
    }

    #leftTop p {
        font-size: .8rem;
        margin: .2rem 0;
    }

    #leftBottom h2 {
        font-size: 1rem;
        margin: .2rem 0;
    }

    #leftBottom p {
        font-size: .75rem;
        line-height: 1.2;
    }

    #rightTop h1 {
        font-size: 1.2rem;
        margin: .2rem 0;
    }

    #rightBottom button,
    #rightBottom label,
    #volVal {
        font-size: .75rem;
    }

    #vol {
        width: 90px;
    }
}