style.css

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

@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: 2vmin;
   margin: 0;
   column-width: 100%;
   background-color: var(--col_bg1);
   font-family: LTRenovate;
   font-size: 3vw;
   text-align: center;
   overflow: hidden;
   color: var(--col-main3);
}

.top-bar {
   padding: 0.5vmin;
   padding-top: 0;
   display: flex;
   line-height: 1vh;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   overflow: hidden;
   background: linear-gradient(to bottom, var(--col-main3) 0.6vw, var(--col_bg1) 0.6vw);
}

.page-tab {
   border-radius: 0 0 1vw 1vw;
   padding: 0.5vmax 3% 0.5vmax;
   width: auto;
   line-height: 100%;
   margin-left: 0.5vw;
   margin-right: 0.5vw;
   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: LTRenovate;
   font-size: 1.5vw;
   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.2vmin 0.8vmin black;
   color: var(--col-main3);

   transition: 0;
}

.page-tab:hover:not(.page-tab-active) {
   --fac: 100%;
   text-shadow: 0 0.3vmin 0.5vmin var(--col-main1);
   color: var(--col-main3);
}

.content-box {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
   height: 100vmax;
   padding: 0.5vmin;
}

.content-box > div {
   background-color: var(--col_bg1);
   padding: 0.5vmin;
   height: 100%;
   margin: 0.5vmin;
}

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

   to {
      opacity: 100%;
   }
}

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

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