@font-face {
   font-family: NaturalMono;
   src: url("assets/fonts/NaturalMono-Regular.ttf");
}

@property --fac {
   syntax: '<percentage>';
   inherits: true;
   initial-value: 0%;
}

:root {
   --col-main1: #11353F;
   --col-main2: #03161b;
   --col-main3: #EBEFFE;
   --col_bg1: #EBEFFE20;
   --col_bg2: #FFFFFF8F;
}

* {
   box-sizing: border-box;
}

.header {
   padding: 0.15em 1em;
   margin: 0.2em auto;
   border-radius: 0.2em;
   column-width: 100%;
   background-color: var(--col_bg1);
   font-family: NaturalMono;
   font-size: 3em;
   text-align: center;
   overflow: hidden;
   color: var(--col-main3);
}

.top-bar {
   padding: 0.3em;
   padding-top: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   overflow: hidden;
   background: linear-gradient(to bottom, var(--col-main3) 22%, var(--col_bg1) 22%);
}

.page-tab {
   border-radius: 0 0 0.5em 0.5em;
   padding: 0.4em 0.7em 0.3em;
   width: auto;
   line-height: 1em;
   margin-left: 0.25em;
   margin-right: 0.25em;
   background: linear-gradient(to top, color-mix(in srgb, var(--col-main3), var(--col-main1) 70%) var(--fac), var(--col-main3) var(--fac));
   font-family: NaturalMono;
   font-size: 1.5em;
   text-wrap: nowrap;
   text-align: center;
   text-decoration: none;
   text-shadow: 0;
   color: var(--col-main1);

   transition: 0.2s --fac ease-out;
}

.page-tab-active {
   background: color-mix(in srgb, var(--col-main3), var(--col-main1) 80%);
   text-shadow: 0 0.1em 0.3em black;
   color: var(--col-main3);
   overflow: hidden;
   transition: 0;
}

.page-tab:hover:not(.page-tab-active) {
   --fac: 100%;
   text-shadow: 0 0.2em 0.15em var(--col-main1);
   overflow: hidden;
   color: var(--col-main3);
}

.content-box {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
}

.content-box > div {
   background-color: var(--col_bg1);
}

.content-fill {
   background-color: var(--col_bg1);
   width: 100%;
   padding: 0.8em;
   margin: 0.5vmin;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
}

.content-fill > div {
   margin: 0.4em;
}

@keyframes page-load-anim {
   from {
      opacity: 0%;
   }

   to {
      opacity: 100%;
   }
}

* {
   scrollbar-color: var(--col-main3) var(--col-main1);
}

site-header > * {
   animation: page-load-anim 0.7s ease-in-out 0.05s both;
}

site-header {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   min-height: 100vh;
}

footer {
   margin-top: auto;
}

body {
   margin: 0;
   background: linear-gradient(var(--col-main1), var(--col-main2));
   background-repeat: no-repeat;
   background-attachment: fixed;
   font-size: 1.1em;
   color: var(--col-main3);

}

@media only screen and (max-width: 640px) {

   .header {
      font-size: 2.1em;
   }

   .page-tab {
      font-size: 1em;
   }
}