@font-face {
    font-family: 'Special Elite';
    src: url('SpecialElite-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Londrina Sketch';
    src: url('LondrinaSketch-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


:root {
    height: 100vh;
    margin: 0;

    /*dot paper colors*/
    --dot-paper-color-main: transparent;
    --dot-color-main: rgba(0, 0, 0, 0.243);
    
    --bckgrnd-image: url(../images/paper.jpg);
    --anze-mush-detail: url(../images/anze-mush-detail.svg);
    --notepad: url(../images/notepad.png);
    color: black;
    background-color: antiquewhite;

    /*header stuff*/
    --main-link-text-color: black;
    --button-color: black;

    /*clacky button svgs*/
    --long-clack-button-up: url(../images/long-clack-up.svg);
    --medium-clack-button-up: url(../images/medium-clack-up.svg);
    --short-clack-button-up: url(../images/short-clack-up.svg);

    --long-clack-button-down: url(../images/long-clack-down.svg);
    --medium-clack-button-down: url(../images/medium-clack-down.svg);
    --short-clack-button-down: url(../images/short-clack-down.svg);
    
    /*clacky button backgrounds*/
    --long-clack-button-bckgnd: var(--long-clack-button-up),url(../images/paper.jpg);
    --long-clack-button-down-backgnd: var(--long-clack-button-down),url(../images/paper.jpg);
    background-position:center;

    --medium-clack-button-bckgnd: var(--medium-clack-button-up),url(../images/paper.jpg);
    --medium-clack-button-down-bckgnd: var(--medium-clack-button-down),url(../images/paper.jpg);

    --short-clack-button-bckgnd: var(--short-clack-button-up),url(../images/paper.jpg);
    --short-clack-button-down-backgnd: var(--short-clack-button-down),url(../images/paper.jpg);
    
    --clack-button-bckgnd-repeat: no-repeat;
    --clack-button-bckgnd-size: cover;
    
    /*clacky button text*/
    --clack-button-text-color: black;

    /*main stuff*/
    --text-window-border-color: white;
    --text-window-background: radial-gradient(circle at center, var(--dot-color-main) 0.1rem, var(--dot-paper-color-main) 0), url(../images/paper.jpg);
    --text-window-background-repeat: round, no-repeat;
    --text-window-background-size: 2rem 2rem, cover;
    --list-link-color: black;

    /*inner nav*/
    --inner-nav-text-color: black, white;
    
    /*misc text effects*/
    --text-shadow: #00000066;
    --border-bottom-inner-nav-b: black;
    --realistic-marker-color: #ff6db7;
    --sketch-ballpoint-square-color: darkgreen;
    --sketch-ballpoint-squere-color-blue: darkblue;
    --list-marker: url(../images/marker.svg);
}

[data-theme='light'] {
    /*dot paper colors*/
    --dot-paper-color-main: transparent;
    --dot-color-main: rgba(0, 0, 0, 0.243);
    
    --bckgrnd-image: url(../images/paper.jpg);
    --anze-mush-detail: url(../images/anze-mush-detail.svg);
    --notepad: url(../images/notepad.png);
    color: black;
    background-color: antiquewhite;

    /*header stuff*/
    --main-link-text-color: black;
    --button-color: black;

    /*clacky button svgs*/
    --long-clack-button-up: url(../images/long-clack-up.svg);
    --medium-clack-button-up: url(../images/medium-clack-up.svg);
    --short-clack-button-up: url(../images/short-clack-up.svg);

    --long-clack-button-down: url(../images/long-clack-down.svg);
    --medium-clack-button-down: url(../images/medium-clack-down.svg);
    --short-clack-button-down: url(../images/short-clack-down.svg);
    
    /*clacky button backgrounds*/
    --long-clack-button-bckgnd: var(--long-clack-button-up), url(../images/paper.jpg);
    --long-clack-button-down-backgnd: var(--long-clack-button-down), url(../images/paper.jpg);
    background-position:center;

    --medium-clack-button-bckgnd: var(--medium-clack-button-up),url(../images/paper.jpg);
    --medium-clack-button-down-bckgnd: var(--medium-clack-button-down),url(../images/paper.jpg);

    --short-clack-button-bckgnd: var(--short-clack-button-up),url(../images/paper.jpg);
    --short-clack-button-down-backgnd: var(--short-clack-button-down),url(../images/paper.jpg);
    
    --clack-button-bckgnd-repeat: no-repeat;
    --clack-button-bckgnd-size: cover;
    
    /*clacky button text*/
    --clack-button-text-color: black;

    /*main stuff*/
    --text-window-border-color: white;
    --text-window-background: radial-gradient(circle at center, var(--dot-color-main) 0.1rem, var(--dot-paper-color-main) 0), url(../images/paper.jpg);
    --text-window-background-repeat: round, no-repeat;
    --text-window-background-size: 2rem 2rem, cover;
    --list-link-color: black;

    /*inner nav*/
    --inner-nav-text-color: black, white;
    
    /*misc text effects*/
    --text-shadow: #00000066;
    --border-bottom-inner-nav-b: black;
    --realistic-marker-color: #ff6db7;
    --sketch-ballpoint-square-color: darkgreen;
    --sketch-ballpoint-squere-color-blue: darkblue;
    --list-marker: url(../images/marker.svg);
}

[data-theme='dark'] {
    --bckgrnd-image: url(../images/black-paper.jpg);
    --anze-mush-detail: url(../images/anze-mush-detail-white.svg);
    --notepad: url(../images/notepad-dark.png);
    color: white;
    background-color: black;

    /*dot-paper colors*/
    --dot-paper-color-main: transparent;
    --dot-color-main: rgba(255, 255, 255, 0.616);
   

    /*header stuff*/
    --main-link-text-color: white;
    --button-color: white;

    /*clacky button svgs*/
    --long-clack-button-up: url(../images/long-clack-up-white.svg);
    --medium-clack-button-up: url(../images/medium-clack-up-white.svg);
    --short-clack-button-up: url(../images/short-clack-up-white.svg);

    --long-clack-button-down: url(../images/long-clack-down-white.svg);
    --medium-clack-button-down: url(../images/medium-clack-down-white.svg);
    --short-clack-button-down: url(../images/short-clack-down-white.svg);
    
    /*clacky button backgrounds*/
    --long-clack-button-bckgnd: var(--long-clack-button-up),url(../images/black-paper.jpg);
    --long-clack-button-down-backgnd: var(--long-clack-button-down),url(../images/black-paper.jpg);
    background-position:center;

    --medium-clack-button-bckgnd: var(--medium-clack-button-up),url(../images/black-paper.jpg);
    --medium-clack-button-down-bckgnd: var(--medium-clack-button-down),url(../images/black-paper.jpg);

    --short-clack-button-bckgnd: var(--short-clack-button-up),url(../images/black-paper.jpg);
    --short-clack-button-down-backgnd: var(--short-clack-button-down)url(../images/black-paper.jpg);
    
    --clack-button-bckgnd-repeat: no-repeat;
    --clack-button-bckgnd-size: cover;
    
    /*clacky button text color*/
    --clack-button-text-color: white;

    /*main stuff*/
    --text-window-border-color: black;
    --text-window-background: radial-gradient(circle at center, var(--dot-color-main) 0.1rem, var(--dot-paper-color-main) 0), url(../images/black-paper.jpg);
    --text-window-background-repeat: round, no-repeat;
    --text-window-background-size: 2rem 2rem, cover;
    --list-link-color: white;

    /*inner nav*/
    --inner-nav-text-color: white;
    
    /*misc text effects*/
    --text-shadow: #ffffff5f;
    --border-bottom-inner-nav-b: white;
    --realistic-marker-color: #DC1589;
    --sketch-ballpoint-square-color: greenyellow;
    --sketch-ballpoint-squere-color-blue: aqua;
    --list-marker: url(../images/marker.svg);
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --bckgrnd-image: url(../images/black-paper.jpg);
        --anze-mush-detail: url(../images/anze-mush-detail-white.svg);
        --notepad: url(../images/notepad-dark.png);

        --long-clack-button-up: url(../images/long-clack-up-white.svg);
        --medium-clack-button-up: url(../images/medium-clack-up-white.svg);
        --short-clack-button-up: url(../images/short-clack-up-white.svg);

        --long-clack-button-down: url(../images/long-clack-down-white.svg);
        --medium-clack-button-down: url(../images/medium-clack-down-white.svg);
        --short-clack-button-down: url(../images/short-clack-down-white.svg);
    }
} */

body {
    position: relative;
    background: var(--bckgrnd-image) center center fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 16px;
    height: 100%;
    margin:0;
    display: grid;
    grid-template-columns: 20% 70%;
    grid-template-rows: auto;
    grid-template-areas:
        ". header" 
        ". console"
        "nav console"
        "nav console";
    justify-content: space-evenly;
    align-items: space-evenly;
    z-index: -20;
}

/*Mushroom art*/
.bg-art-container {
    position: absolute;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;
}
/* #notepad {
    content: var(--notepad);
    position:absolute;
    top:0;
    left:0;
    width: 50vw;
    height: auto;
    z-index:20;
} */
#coffee {
    position: absolute;
    top:0;
    left:0;
    width: 20vw;
    min-width: 400px;
    z-index: 1002;
}
#stain {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 20vw;
    max-width: 300px;
    height:auto;
}
#water-stamp {
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
    width: 50%;
    transform: rotate(45deg);
    opacity:1;
}
#truck-stamp {
    position: absolute;
    top: 0;
    right: 0;
    z-index:1;
    width: 30%;
    transform: rotate(20deg);
}
#ring-stamp {
    position: absolute;
    top:10%;
    left: 0;
    z-index: 1;
    width: 20%;
    transform: rotate(-30deg);
}
/* #dot-grid {
    position:absolute;
    top: 10vh;
    left: 10vw;
    width: 80vw;
    height: 80vh;
    border: solid transparent 2px;
    border-radius: 25%;
    background: var(--text-window-background);
    background-repeat: var(--text-window-background-repeat);
    background-size: var(--text-window-background-size);
} */
/* #anze-mush {
    position: absolute;
    bottom:0;
    right:0;
    width: 5vw;
    user-select: none;
    z-index: 999;
    filter: drop-shadow(0 0 .02rem rgb(255, 149, 237))
        drop-shadow(.04rem .02rem .05rem rgb(255, 149, 237))
        drop-shadow(.03rem .03rem .1rem rgb(255, 149, 237))
        drop-shadow(.03rem .03rem .1rem rgb(255, 0, 170))
        drop-shadow(-.03rem .03rem .1rem rgb(255, 0, 170));
} */
/* #anze-mush-detail {
    content: var(--anze-mush-detail);
    position: absolute;
    bottom:0;
    right:0;
    height: 80vh;
    user-select: none;
    opacity: 0;
    z-index: 998;
    filter: drop-shadow(0 0 .01rem rgb(255, 149, 237))
        drop-shadow(.02rem .02rem .05rem rgb(255, 149, 237));
    transition: opacity 0.5s ease-in-out;
}

#anze-mush:hover ~ #anze-mush-detail {
    opacity: 1;
} */


