@font-face {
  font-family: "BBB";
  src: url("BigBadBold.ttf")
}

@font-face {
    font-family: "SC";
    src: url("SophieComic.ttf");
}

.wave {
    display: inline-block;
    cursor: default;
}

.wave span {
    display: inline-block;
}

.wave.waving span {
    animation: wave-jump 0.8s ease-in-out infinite;
}

@keyframes wave-jump {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-0.2em); }
    50%  { transform: translateY(0.05em)}
    65%  { transform: translateY(0)}
    100% { transform: translateY(0); }
}

.background {
    z-index: -3;
    content: url("bg.png");
    position: fixed;
    top: -2%;
    left: -2%;
    width: 105%;
    height: auto;
    opacity: 30%;
}

.halftone{
    background-image: url("halftone.png");

    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;

    background-repeat: repeat;
    background-size: auto 20%;
    animation: scroll-diag 80s linear infinite;
}

body {
    animation: colour-transition 20s linear infinite;
    animation-direction: alternate-reverse;
    margin: 0%;
    overflow: hidden;
}

@keyframes colour-transition {
    0%   { background-color: rgba(255, 0, 0, 0.95); }     
    16%  { background-color: rgba(255, 127, 0, 0.95); } 
    33%  { background-color: rgba(255, 255, 0, 0.95); }   
    50%  { background-color: rgba(0, 255, 0, 0.95); }    
    66%  { background-color: rgba(0, 0, 255, 0.95); }   
    83%  { background-color: rgba(75, 0, 130, 0.95); }   
    100% { background-color: rgba(255, 0, 0, 0.95); }
}

@keyframes scroll-diag {
  from {background-position: -50% -200%;}
  to   {background-position: 0 0;}
}

.headerbox {
    text-align: center;
    line-height: normal;
    background-color: black;
}

.headerbox h1 {
    font-family:   "BBB";
    font-size:     200%;
    color: white;

    margin-top: 1vw;
    margin-bottom: 1vw;

    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hello {
    margin-top:    4vw;
    margin-bottom: 0.2vw;
}

.headerbox h1:hover {
    transform: scale(1.2);
}

.stupid {
    z-index: 1;
    content: url("stupid.png");
    height: 35vw;
    width: 38vw;
    position: fixed;
    bottom: -1vw;
    right: -2vw;
    filter: drop-shadow(2vw 2vw 0.2vw rgba(0, 0, 0, 0.5))
}

.dennis {
    z-index: -1;
    content: url("dennis.png");
    height: 40vw;
    width: 40vw;
    position: fixed;
    bottom: 0vw;
    left: 0vw;
    filter: drop-shadow(2vw 2vw 0.2vw rgba(0, 0, 0, 0.5))
}

.bodybox {
    opacity: 30%;
    scale: 92%;
    background-color: white;
    border: 0.5vw solid black;

    margin-top:       2%;
    margin-bottom:    2%;
    margin-right:    32%;
    margin-left:     15%;

    font-family:    "SC";
    font-size:       2vw;
    line-height:   80%;
    text-wrap-mode: wrap;
    overflow: scroll;

    height: 90vh;
    overflow: scroll;
    overscroll-behavior-y: none;

    filter: drop-shadow(0vw 0vw 4vw rgba(0, 0, 0, 1));

    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
                scale 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.bodybox.active {
    opacity: 100%;
    scale: 100%;
}

.bodybox.active ~ .stupid {
    z-index: -2; 
    transition: z-index 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.bodybox h2 {
    line-height: normal;
}

::selection {
    background-color: black;
    color: white;
}

.textbox {
    margin-left:   10%;
    margin-right:  10%;
    margin-top:     0%;
    margin-bottom:  0%;
    overflow:   hidden;
}

.blockheader {
    grid-column: 1 / -1;   /* full width of block */
    background-color: black;
    color: white;
    text-align: center;
    padding: 1vw 2vw;      /* top-bottom 1vw, left-right 2vw */
    margin: 0;             /* remove default h4 margin */
}

.block {
    margin-top: -3vw;
    margin-bottom: 4vw;
    border: 0.5vw solid black;
    display: grid;
}

.block p{
    padding: 1vw 2vw;
    margin: 0;
}

.block h6 {
    padding: 0 3vw;
    margin: -1vw;
    color: gray;  
}

.navbox {
    border: 0.5vw solid black;
    margin-top: -2.5vw;
    margin-bottom: 6vw;
}

.navbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;

    background-color: black;
    overscroll-behavior: none;
}

.navbox ul li {
    box-sizing: border-box;
}

.navbox ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: black;
    padding: 0.2vw;
}

.navbox ul li a span {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbox ul li a:hover span {
    transform: scale(0.8);
}

.navbox ul li a:hover {
    background-color: white;
    color: black;
}

.changelog {
    display: inline-block;
    margin-left: 2vw;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.changelog:hover {
    transform: scale(0.8);
}