* {
	/* Fixing the box-sizing issue */
	/* Explanation: https://www.w3schools.com/css/css3_box-sizing.asp */
	box-sizing: border-box;

	/* Setting all default margin and padding to 0, because elements have pretty arbitary initial settings */
	margin: 0;
	padding: 0;

	/* Smooth scrolliing when anchor links pressed */
	scroll-behavior: smooth;
}

[contenteditable="true"]:active, [contenteditable="true"]:focus
{
    border:none;
    outline:none;
}

p {
    color: white;
    font-size: 24px;
}


@font-face {
    font-family: "Interstellar Medium";
    src: url(fonts/InterstellarMediumVF.ttf);
}
@font-face {
    font-family: "Lava Lamp";
    src: url(fonts/BasteleurLavaLampVF.ttf);
}
@font-face {
    font-family: "pixel poor things";
    src: url(fonts/pixel-poor-thingsVF.ttf);
}
@font-face {
    font-family: "medieval bestiary";
    src: url(fonts/medieval-bestiary.ttf);
}
@font-face {
    font-family: "TNR remixed";
    src: url(fonts/TimesNewerRomanRemixedVF.ttf);
}


/* nav bar */ 
/* TODO: making flexbox sticky to the top... this container is only a temporary solution and loses functionality */
body {
    background:url(img/A2721_spiral_pixelated.png);
    /* background-repeat: no-repeat; */
    background-size: 100vw;
    image-rendering: pixelated;
}

.container-for-nav {
    position: relative;
}

.nav {
    display: flex; 
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    position: sticky;
    top: 0px;
}
.nav-links {
    display: flex;
    flex-grow: 1; flex-shrink: 1;
    padding-right:2vw;
    flex-basis: 100px;
    font-size:4vw;
    gap: 15px;
}

.logo-box{
    flex-grow: 1; 
    flex-shrink: 1; 
    align-self: center;
    padding: 1vh 10vw 0 2vw;
    margin:0; 
    flex-basis: 200px;
}
.logo-cls {
    fill: #67ff76;
}
.logo-cls:hover {
    fill: #f9c2f1;
    filter: drop-shadow(rgb(253, 9, 245) 0 0 0.5vw);
}
.logo-cls:active {
    fill: #4671e7;
    filter: drop-shadow(rgb(68, 0, 255) 0 0 0.5vw);
}

.logo-cls-alt{
    fill:#fbec61;
}
.logo-cls-alt:hover{
    fill:#67ff76;
    filter: drop-shadow(#67ff76 0 0 0.5vw);
}
.logo-cls-alt:active{
    fill:#ffffff;
    filter: drop-shadow(#ffffff 0 0 0.5vw);
}


a.nav {
    text-decoration: none;
    color:whitesmoke;
    font-family:"Interstellar Medium";
    font-variation-settings: "STAR" 100;
}
a.nav:hover {
    filter: drop-shadow(rgb(186, 182, 255) 0 0 0.20vw);
}
a.nav:active{
    filter: drop-shadow(rgb(255, 35, 248) 0 0 0.20vw);
    color:rgb(96, 102, 251);
}


/* The dropdown container */
.dropdown {
    overflow: hidden;
    text-align:center;
}

.dropdown a {
    font-family:"Interstellar Medium";
    font-variation-settings: "STAR" 100;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 78%;
    z-index: 9;
}
.dropdown-content a {
    color: whitesmoke;
    font-size: 3vw;
    padding: 0.5vw 0.2vw;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-content{
    display: inline-block;
    color:blue;
}




/* font displays */
.font-display-grid {
    --padding: 12px;
    padding: var(--padding);
    gap: var(--padding);

    grid-template-rows: repeat(4,1fr);
    display: grid;
}

.font-display-child {
    display: grid;
    /* place-content: center; */
    height: 50vw;
    position: relative;
}

.font-bubble {
    font-size:20vw;
    border-radius: 50%; 
    position: relative; 
    text-align:center;
    /* TODO: Why isn't vertical align working??? */
    vertical-align: middle;
}



/* font display text */
.ism {
    font-family:"Interstellar Medium";
    font-variation-settings: "STAR" 100;
}
.ism-display {
    font-family:"Interstellar Medium";
    font-variation-settings: "STAR" 0;

    transition: font-variation-settings 3s;
    padding:0px;
    margin:0px;
}
.ism-display:hover {
    font-variation-settings:"STAR" 100;
}

.lava-lamp {
    font-family:"Lava Lamp";
    font-variation-settings:"LALA" 0;

    transition: font-variation-settings 3s;
    padding:0px;
    margin:0px;
}
.lava-lamp:hover {
    font-variation-settings:"LALA" 100;
}

.pixel-poor-things {
    font-family:"pixel poor things";
    font-variation-settings:"POSI" 0;

    transition: font-variation-settings 3s;
    padding:0px;
    margin:0px;
}
.pixel-poor-things:hover {
    font-variation-settings:"POSI" 100;
}

.pixel-poor-things {
    font-family:"pixel poor things";
    font-variation-settings:"POSI" 0;

    transition: font-variation-settings 3s;
    padding:0px;
    margin:0px;
}
.pixel-poor-things:hover {
    font-variation-settings:"POSI" 100;
}

.animated-pixel-poor-things {
    animation: pixel-poor-things-loop-animation 6s ease-in-out infinite;
}

.medieval-bestiary {
    font-family:"medieval bestiary";
    padding:0px;
    margin:0px;
}

.tnr-remixed {
    font-family:"TNR remixed";
    font-variation-settings:"VARI" 0;

    transition: font-variation-settings 2s;
    padding:0px;
    margin:0px;
}
.tnr-remixed:hover {
    font-variation-settings:"VARI" 100;
}



/* type specimen page */
#font-specimen-container {
    height: 100vh;
    width: 100vw;
    /* border: solid red 2px; */
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
}
#font-specimen-container > div {
    scroll-snap-align: top;
    scroll-snap-stop: always;
}
.ism-in-window {
    font-family:"Interstellar Medium";
    font-size: 10vw;
    rotate:4deg;
    font-variation-settings:"STAR" 0;
    color:rgb(186, 182, 255);
    margin: auto;
    text-align: center;
}

.ism-scrawl {
    color:#4130c5; 
    font-family: "Interstellar Medium";
    transition: 0.5s;
    font-variation-settings: "STAR" 82;
}

.spaceship-button {
    --button-outline-color: rgb(165, 15, 135);

    position: absolute; 
    background-color: rgb(63, 155, 230); 
    z-index: 6; 
    text-align: center; 
    justify-items: center;
    border: 0.2em solid var(--button-outline-color);
    border-radius: 50%; 
    box-shadow: 0px 0.5vw var(--button-outline-color);
    display: inline-block;
    cursor: pointer;
}

.spaceship-button:hover {
    transform: translate(0vw, -0.25vw);
    box-shadow: 0px 0.75vw var(--button-outline-color);
}

.spaceship-button:active {
    transform: translate(0vw, 0.25vw);
    box-shadow: 0px 0.25vw var(--button-outline-color);
}

.spaceship-slider {
    -webkit-appearance: none;
    position:absolute;
    border-radius: 1vw; 
    height: 1vw;
    background:rgb(140, 103, 196);
    outline: none;
}

.spaceship-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    background: #e47f13;
    cursor: pointer;
}