/*header*/
header {
    position:relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 15px;
    grid-area: header;
    z-index: 21;
}
#main-link {
    color: var(--main-link-text-color);
    display: block;
    text-align: center;
    font: bold;
    background: var(--main-link-bkgrd);
    background-repeat: var(--main-link-bkgrd-repeat);
    background-size: var(--text-window-background-size);
    transform: rotate(-2deg) skew(3deg);
    padding: 5px;
}

/*theme-switch*/
#theme-switch {
    position: absolute;
    top:0;
    right:0;
    z-index: 2;
}
.dropbtn {
  background-color: transparent;
  padding: 16px;
  color: var(--button-color);
  font-weight: bold;
  font-size: 30px;
  border: none;
  cursor: pointer;
}

/*main nav*/
.button-nav {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: nav;
    position: relative;
}

.button-nav a {
    display:block;
    padding: 20px;
}

.button-nav a::before {
    content: "";
    width: 30%;
    min-width: 120px;
    aspect-ratio: 2.46;
    position: absolute;
    background: url(../images/long-clack-up-white.svg) no-repeat top left;
    
    background-size: cover;
    
}
.clacky-button-long {
    font-family: "Special Elite";
    font-size: 1rem;
    color: var(--clack-button-text-color);
    border: none;
    background: var(--long-clack-button-bckgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    cursor: pointer;
    z-index:500;
    width: 30%;
    min-width: 120px;
    aspect-ratio: 2.46;
    margin: 3%;
}
.clacky-button-long:active {
    background: var(--long-clack-button-down-backgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    transform: translateY(4px);
}

.clacky-button-medium {
    font-family: "Special Elite";
    font-size: 1rem;
    color: var(--clack-button-text-color);
    border: none;
    background: var(--medium-clack-button-bckgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    cursor: pointer;
    z-index:500;
    width: 22.5%;
    min-width: 80px;
    aspect-ratio: 2.05;
    margin: 3%;
}

.clacky-button-medium:active {
    background: var(--medium-clack-button-down-bckgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    transform: translateY(4px);
}

.clacky-button-short {
    font-family: "Special Elite";
    font-size: 1rem;
    color: var(--clack-button-text-color);
    border: none;
    background: var(--short-clack-button-bckgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    cursor: pointer;
    z-index:500;
    width: 15%;
    aspect-ratio: 1;
    min-width: 50px;
    max-width:80px;
    margin: 3%;
}

.clacky-button-short:active {
    background: var(--short-clack-button-down-backgnd);
    background-position:center;
    background-repeat: var(--clack-button-bckgnd-repeat);
    background-size: var(--clack-button-bckgnd-size);
    transform: translateY(4px);
}






/*Main*/
#text-container {
    background: var(--text-window-background);
    background-repeat: var(--text-window-background-repeat);
    background-size: var(--text-window-background-size);
    background-position: center, center;
    height: 70vh;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 15%;
    border: 2px solid var(--main-link-text-color);
    z-index: 1000;
    grid-area: console;
    overflow-y: scroll;
    overflow-x: hidden;
    align-self: center;
    overflow: -moz-scrollbars-vertical;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
body:has(#anze-mush:hover) #text-container {
    opacity: 0.5;
}

h1, h2, h3, .in-nav-b {
    font-family: "Special Elite";
    text-shadow: 0 0 10px var(--text-shadow);
    text-align: center;
}
p, li {
    font-family:'Courier New', Courier, monospace;
    text-shadow: 0 0 10px var(--text-shadow);
    font-weight: 600;
}

li {
    list-style-image: var(--list-marker);
}

li a {
    color: var(--list-link-color);
}

.inner-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 99%;
    margin-bottom: 2%;
    padding: 2%;

}
.in-nav-b {
    color: var(--inner-nav-text-color);
    background-color: transparent;
    border-bottom: 3px solid var(--border-bottom-inner-nav-b);
    font-size: 1rem;
    border-top: transparent;
    border-left: transparent;
    border-right: transparent;
    text-align: left;
    font-weight: bold;
    padding-top: 5px;
    margin: 2%;
    cursor: pointer; 
}
.image-bundle {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.image-bundle img {
    width: 25%;
    min-width: 200px;
    border: 2px solid var(--main-link-text-color);
    margin: 2px;
    flex-grow: 4;
}



/*Text effects*/
.realistic-marker-highlight{  /*pink highlight*/
  position:relative;
}
.realistic-marker-highlight:before{
  content:"";
  background-color: var(--realistic-marker-color);
  width:100%;
  height:1rem;
  position:absolute;
  z-index:-2;
  filter:url(#marker-shape);
  left:-0.25rem;
  top:0.1rem;
  padding:0 0.25rem;
}

.sketch { /*sketchy lettering with letters coming closer together on hover*/
    font-size: 4rem;
    font-family: "Londrina Sketch";
    font-style: normal;
    text-decoration: none;
    letter-spacing: 5px;
    transition: letter-spacing 0.5s;
}
.sketch:hover {
    letter-spacing: 2px;
}


.sketch-highlight-green {  /*square around text*/
    position:relative;
}
.sketch-highlight-green:before {
    content:"";
    z-index:-1;
    left:-0.1em;
    top: 0em;
    border-width:2px;
    border-style:solid;
    border-color:var(--sketch-ballpoint-square-color);
    position:absolute;
    border-right-color:transparent;
    width:102%;
    height:1.2em;
    transform:rotate(2deg);
    opacity:0.5;
    border-radius:0.25em;
}
.sketch-highlight-green:after {
    content:"";
    z-index:-1;
    left:-0.1em;
    top:0em;
    border-width:2px;
    border-style:solid;
    border-color: var(--sketch-ballpoint-square-color);
    border-left-color:transparent;
    border-top-color:transparent;
    position:absolute;
    width:102%;
    height:1.2em;
    transform:rotate(-1deg);
    opacity:0.5;
    border-radius:0.25em;
}
.sketch-highlight {
    position:relative;
}
.sketch-highlight:before {
    content:"";
    z-index:-1;
    left:-0.1em;
    top: 0em;
    border-width:2px;
    border-style:solid;
    border-color:var(--sketch-ballpoint-squere-color-blue);
    position:absolute;
    border-right-color:transparent;
    width:102%;
    height:1.2em;
    transform:rotate(2deg);
    opacity:0.5;
    border-radius:0.25em;
}
.sketch-highlight:after {
    content:"";
    z-index:-1;
    left:-0.1em;
    top:0em;
    border-width:2px;
    border-style:solid;
    border-color:var(--sketch-ballpoint-squere-color-blue);
    border-left-color:transparent;
    border-top-color:transparent;
    position:absolute;
    width:102%;
    height:1.2em;
    transform:rotate(-1deg);
    opacity:0.5;
    border-radius:0.25em;
}


.circle-sketch-highlight{        /*red circle*/
  position:relative;
}
.circle-sketch-highlight:before{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:-0.1em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  opacity:0.7;
  border-radius:50%;
  padding:0.1em 0.25em;
}
.circle-sketch-highlight:after{
  content:"";
  z-index:-1;
  left:-0.5em;
  top:0.1em;
  padding:0.1em 0.25em;
  border-width:2px;
  border-style:solid;
  border-color:red;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:1em;
  transform:rotate(-1deg);
  opacity:0.7;
  border-radius:50%;
}



/*@media screen and (max-width: 720px) and (orientation: portrait) {*/
/*    body {*/
/*        display: grid;*/
/*        grid-template-columns: 1fr;*/
/*        grid-template-areas:*/
/*            "header"*/
/*            "nav"*/
/*            "nav";*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*        position: relative;*/
/*        width:100%;*/
/*        margin:0;*/
/*    }*/

/*    header {*/
/*        z-index: 500;*/
/*        justify-self: center;*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*    }*/

/*    main {*/
/*        display:none;*/
/*    }*/
    
/*    #mush2, #mush3, #mush2-detail, #mush3-detail, #anze-mush, #anze-mush-detail, #coffee, #stain {*/
/*        display: none;*/
/*    }*/


/*    #badge {*/
/*        height: 20vh;*/
/*        width: auto;*/
/*    }*/

/*    #shell {*/
/*        height: 20vh;*/
/*        width: auto;*/
/*        z-index: 50;*/
/*    }*/
/*    #id-card {*/
/*        height: 25vh;*/
/*        width:auto;*/
/*    }*/

/*    .button-nav {*/
/*        width: 90vmin;*/
/*        justify-self: center;*/
/*    }*/
/*}*/