/* change the font-size based on the screen width */
:root {
    font-size: 12px;
}

@media screen and (width > 800px) {
    :root {
        font-size: 13px;
    }
}

@media screen and (width > 850px) {
    :root {
        font-size: 14px;
    }
}

@media screen and (width > 900px) {
    :root {
        font-size: 15px;
    }
}

/*
What should the biggest font be?

@media screen and (width > 950px) {
    :root {
        font-size: 15px;
    }
}

@media screen and (width > 1000px) {
    :root {
        font-size: 16px;
    }
}
*/

:root {
    /* --fontSize: 15px; */
    --marginTop: 30px;
    --dark-bg: rgba(15, 15, 15, 0.95);
    --WilliamsGreen: #90FFB0;
    --WilliamsYellow: #E0FF90;
    /* --WilliamsBlue: rgba(0, 0, 224, 1); */
    /* --WilliamsBlue1: rgba(10, 66, 224, 1); */
    /* --WilliamsBlue2: rgba(20, 80, 224, 1); */
    /* --WilliamsBlue3: rgba(30, 100, 224, 1); */
    --WilliamsBlue: rgba(220, 220, 255, 1);
    --WilliamsBlue1: rgba(180, 180, 255, 1);
    --WilliamsBlue2: rgba(160, 160, 255, 1);
    --WilliamsBlue3: rgba(140, 140, 255, 1);
    --bgWilliamsBlue: rgba(0, 0, 224, 0.5);
    --bgWilliamsBlue1: rgba(20, 64, 128, 0.5);
    --bgWilliamsBlue2: rgba(40, 80, 128, 0.5);
    --bgWilliamsBlue3: rgba(60, 100, 128, 0.5);
    --spacing: 200px;
    --spacing_s1: 100px;
    --spacing_s2: 50px;

    font-family: monospace, futura, sans-serif;
    font-weight: 400;

    --widget-height: 20px;
    --title-height: calc(var(--widget-height) + var(--spacing) * 1.25);
    --name-width: 45%;
    --slider-knob-width: 2px;
    --slider-input-width: 27%;
    --color-input-width: 27%;
    --slider-input-min-width: 45px;
    --color-input-min-width: 45px;
    --folder-indent: 7px;
    --widget-padding: 0 0 0 3px;
    --widget-border-radius: 2px;
    --checkbox-size: calc(0.75 * var(--widget-height));
}


* {
    margin: 0;
}

/* 
.column {
    float: left;
    width: 50%;
} */

/* main {
    width: 100vw;
    height: 100vh;
    color: white;
    z-index: 99;
    position: absolute;
    padding: 0px 0px;
} */

body {
    /* background-color: rgb(0, 32, 24); */
    /* padding:10px;
    padding-left: 20px; */
    /*font-size: 15px; */
}


h1 {
    /*
    color: var(--WilliamsBlue1);
    background-color: var(--bgWilliamsBlue1);
    */

    color: rgb(0, 255, 192);
    background-color: rgb(0, 32, 24);
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    margin-top: 80px;
    padding: 5px;
}

p {
    color: rgb(0, 255, 192);
    background-color: rgb(0, 32, 24);
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    margin-top: var(--marginTop);
    padding: 5px;
    /* font-size: var(--fontSize); */
    text-wrap: wrap;
}

ul {
    color: rgb(0, 255, 192);
    background-color: rgb(0, 32, 24);
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    margin-top: 30px;
    padding: 5px;
    font-size: 16px;
    text-wrap: wrap;
    text-align: left;
}

a {
    color: rgb(192, 255, 240);
    /* background-color: rgb(0, 64, 0); */
    padding: 5px;
    border-radius: 5px;
}

footer {
    margin: 400vh 0vw 0vh 0vw;
    padding-top: 2vh;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-bottom: 2vh;
    font-size: 2.5vh;
    font-weight: 100;
    font-style: normal;
    text-align: center;
    color: var(--WilliamsBlue1);
    background-color: var(--bgWilliamsBlue1);
    /* grid-column: 1/span 3; */
}

nav {
    font-size: 4vw;
    font-style: normal;
    font-weight: 100;
    line-height: 1.5;
    text-align: right;
    color: var(--WilliamsBlue2);
}

WHS_sub {
    color: red;

    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
    font-size: 75%;

    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
    line-height: 0;

    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
    position: relative;

    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
    vertical-align: baseline;

    /* Move the subscripted text down, but only half as far down as the superscript moved up */
    bottom: -0.25em;
}

div#start {
    width: 100vw;
    height: 1vh;
    /* background: var(--WilliamsBlue); */
}

div#end {
    width: 100vw;
    height: 1vh;
    /* background: var(--WilliamsBlue); */
}

emphasis {
    color: var(--WilliamsBlue3);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* outline: none; */
}

/*
input[type=checkbox]:checked:before {
    appearance: none;
    -webkit-appearance: none;
    content: "✓";
    font-size: 20;
    line-height: 20;
}
*/

/* .wgui .controller.option */

.noTextSelection {
    user-select: none;
    -webkit-user-select: none;

    cursor: pointer;
}