* {
    /* removes default spacing */
    margin: 0px;
    padding: 0px;
    border: none;
    background: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}
body {
    /* Sets default em to 16px font */
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
:root {
    /* define universal variables here */

    /* define universal colors here */

    /* light mode */
    --color-background-light: #FFFFFF;
    --color-background-alternative-light: #8000ff;  /* #B61AE5;  #12d4e6; */
    --color-nav-bar-light: #FFFFFF;
    --color-border-light: #000000;

    /* dark mode */


    /* svg color filters use case colors */
    --color-svg-filter-light: invert(0%) sepia(6%) saturate(7500%) hue-rotate(149deg) brightness(94%) contrast(96%);
    --color-svg-filter-dark: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    
    /* actual colors here will pull from pre defined values above */
    --color-background: var( --color-background-light );
    --color-background-alternative: var( --color-background-alternative-light );
    --color-nav-bar: var( --color-nav-bar-light );
    --color-border: var( --color-border-light );
    --color-svg: var( --color-svg-filter-light );
    --color-transparent: rgba(0,0,0,0.0);

    /* p = 12 point font values here should not modify */
    --p0: 0%;
    --p1: 8.33%;
    --p2: 16.66%;
    --p3: 25%;
    --p4: 33.33%;
    --p5: 41.66%;
    --p6: 50%;
    --p7: 58.33%;
    --p8: 66.66%;
    --p9: 75%;
    --p10: 83.33%;
    --p11: 91.66%;
    --p12: 100%;

    /* spv = spacer vertical height by view height */
    --spvh0:   0vh;
    --spvh1:   1vh;
    --spvh2:   2vh;
    --spvh3:   3vh;
    --spvh4:   4vh;
    --spvh5:   5vh;
    --spvh6:   6vh;
    --spvh7:   7vh;
    --spvh8:   8vh;
    --spvh9:   9vh;
    --spvh10: 10vh;
    --spvh11: 11vh;
    --spvh12: 12vh;
    --spvh13: 13vh;
    --spvh14: 14vh;
    --spvh15: 15vh;
    --spvh16: 16vh;
    --spvh17: 17vh;
    --spvh18: 18vh;
    --spvh19: 19vh;
    --spvh20: 20vh;
    --spvh21: 21vh;
    --spvh22: 22vh;
    --spvh23: 23vh;
    --spvh24: 24vh;
    --spvh25: 25vh;

    /* spw = spacer horizontal width by vw */
    --spvw0:   0vw;
    --spvw1:   1vw;
    --spvw2:   2vw;
    --spvw3:   3vw;
    --spvw4:   4vw;
    --spvw5:   5vw;
    --spvw6:   6vw;
    --spvw7:   7vw;
    --spvw8:   8vw;
    --spvw9:   9vw;
    --spvw10: 10vw;
    --spvw11: 11vw;
    --spvw12: 12vw;
    --spvw13: 13vw;
    --spvw14: 14vw;
    --spvw15: 15vw;
    --spvw16: 16vw;
    --spvw17: 17vw;
    --spvw18: 18vw;
    --spvw19: 19vw;
    --spvw20: 20vw;
    --spvw21: 21vw;
    --spvw22: 22vw;
    --spvw23: 23vw;
    --spvw24: 24vw;
    --spvw25: 25vw;

    /* dimensions */
    --nav-bar-width: 100vw;
    --nav-bar-height: 10vh;
    --section-width: 100vw;
    --section-height: 90vh;

    /* text size scaling */
    --text-size-huge-min: 50px;
    --text-size-huge-max: 400px;
    --text-size-huge-base: 7vw + 2em;

    --text-size-large-min: 25px;
    --text-size-large-max: 200px;
    --text-size-large-base: 3vw + 1em;

    --text-size-normal-min: 16px;
    --text-size-normal-max: 128px;
    --text-size-normal-base: 2vw + 0.75em;

    --text-size-small-min: 10px;
    --text-size-small-max: 80px;
    --text-size-small-base: 1vw + .5em;

    --text-size-tiny-min: 8px;
    --text-size-tiny-max: 64px;
    --text-size-tiny-base: 0.5vw + 0.25em;
}
/* global padding classes here */

/* spacer vertical by veiw height percentage */
.spvh0  { height: var(  --spvh0 ); }
.spvh1  { height: var(  --spvh1 ); }
.spvh2  { height: var(  --spvh2 ); }
.spvh3  { height: var(  --spvh3 ); }
.spvh4  { height: var(  --spvh4 ); }
.spvh5  { height: var(  --spvh5 ); }
.spvh6  { height: var(  --spvh6 ); }
.spvh7  { height: var(  --spvh7 ); }
.spvh8  { height: var(  --spvh8 ); }
.spvh9  { height: var(  --spvh9 ); }
.spvh10 { height: var( --spvh10 ); }
.spvh11 { height: var( --spvh11 ); }
.spvh12 { height: var( --spvh12 ); }
.spvh13 { height: var( --spvh13 ); }
.spvh14 { height: var( --spvh14 ); }
.spvh15 { height: var( --spvh15 ); }
.spvh16 { height: var( --spvh16 ); }
.spvh17 { height: var( --spvh17 ); }
.spvh18 { height: var( --spvh18 ); }
.spvh19 { height: var( --spvh19 ); }
.spvh20 { height: var( --spvh20 ); }
.spvh21 { height: var( --spvh21 ); }
.spvh22 { height: var( --spvh22 ); }
.spvh23 { height: var( --spvh23 ); }
.spvh24 { height: var( --spvh24 ); }
.spvh25 { height: var( --spvh25 ); }

/* spacer view width by percentage */
.spvw0  { width: var(  --spvw0 ); }
.spvw1  { width: var(  --spvw1 ); }
.spvw2  { width: var(  --spvw2 ); }
.spvw3  { width: var(  --spvw3 ); }
.spvw4  { width: var(  --spvw4 ); }
.spvw5  { width: var(  --spvw5 ); }
.spvw6  { width: var(  --spvw6 ); }
.spvw7  { width: var(  --spvw7 ); }
.spvw8  { width: var(  --spvw8 ); }
.spvw9  { width: var(  --spvw9 ); }
.spvw10 { width: var( --spvw10 ); }
.spvw11 { width: var( --spvw11 ); }
.spvw12 { width: var( --spvw12 ); }
.spvw13 { width: var( --spvw13 ); }
.spvw14 { width: var( --spvw14 ); }
.spvw15 { width: var( --spvw15 ); }
.spvw16 { width: var( --spvw16 ); }
.spvw17 { width: var( --spvw17 ); }
.spvw18 { width: var( --spvw18 ); }
.spvw19 { width: var( --spvw19 ); }
.spvw20 { width: var( --spwv20 ); }
.spvw21 { width: var( --spwv21 ); }
.spvw22 { width: var( --spwv22 ); }
.spvw23 { width: var( --spwv23 ); }
.spvw24 { width: var( --spwv24 ); }
.spvw25 { width: var( --spwv25 ); }

.sppw1  { width: var( --p1 );  }
.sppw2  { width: var( --p2 );  }
.sppw3  { width: var( --p3 );  }
.sppw4  { width: var( --p4 );  }
.sppw5  { width: var( --p5 );  }
.sppw6  { width: var( --p6 );  }
.sppw7  { width: var( --p7 );  }
.sppw8  { width: var( --p8 );  }
.sppw9  { width: var( --p9 );  }
.sppw10 { width: var( --p10 ); }
.sppw11 { width: var( --p11 ); }
.sppw12 { width: var( --p12 ); }

/* z index / 3d stacking */
.z1 { z-index: 1; }
.z1 { z-index: 2; }
.z1 { z-index: 3; }
.z1 { z-index: 4; }
.z1 { z-index: 5; }
.z1 { z-index: 6; }
.z1 { z-index: 7; }
.z1 { z-index: 8; }
.z1 { z-index: 9; }

/* navigation bar stuff */
.nav-bar {
    display:flex;
    width: 100vw;
    height: auto;
    max-height: 20vh;
}
.nav-home {
    display:flex;
    width: var( --p2 );
    background-color: var(--color-background-alternative);
    overflow: hidden;
}
.nav-bryan {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}
.nav-spacer {
    width: var(--p1);
}

/* nav bar old

.nav-bar {
    display:flex;
    width: var( --nav-bar-width );
    background-color: var( --color-nav-bar );
    height: var( --nav-bar-height );
}
.nav-bar-spacer-left {
    width: var( --p1 );
    height: var( --nav-bar-height );
}
.nav-bar-spacer-right {
    width: var( --p1 );
    height: var( --nav-bar-height );
}
.nav-bar-logo-container {
    width: var(--p1 );
    height: auto;
    aspect-ratio: 1/1;
    overflow:hidden;
}
.nav-bar-logo-container {
    width: 80%;
    height: auto;
    aspect-ratio: 1/1;
}
.nav-bar-gap {
    width: var( --p4 );
    height: var( --nav-bar-height );
}
.nav-bar-light-mode {
    width: var( --p2 );
    height: var( --nav-bar-height );
}
.nav-bar-account {
    width: var( --p2 );
    height: var( --nav-bar-height );
}
*/

/* universal classes here */
.section {
    width: var( --section-width );
    height: var( --section-height );
}
.flex {
    display:flex;
}
.block {
    display: block;
}
.text-center {
    text-align: center;
    text-wrap: balance;
}
.text-style-0 {
    font-family: 'Open Sans', sans-serif;
}
.text-style-1 {
    font-family: 'Lilita One', cursive;
}
.text-size-huge {
    padding-left: 5%;
    padding-right: 5%;
    font-size: clamp( var( --text-size-huge-min ), var( --text-size-huge-base ), var( --text-size-huge-max) );
}
.text-size-large {
    padding-left: 5%;
    padding-right: 5%;
    font-size: clamp( var( --text-size-large-min ), var( --text-size-large-base ), var( --text-size-large-max) );
}
.text-size-normal {
    padding-left: 5%;
    padding-right: 5%;
    font-size: clamp( var( --text-size-normal-min ), var( --text-size-normal-base ), var( --text-size-normal-max) );
}
.text-size-small {
    padding-left: 5%;
    padding-right: 5%;
    font-size: clamp( var( --text-size-small-min ), var( --text-size-small-base ), var( --text-size-small-max) );
}
.text-size-tiny {
    padding-left: 5%;
    padding-right: 5%;
    font-size: clamp( var( --text-size-tiny-min ), var( --text-size-tiny-base ), var( --text-size-tiny-max) );
}
.background{
    background-color: var( --color-background );
}
.background-alternative {
    background-color: var( --color-background-alternative );
}
.svg {
    filter: var( --color-svg );
}
.center {
    display: flex;
  align-items: center; /* Vertically center items */
  justify-content: center; /* Horizontally center items (optional) */
}
.fill {
    width: 100%;
    max-width: 100%;
    min-width:100%;
    height: auto;
}
.square {
    aspect-ratio: 1/1;
}
.round {
    border-radius: 50%;
}
/* removes all transitions when requested */
@media(prefers-reduced-motion){
    *{  transition: none; }
}
/* fixes for screen resolution problems */
@media screen and (min-width: 320px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 576px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 900px) {
}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1025px) {
}
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 1920px) {
}
@media screen and (min-width: 2560px) {
}
@media screen and (min-width: 3840px) {
}
@media screen and (min-width: 7680px) {
}