body {
    font-family:'Orbitron';
    text-align:justify;
    letter-spacing: 0.12vw;
    background-color: white;
    fill:white;
    color: black;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomInX {
    from {
        transform: scaleX(0.1);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes zoomInY {
    from {
        transform: scaleY(0.1);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes waviy {
  40%,100% {
    transform: translateY(0);
    opacity: 1;
  }
  20% {
    transform: translateY(-0.8vw);
    opacity: 0;
  }
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1vw);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(4deg);
    }
    50% {
        transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.hbar {
    display:flex;
    background-color:black;
    margin-left:auto;
    margin-right:auto;
    height: 0.1vw;
    width:50%;
    opacity: 0;
    transform: scale(0.1);
    z-index: 5;
    animation: zoomIn 0.3s ease-out 1s forwards;
}

h1 {
  position: relative;
  text-align: center;
  -webkit-box-reflect: below -1.5vw linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 4vw;
  cursor: default;
}

h1 span {
  font-family: 'Orbitron';
  position: relative;
  display: inline-block;
  color:rgb(75, 185, 222);
  text-transform: uppercase;
  opacity:0;
  animation: waviy 2s forwards;
  animation-delay: calc(0.08s * var(--i));
}

.jump-once {
  animation: jump 0.5s forwards;
}

.menu {
    display:flex;
    background-image:linear-gradient(rgb(211, 211, 211),rgb(143, 170, 170));
    justify-content:center;
    align-items:center;
    height:7vw;
    text-justify:center;
    border:0.1vw solid black;
    white-space: pre-line;
    text-shadow: 0.05vw 0.05vw rgb(0, 0, 0);
}

.menu a:not(.selected) {
    color:blue;
    margin: 0 4vw;
    text-decoration:none;
    font-size:2vw;
}

.menu a:not(.selected):hover {
    font-size:2.2vw;
    color:darkblue;
    animation: wiggle 0.3s ease-in-out;
}

.selected {
    color: grey;
    margin: 0 4vw;
    text-decoration:none;
    font-size:2vw;
    cursor: default;
}

.welcome {
    display:flex;
    justify-content:center;
    align-items:center;
    padding-left:15%;
    padding-right:15%;
    padding-top:2vw;
    font-size:1.6vw;
    padding-bottom:2vw;
}

.welcome>p {
    opacity:0;
    transform: translateX(20px);
    animation: slideInFromRight 1s ease-out forwards;
}

.group {
    position: relative;
    background-image:linear-gradient(rgb(226, 242, 248),rgb(183, 195, 199));
    font-size:1.6vw;
    animation: appear 0.5s ease-out forwards;
}