:root {
    --bg-hsl: hsl(150,20%,20%);
    /* --text-color-body: hsl(0,0%,100%);
    --text-color-h1: hsl(0,0%,80%); */
    --text-color-body: hsl(0,0%,10%);
    --text-color-h1: hsl(0,0%,10%);

    /* --controlsContainer01-bghsl: hsl(168, 100%, 91%, 0.5); */

    --canvasHeight:14vw;
    --h1Size: 5vw;
    --h2Size: calc(var(--h1Size) * 0.5);
    --h3Size: calc(var(--h1Size) * 0.5);
    --h4Size: calc(var(--h1Size) * 0.5);

}


html {
    /* background-color: black; */
    /* background-color: hsl(130, 20%, 20%, 1.0); */
    /* background-color: var(--bg-hsl); */
    /* position:fixed; */
    height:100lvh;
    width:100%;
    background-color: white;



}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* height:150lvh; */
    height:100vh;
    /* position:fixed; */
    font-family: "Alumni Sans Pinstripe", serif;
    overflow-x:hidden;
    /* overflow-y:auto; */
    /* overflow-y:scroll; */
    overflow-y:hidden;

    /* color:hsl(130, 0%, 80%, 1.0); */
    color:var(--text-color-body);

    background-color: white;

    /* padding:1rem; */
}

* {
    box-sizing: border-box;
}




#siteContainer {
    display:flex;
    position:fixed;
    justify-content: center;
    align-items: center;
    top:0%;
    bottom:0lvh;
    height:100lvh;
    width:100%;
    /* background-color: hsl(0, 0%, 90%, 1.0); */
    /* background-color: hsl(130, 20%, 20%, 1.0); */
    /* background-color: var(--bg-hsl); */
    overflow:hidden;

    /* padding:2rem; */

}





#clickhereText {
    text-align: center;
    position:absolute;
    z-index: 1;
    top:30%;
    left:69%;
    font-family: "Alumni Sans Pinstripe", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    margin:0;
    user-select:none;
}

#mute {
    position:relative;
    z-index: 0;
    top:3px; /* this is weird but centered it better... */
}


#controlsContainer01 {
    display:flex;
    position:fixed;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    padding:5vh 10vw;
    border-radius:1rem;
    background-color:var(--controlsContainer01-bghsl);
}

#controlRow01 {
    display:grid;
    /* grid-template-rows:200px 200px; */
    /* grid-template-columns:200px 200px; */
    /* grid-template-rows: 400px; */
    grid-template-columns: repeat(5,1fr);
    /* grid-template-rows: repeat(5,1fr); */

    justify-items:start;
    align-items:start;
    row-gap:10px;

    display:flex;
    position:relative;
    flex-direction: column;    
    justify-items:start;
    align-items:center;

}

#controlRow02 {
    display:grid;
    /* grid-template-rows:150px; */
    /* grid-template-columns:200px 200px; */
    /* grid-template-columns:1fr 1fr; */
    grid-template-columns:auto auto;
    /* grid-template-rows:auto auto; */
    justify-items:center;
    align-items:center;
    display:grid;
    position:relative;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    justify-items:center;
    align-items:center;
    /* border: 1px solid gray; */
    border-radius: 0.5rem;
    border-left: none;
    /* border-right: none; */
}

.deviceContainer {
    display:flex;
    flex-direction: column;
    border: solid 1px var(--deviceContainer-hsl);
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-radius: 5px;
    align-items:flex-start;
}

#controlFlex01 {
    display:flex;
    flex-direction: row;
    align-items:center;
    position:relative;
    top:0;
    left:0;
    z-index:1;
    width:calc(var(--canvasHeight)*6);
    justify-content: space-between;
}

#controlFlex02 {
    display:flex;
    flex-direction: row;
    align-items:center;
    width:calc(var(--canvasHeight)*6);

}

#controlFlex03 {
    display:flex;
    flex-direction: row;
    /* flex-direction: column; */
    align-items:center;
}

.controlViz {
    margin:0 1rem;
    width:200px;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    z-index:0;
    width:calc(var(--canvasHeight) * 2);
    height:var(--canvasHeight);
    margin:0;
}

.controlViz02 {
    width:calc(var(--canvasHeight) * 2);
    height:var(--canvasHeight);
    margin:0 8px;
}

#canvasViz01 {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    height:100vh;
    width:100vw;
    padding:0rem;
}

#canvas_setTheme {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
    margin:1vh;
    width:4vh;
    height:4vh;
    cursor:pointer;
}



#presetsContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* position: relative; */
    /* top: 0;
    left: 0; */
    /* z-index: 1; */
    /* width: calc(var(--canvasHeight)*6); */
    /* justify-content: space-between; */
}

.toggle {
    cursor: pointer;
    height: calc(var(--canvasHeight)*0.50);
}




canvas {
    -webkit-tap-highlight-color: transparent;
    user-select:none;
}

