* {
    box-sizing: border-box;
}

body {
    background-color: rgb(0, 0, 0);
    transition: background-color .3s;
    margin: 0px;
    color: white;
    font-family: 'Oswald', sans-serif;
}

h1 {
    color: cyan;
}

img{
    width:30vw;
}

p {
    display: inline-block;
    max-width: max-content;
}

.main-container{
    background-color: transparent;

    width: 85vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
}
.row{
    background-color: transparent;

    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
}


.left{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:50%;
    height: 100%;
    gap: 22%;
}

.left-item{
    background-color: transparent;
    width:100%;
    height: 45vh;
    text-align: center;
    font-size: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.right{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:50%;
    height: 100%;
    gap: 22%;
}

.right-item{
    background-color: transparent;
    width:100%;
    height: 45vh;
    text-align: center;
    font-size: 3vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.nav {
    position: fixed;
    flex-flow: column wrap;
    width: 100%;
    padding: 1rem 0 1rem 0;
    top: 0;
    background-color: rgb(0, 133, 133);;
    z-index: 3;
    border-bottom: 1px solid white;
    transition: .5s;
}

.nav ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    list-style: none;
}


.nav li {
    width: 20%;
}


.letter-list {
    display: block;
    padding: 0.5rem 0 0.5rem 0;
    width: 100%;
    text-align: center;
    transition: 0.5s;
    border-radius: 5px;
}

.letter-list:hover {
    background-color: cyan;
}

a { 
    color: white; 
    text-decoration:none
}

.code{
    color: rgb(0, 160, 0); 
    font-size: 5vh; 
    margin: 0; 
    width: 90%;
    transition: 0.5s;
}

.code:hover {
    color: rgb(0, 218, 0);
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
  }

  @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px lime, 0 0 40px lime, 0 0 50px lime, 0 0 60px lime, 0 0 70px lime;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px rgb(0, 218, 0), 0 0 40px rgb(0, 218, 0), 0 0 50px rgb(0, 218, 0), 0 0 60px rgb(0, 218, 0), 0 0 70px rgb(0, 218, 0), 0 0 80px rgb(0, 218, 0);
    }
  }

.glitch{
    color: white;
    font-size: 20vh;
}

.glitch:hover {
    -webkit-animation: glitch .5s ease-in-out infinite alternate;
    -moz-animation: glitch .5s ease-in-out infinite alternate;
    animation: glitch .5s ease-in-out infinite alternate;
}


  
  @keyframes glitch {
    0% {
      text-shadow: -4px 6px 0 red, 4px -6px 0 blue;
      transform: translate(var(--glitch-translate));
      font-style: italic;
    }
    6% {
      text-shadow: 4px -6px 0 red, -4px 6px 0 blue;
      font-style: italic;
    }
    12%, 100% {  text-shadow: none; transform: none; font-style:normal; }
  }

  .skull{
    opacity: 100%;
    transition: 0.5s ease-in-out;
  }
  .skull:hover{
    opacity: 0%;
  }

.des{
    background-color: cyan;
    border-radius: 20px;
    transition: 1s ease-in-out;
}

.des:hover{
    background-color: rgb(75, 128, 128);
}

.night{
    opacity: 0%;
    transition: 1s ease-in-out;
}

.night:hover{
    opacity:100%;
}

.depress{
    background-color: yellow;
    border-radius: 100px;
    transition: 1s ease-in-out;
}

.depress:hover{
    background-color: blue;
    border-style: solid;
    border-width: 5vw;
    border-color: rgb(0, 0, 87);
    border-radius: 10px;
    width: 10vw;
}

.vib{
    background-color: rgb(75, 128, 128);
    border-radius: 20px;
    transition: 1s ease-in-out;
}

.vib:hover{
    background-color: cyan;
}

.draggable {
    cursor: grab;
}

.unknown {
    --s: 10vw;   /* the size of the image */
    --b: 8px;     /* the border thickness*/
    --g: 14px;    /* the gap */
    --c: cyan; /* the color */
    
    width: var(--s);
    aspect-ratio: 1;
    outline: calc(var(--s)/2) solid #0009;
    outline-offset: calc(var(--s)/-2);
    cursor: pointer;
    transition: .3s;
  }
  .unknown:hover {
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);
  }
  
  img + img {
    border-radius: 50%;
  }

  .brush {
    width: 20vw;
    rotate: -60deg;
    animation: rotate 1s infinite ease-in-out alternate;
  }

@keyframes rotate {
    0% {
        rotate: -60deg;
    }
    100% {
        rotate: 60deg;
    }
}

.hesitant {
    background-color: cyan;
    border-radius: 100%;
    transition: 1s;
    transition-delay: 1s;
}

.hesitant:hover {
    background-color: red;
    border-radius: 0%;
    border-width: 5vw;
    border-color: red;
    border-style: solid;
}

.history{
    transition: 1s ease-in-out;
}

.history:hover {
    filter:grayscale();
}

.horror:hover {
    width: 150%;
    height: 150%;
}

.error{
    animation: error 0.5s infinite;
}

@keyframes error {
    0% {
        color: red;
    }
    50% {
        color: black;
    }
}

.best{
    animation: best 2.5s infinite ease-in-out;
}

@keyframes best {
    0% {
        color: yellow;
    }
    50% {
        color: black;
    }
}

.tech {
    animation: tech 1s infinite ease-in-out;
}

@keyframes tech {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}


.life:hover {
    transition: 1s ease-in-out;
    margin: 0px;
    color: grey;
    font-family: 'Oswald', sans-serif;
    font-size: 3vh;
    text-shadow: none;
    filter: none;
}

.life {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    font-size: 20vh;
    margin: 0;
    color: red;
    text-shadow: -2px -2px 0 #fcd705, 2px -2px 0 #fcd705, -2px 2px 0 #fcd705, 2px 2px 0 #fcd705;
    filter: drop-shadow(3px 3px 0px black);
}

.nost {
    transition: 1s ease-in-out;
    filter:sepia(0);
}

.nost:hover {
    filter:sepia(1);
}

.infinite {
    transition: .75s ease-in-out;
}

.infinite:hover {
    rotate: 90deg;
}

.light {
    transition: .75s ease-in-out;
}

.light:hover{
    box-shadow: 0px 0px 3px 5px yellow; 
}

.pop {
    transition: 1s ease-in-out;
}

.pop:hover {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    font-size: 20vh;
    margin: 0;
    color: red;
    text-shadow: -2px -2px 0 #fcd705, 2px -2px 0 #fcd705, -2px 2px 0 #fcd705, 2px 2px 0 #fcd705;
    filter: drop-shadow(3px 3px 0px black);
}

.music {
    transition: 1s ease-in-out;
}

.music:hover {
    text-shadow: -42px -42px 0 cyan, 42px -42px 0 cyan, -42px 42px 0 cyan, 42px 42px 0 cyan;
}

.strive {
    color: grey;
    transition: 1s ease-in-out;
}

.strive:hover {
    color: yellow;
    font-size: 20vh;
}

.blur{
    filter:blur(100px);
    transition: 1s ease-in-out;
}

.blur:hover {
    filter:blur(0);
}