body {
    background-color: #2c2c2c;
    cursor: url('assets/cursor.png'), auto; min-height: 908px;
}

a {
    cursor: url('assets/cursorclick.png'), auto; 
}

.shake-head-back {
    position: absolute;

    height: 300px;

    left: 10px;
    top: 60px;
}

.abs-h1 {
    color: rgb(251, 106, 106);
    text-align: center;
}

pre {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
}

.warning-text p {
    margin: 0 0 16px 0;
}

.warning-text p:last-child {
    margin-bottom: 0;
}

.warning-welcome-text {
    background-color: rgba(141, 141, 141, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 150px;
    width: 50%;
    margin: 0 auto;
}

.welcome-proceed-button {
    display: flex;
    justify-content: center;
    margin: 24px 0;
}

.welcome-proceed-button button {
    background-color: rgb(208, 188, 188);
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.welcome-proceed-button button:hover {
    background-color: rgb(54, 9, 9);
    transform: translateY(-2px);
    color: wheat;
}

.welcome-proceed-button button:active {
    transform: translateY(0);
}

* {
    box-sizing: border-box;
}

.bg-image {
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}

@keyframes float {
      0% {
        transform: translateY(3px);
      }

      100% {
        transform: translateY(-0.8px);
      }
    }

@keyframes travel {
      0% {
        transform: translateX(-361px) translateY(50px);
        opacity: 0;
      }

      15% {
        opacity: 1;
      }

      24.999% {
        transform: translateX(-361px) translateY(50px);
        opacity: 0;
      }

      25% {
        transform: translateX(-206px) translateY(-5px);
        opacity: 0;
      }

      30% {
        opacity: 1;
      }

      49.999% {
        transform: translateX(-199px) translateY(-5.5px);
        opacity: 0;
      }

      50% {
        transform: translateX(-101px) translateY(15px);
        opacity: 0;
      }

      59% {
        opacity: 1;
      }

      74.999% {
        transform: translateX(-111px) translateY(17px);
        opacity: 0;
      }

      75% {
        transform: translateX(-381px) translateY(-15px);
        z-index: 2;
        opacity: 0;
      }

      80% {
        opacity: 1;
      }

      99.999999% {
        transform: translateX(-381px) translateY(-15px);
        z-index: 2;
        opacity: 0
      }
}
@keyframes jitter {
      0% {
        transform: rotate(1deg);
      }

      10% {
        transform: rotate(0deg);
      }

      20% {
        transform: rotate(0.1deg);
      }

      30% {
        transform: rotate(-1deg);
      }

      40% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(-0.6deg);
      }

      60% {
        transform: rotate(0deg);
      }

      70% {
        transform: rotate(-0.1deg);
      }

      80% {
        transform: rotate(0.2deg);
      }

      90% {
        transform: rotate(-1deg);
      }

      100% {
        transform: rotate(0deg);
      }
    }
@keyframes fallLeft {
    0% {
        transform: translateX(0px) rotate(0deg);
    }

    20% {
        transform: translateX(-22px) rotate(2deg);
    }

    100% {
        transform: translateX(-28px) rotate(-1deg);
    }
}
@keyframes fallRight {
    0% {
        transform: translateX(0px) rotate(0deg);
    }

    20% {
        transform: translateX(29px) rotate(-1deg);
    }

    100% {
        transform: translateX(34px) rotate(1.5deg);
    }
}

#mike-corpse,
#mike-corpse-1 {
    position: absolute;
    bottom: 134px;
    left: 742px;
    width: 196px;
    height: 100px;
}

#mike-corpse {
    background: url("assets/gore/mlaw-layer0.png");
    background-size: contain;
    z-index: 3;
    animation: jitter 420ms infinite;
}

#mike-corpse-1 {
    background: url("assets/gore/mlaw-layer1.png");
    background-size: contain;
    z-index: 5;
    animation: jitter 500ms infinite;
}

#mike-corpse-2 {
    background: url("assets/gore/mlaw-layer2.png");
    background-size: contain;
    z-index: 5;
    position: absolute;
    bottom: 157px;
    left: 749px;
    width: 62px;
    height: 65px;
    animation: jitter 530ms infinite;
}

.header-right-img {
    justify-content: right;
    /*align-content: right;*/
    text-align: right;
    position: relative;
    margin: 0 auto;
}