.spaceship-slider::-moz-range-thumb {
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    background: #ca6405;
    cursor: pointer;
}

.news-box {
    width:22vw;
    height:4.4vw;
    border-radius:1.4vw;
    position:absolute;
    overflow: hidden;
    font-family: futura;
    padding-top:1vw;
}

.news-headline span {
    color:#8cff00;
    font-size:2vw;
    position:absolute;
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation-delay: 0s;
    animation: news-headline 16s linear infinite;
}

.news-headline-two span {
    animation-delay: 8s;
}

@keyframes news-headline {
    0% {transform:translate(100%,0)}
    100% {transform:translate(-100%,0)}
}

.crosshair-cls {
    fill: #f471ee;
}
#pink_crosshair {
    animation: crosshair-animation 4s linear infinite;
}
@keyframes crosshair-animation {
    0% {transform: translate(-1vw,1vw)}
    25%{transform:translate(0.5vw,-2vw)}
    50%{transform:translate(1vw,0.5vw)}
    100%{transform:translate(-0.5vw,0.5vw)}
}



/* links */ 
a.download {
    font-size:3.4vw;
    color:white;
    font-family: futura;
    font-weight: 400;

    /* border: 0.5vw solid;
    border-radius: 2em;
    padding:0.5em 1.0em;  */
    position:absolute;
    text-decoration: none;
    text-align:center;
}
a.download:hover {
    fill: #f3aae8;
    filter: drop-shadow(rgb(253, 9, 245) 0 0 0.5vw);
}



/* screen size adjustments */
@keyframes ism-loop-animation{
    0% {
        font-variation-settings: "STAR" 0;
        background-position:0% 50%;
    }
    50% {
        font-variation-settings: "STAR" 100;
        background-position:100% 50%;
    }
    100% {
        font-variation-settings: "STAR" 0;
        background-position:0% 50%;
    }
}

@keyframes lava-lamp-loop-animation{
    0% {
        font-variation-settings: "LALA" 0;
        background-position:0% 50%;
    }
    50% {
        font-variation-settings: "LALA" 100;
        background-position:100% 50%;
    }
    100% {
        font-variation-settings: "LALA" 0;
        background-position:0% 50%;
    }
}

@keyframes tnr-remixed-loop-animation{
    0% {
        font-variation-settings: "VARI" 0;
        background-position:0% 50%;
    }
    50% {
        font-variation-settings: "VARI" 100;
        background-position:100% 50%;
    }
    100% {
        font-variation-settings: "VARI" 0;
        background-position:0% 50%;
    }
}

@keyframes pixel-poor-things-loop-animation{
    0% {
        font-variation-settings: "POSI" 0;
    }
    50% {
        font-variation-settings: "POSI" 100;
    }
    100% {
        font-variation-settings: "POSI" 0;
    }
}

/* adjustments for small screens */
@media only screen and (max-width: 600px){
    .nav {
        flex-wrap: wrap;
    }

    .nav-links {
        font-size:24px;
        gap: 5px;
    }

    .ism {
        transition: none;
        animation-name: ism-loop-animation;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .lava-lamp {
        transition: none;
        animation-name: lava-lamp-loop-animation;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .tnr-remixed {
        transition: none;
        animation-name: tnr-remixed-loop-animation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
}