* {
	/* 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;
}

@font-face {
    font-family: "Lava Lamp";
    src: url(fonts/BasteleurLavaLampVF.ttf);
}



/* nav bar */ 
/* TODO: making flexbox sticky to the top... this container is only a temporary solution and loses functionality */
.container-for-nav {
    position: relative;
}

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

    
    position: sticky;
    top: 0px;

    font-size:24px;

    /* writing-mode: sideways-lr;
    text-orientation: mixed; */

    padding: 15px;
    /* border-bottom: 1px solid black; */
    background-color: #ffefee;
}
.nav-links {
    display: flex;
}

a.nav {
    text-decoration: none;
    font-weight:bold;
    color:black;
    font-family:futura;
    flex-basis: 100px;
    border:none;
}

a.nav:hover {
    filter: blur(5px);
}

a.nav:active{
    filter:none;
    color:blue;
}



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

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

    background-color: green;
}

.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;
}

.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;
}

a.download {
    font-size:3.5vw;
    font-family: Tahoma;
    font-weight: 900;

    border: 0.5vw solid;
    border-radius: 2em;
    padding:0.5em 1.0em; 
    position:absolute;
    text-decoration: none;
    text-align:center;
}

@keyframes variable-font-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%;
    }
}



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

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