.dial {
    position:relative;
    z-index: 1;
    width:var(--canvasHeight);
    height:var(--canvasHeight);
}

.canvasAndLabel{
    display: flex;
    flex-direction: column;
    align-items:center;
    /* width:100%; */
}







#versionNumber {
    /* font-size: var(--h3Size); */
    font-size:0.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    user-select:none;
    margin:0.3rem;
    opacity:0.3;
}

#briangawliktag {
    /* font-size: calc( var(--h1Size) * 0.25 ); */
    font-size:1rem;
    position: fixed;
    left:0;
    top: 0;
    margin:0.3rem 0.6rem;
    user-select:none;
    text-decoration:none;
    color:hsl(40, 0%, 50%, 0.7);
}

h1 {
    text-align: center;
    font-family: "Alumni Sans Pinstripe", serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--h1Size);
    user-select:none;
    margin:0;
    /* color:hsl(130, 0%, 60%, 1.0); */
}

h2 {
    text-align: center;
    font-family: "Alumni Sans Pinstripe", serif;
    font-weight: 500;
    font-style: normal;
    font-size: var(--h2Size);
    margin:0 0 0 0;
    user-select:none;
}

h3 {
    text-align: center;
    font-family: "Alumni Sans Pinstripe", serif;
    font-weight: 600;
    font-style: normal;
    font-size:var(--h3Size);
    margin:0 0 0 0;
    user-select:none;
}

.emptyh3 {
    height: min(1vw,1rem);
    /* height: 1rem; */
    /* width: */
    display:inline-block;
}

h4 {
    text-align: center;
    font-family: "Alumni Sans Pinstripe", serif;
    font-weight: 400;
    font-style: normal;
    opacity:50%;
    font-size:var(--h4Size);
    margin:0 0 0 0;
    user-select:none;
    letter-spacing: 2px;
}


#headerSubheader {
    display:flex;
    flex-direction:column;
}





/* @media only screen and (min-width: 500px) { */
@media only screen and (min-aspect-ratio: 0.67) {

    :root {
        /* --canvasHeight:6vh;
        --h1Size: 6vh;
        --h2Size: calc(var(--h1Size) * 0.5);
        --h3Size: calc(var(--h1Size) * 0.2);
        --h4Size: calc(var(--h1Size) * 0.2); */

        --canvasHeight:6vh;
        --h1Size: calc(var(--canvasHeight) * 0.67);
        --h2Size: calc(var(--h1Size) * 0.5);
        --h3Size: calc(var(--h1Size) * 0.5);
        --h4Size: calc(var(--h1Size) * 0.5);
        
    }

    #controlsContainer01 {
        padding: 10vh 10vh;
    }

    #controlFlex01 {
        width:calc(var(--canvasHeight)*6);
    }

    #canvas_setTheme {
        margin:1vh;
        width:4vh;
        height:4vh;
    }
}


/* @media only screen and (min-width: 1025px) and (min-aspect-ratio 1) { */
@media only screen and (min-aspect-ratio: 1.5) {

    :root {
        --canvasHeight:10vh;
        --h1Size: calc(var(--canvasHeight) * 7/8);
        --h2Size: calc(var(--h1Size) * 0.5);
        --h3Size: calc(var(--h1Size) * 0.2);
        --h4Size: calc(var(--h1Size) * 0.2);
    }

    #controlsContainer01 {
        /* flex-direction: column; */
        flex-direction: row-reverse;
        column-gap:100px;
        align-items:start;
        padding: 4vw 20vw;
    }

    #controlRow01 {
        column-gap: calc(var(--canvasHeight) * 0.5);
        flex-direction: row;
        align-items:start;
    }
    
    #controlRow02 {
        row-gap:30px;
    }

    .deviceContainer {
        border: solid 1px var(--deviceContainer-hsl);
        border-left:none;
        border-right:none;
        border-radius: 5px;
        align-items:center;
        padding: calc(var(--canvasHeight) * 0.2)
    }
    
    #controlFlex01 {
        display:flex;
        position:relative;
        flex-direction: column;
        align-items:center;
        justify-content: flex-start;
        /* height:calc(var(--canvasHeight)*6); */
        height:auto;
        width:auto;
    }

    .controlViz {
        position:static;
        width:calc(var(--canvasHeight) * 1);
        height:calc(var(--canvasHeight) * 0.5);
        margin:0;
    }

    #canvas_setTheme {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 0;
        margin:1vw;
        width:2vw;
        height:2vw;
        cursor:pointer;
    }

    .controlViz02 {
        width:calc(var(--canvasHeight) * 1);
        height:calc(var(--canvasHeight) * 0.5);
        margin:0 8px;
    }

    #canvas_setTheme {
        margin:1vh;
        width:4vh;
        height:4vh;
    }

    h2{
        opacity:0.8;
        margin:0;
    }

    h3{
        margin:5px 0 0 0;
    }

}