system.css

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     display: block;
}
 body {
     line-height: 1;
}
 ol, ul {
     list-style: none;
}
 blockquote, q {
     quotes: none;
}
 blockquote:before, blockquote:after, q:before, q:after {
     content: '';
     content: none;
}
 table {
     border-collapse: collapse;
     border-spacing: 0;
}
 html,body{
     background: #000;
}
 body{
     font-family: clone-rounded-latin, sans-serif;
}
 h1,h2,h3,h4,h5,h6{
     text-transform: uppercase;
}
 html{
     font-size: calc(15px + 0.390625vw);
     letter-spacing: 0.05rem;
}
 a{
     cursor: pointer;
}
 body {
     min-height: 100vh;
    /* mobile viewport bug fix */
     min-height: -webkit-fill-available;
}
 html {
     height: -webkit-fill-available;
}
 .rte{
     max-width: 900px;
     text-align: center;
     max-height: 100vh;
     overflow-y: auto;
     overflow-x: visible;
}
 .rte p{
     font-size: calc(1rem + 0.5vh);
     margin-bottom: calc(1rem + 2vh);
     line-height: calc(1.2rem + 1.5vh);
}
 .rte a{
     text-decoration: underline;
     color:#F7F7EA;
}
 .rte h2{
     font-size: calc(1rem + 0.5vh);
     margin-bottom: calc(1rem + 2vh);
     line-height: calc(1rem + 1.5vh);
}
 .rte a{
  text-decoration: none;
 }
/* essential styles */
 #screens {
     padding: 0px;
     margin: 0px;
     list-style-type: none;
}
 .screen {
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     opacity: 0;
     z-index: 1;
     overflow: hidden;
     //min-height: 500px;
     -webkit-transition: opacity 1s;
     -moz-transition: opacity 1s;
     -o-transition: opacity 1s;
     transition: opacity 1s;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-direction: column;
}
 .showing {
     opacity: 1;
     z-index: 2;
}
/* non-essential styles: just for appearance;
 change whatever you want */
 .screen {
     padding: 40px;
     box-sizing: border-box;
     color: #F7F7EA;
    /*border-radius: 2.1vh;
     border: 0.5vw solid black;
    */
}
/* Scanlines */
 .scanlines {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
     z-index: 300;
     opacity: .6;
     will-change: opacity;
     animation: opacity 3s linear infinite;
}
 .scanlines::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .4) 51%);
     background-size: 100% 4px;
     will-change: background, background-size;
     animation: scanlines .2s linear infinite;
     opacity: 0.8;
}
 body.loaded .scanlines {
     animation: fadeoutscanlines 3s linear forwards;
     animation-delay: 0s;
}
/* //////////////// boot SCREEN */
 #start{
     display:none;
}
 body.complete #start{
     display:inherit;
}
 #screen--boot{
     // background: #000;
     // background-image: url('tv.png');
     background-size: auto;
     background-position: center bottom;
     text-transform: uppercase;
     align-content: space-between;
     flex-wrap: wrap;
     flex-direction: row;
     font-size: 4vh;
     padding: 5vh;
}
 #screen--boot div{
     width: 100%;
}
 #start{
     color: #F6F561;
     margin: 20px 0 20px 0;
     animation: flicker 1s infinite;
     -webkit-text-stroke: 1px black;
     // font-size: 2rem;
     font-weight: 900;
     text-transform: uppercase;
}
/* //////////////// IDENT SCREEN */
 #screen--ident{
     background: #FF105A;
}
 #screen--ident .ident{
     text-align: center;
     opacity: 0;
}
 #screen--ident.showing .ident{
     animation: ident 4s linear forwards;
     animation-delay: 1s;
}
 #screen--ident .ident{
     width:80%;
}
/* //////////////// MENU SCREEN */
 body.start{
     background-color: #481CEA;
     font-weight: 900;
     font-size: calc(1rem + 1.2vh);
     background-size: 33vw 33vh;
     background-position: center;
     background-image: linear-gradient(to right, #6542E9 1px, transparent 1px), linear-gradient(to bottom, #6542E9 1px, transparent 1px);
}
 body.start::after{
     background: linear-gradient(90deg, rgba(238,118,171,1) 33.33%, rgba(242,233,96,1) 33.33%, rgba(242,233,96,1) 66.66%, rgba(28,183,135,1) 66.66%);
     height: 8px;
     width: 100%;
     position: fixed;
     bottom: 0;
     z-index: 10;
     content: "";
}
 .startmenu h6{
     color: #F6F561;
     margin: 3vh 0 2vh 0;
     animation: flicker 1s infinite;
}
 .startmenu{
     text-transform: uppercase;
     position: absolute;
     bottom: 12vh;
}
 .startmenu a{
     color:#F7F7EA;
     padding: 1vh;
     text-decoration: none;
     display: inline-block;
}
 .startmenu a:hover{
     color: #F6F561;
}
 .startmenu a:hover::before{
     content: "▼";
     position: absolute;
     margin-left: -1.5rem;
     font-size: calc(0.8rem + 0.5vh);
     transform: rotate(-90deg);
     margin-top: 0.7vh;
     animation: flicker 1s infinite;
}
 .button{
     color:#F7F7EA;
     padding: 8px;
     text-decoration: none;
     display: inline-block;
     font-size: calc(1rem + 1.2vh);
}
 .button--flicker{
     color: #F6F561;
     animation: flicker 1s infinite;
}
 .button:hover{
     animation:none;
}
 .button:hover::before{
     content: "▼";
     position: absolute;
     margin-left: -1.5rem;
     font-size: calc(0.8rem + 0.5vh);
     transform: rotate(-90deg);
     margin-top: 0.7vh;
     animation: flicker 1s infinite;
}
 .seal{
     position: absolute;
     width: 10vh;
     z-index: 100;
     width: 140px;
     height: 140px;
     right: 15px;
     bottom: 15px;
}
 .badge{
     background: #F7F7EA;
     border-radius: 50%;
     height: 45vh;
     width: 45vh;
     display: flex;
     align-content: center;
     justify-content: center;
     position: absolute;
     top: 10vh;
     max-width: 60vw;
     max-height: 60vw;
     //animation: badgecolor 35s infinite;
}
 .badge--text{
     width: 90%;
     animation: rotating 20s linear infinite;
}
 .badge--image-ping--1{
     transform: rotate(31deg);
     transform-origin: bottom;
     position: absolute;
     width: 15%;
     top: -13%;
     right: 1%;
     opacity: 0;
}
 .badge--image-ping--2{
     transform: rotate(60deg);
     transform-origin: bottom;
     position: absolute;
     width: 15%;
     top: -9%;
     right: -2%;
     opacity: 0;
}
 .badge--image-ping--3{
     transform: rotate(90deg);
     transform-origin: bottom;
     position: absolute;
     width: 15%;
     top: -3%;
     right: -3%;
     opacity: 0;
}
 .badge--image{
     width: 84%;
     position: absolute;
     left: 14%;
     opacity: 0;
}
 #screen--menu.showing .badge--image{
     animation: badgeintro 0.3s ease-in forwards;
     opacity: 1;
}
 #screen--menu.showing .badge--image-ping--1{
     animation: fadein 0.4s ease-in forwards;
     animation-delay: 0.3s;
}
 #screen--menu.showing .badge--image-ping--2{
     animation: fadein 0.4s ease-in forwards;
     animation-delay: 0.5s;
}
 #screen--menu.showing .badge--image-ping--3{
     animation: fadein 0.4s ease-in forwards;
     animation-delay: 0.7s;
}
 #screen--menu .copyright {
     color: #F7F7EA;
     position: absolute;
     bottom: 1rem;
     font-size:calc(0.4rem + 1vh);
     -webkit-text-stroke: 1px #481CEA;
     width:100%;
     text-align: center;
     left:0;
}
#screen--menu .copyright a{
  color: #F7F7EA;
  -webkit-text-stroke: 1px #481CEA;
  text-decoration: none;
}
#screen--menu .copyright a:hover{
  border-bottom: #F7F7EA solid 1px;
}

 .underline{
	      position: relative;
				text-decoration: none!important;
 }
  .underline a{
		text-decoration: none!important;
	}
 .underline--super{
		 position: relative;
		display: inline-block;
		 margin-right: 0.3rem;
		 margin-left: 0.3rem;
		 font-size: 1.5rem;
		 line-height: 2rem;
		 transform: skewY(-3deg);
}
 .underline::after{
     content: '';
     position: absolute;
		 display:block;
     bottom: -0.4rem;
     left: 0;
     right: 0;
     height: 0.75rem;
     z-index: -1;
     background-image: url('ping-underline.svg');
     background-repeat: no-repeat;
     background-size: cover;
		 background-position: center;
}
.ping{
	position: relative;
	padding-right: 0.3rem;
}
.ping::before{
		content: '';
		position: absolute;
		top: -0.2rem;
		right: -1.1rem;
		height: 1.2rem;
		width: 1.5rem;
		z-index: -1;
		background-image: url('ping.svg');
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: left;
}
 @keyframes scanlines {
     from {
         background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
         background-size: 100% 4px;
    }
     to {
         background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
         background-size: 100% 4px;
    }
}
 @keyframes opacity {
     0% {
        opacity: .6;
    }
     20% {
        opacity:.3;
    }
     35% {
        opacity:.5;
    }
     50% {
        opacity:.8;
    }
     60% {
        opacity:.4;
    }
     80% {
        opacity:.7;
    }
     100% {
        opacity:.6;
    }
}
 @keyframes fadeout {
     0% {
        opacity:1;
    }
     100% {
        opacity:0;
    }
}
 @keyframes fadeoutscanlines {
     0% {
        opacity:0.5;
    }
     100% {
        opacity:0;
    }
}
 @keyframes fadeoutborder {
     0% {
        border-width: 0.5vw;
         border-radius: 2.1vh;
    }
     100% {
        border-width:0;
         border-radius: 0;
    }
}
 @keyframes fadein {
     0% {
        opacity:0;
    }
     100% {
        opacity:1;
    }
}
 @keyframes rotating {
     from {
         transform: rotate(0deg);
    }
     to {
         transform: rotate(-360deg);
    }
}
 @keyframes badgecolor {
     0% {
        background-color: #F7F7EA;
    }
     25% {
        background-color: #EE76AB;
    }
     50% {
        background-color: #F2E960;
    }
     75% {
        background-color: #1CB787;
    }
     100% {
        background-color: #F7F7EA;
    }
}
 @keyframes ident {
     0, 10%, 95%, 100% {
         opacity:0
    }
     11%, 94% {
         opacity:1
    }
}
 @keyframes flicker {
     0% {
         opacity:1;
    }
     50% {
         opacity:0.1;
    }
     100% {
         opacity:1;
    }
}
 @keyframes badgeintro {
     0% {
         bottom:10%;
    }
     95% {
         bottom:18%;
    }
     100% {
         bottom:16%;
    }
}