html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-family: Oswald, sans-serif;
    }

    body.loaded {
      background-color: #d0b594;
    }

    #splash {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      transition: opacity 1s ease-in-out;
    }

    #splash.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .blood {
      color: #c20000;
    }

    .enter-btn {
      padding: 15px 30px;
      border: none;
      background-color: white;
      color: black;
      font-size: 20px;
      cursor: pointer;
      border-radius: 5px;
      transition: all 0.3s ease-in-out;
    }

    .enter-btn:hover {
      background-color: #c20000;
      color: white;
    }

    #main-content {
      display: none;
    }

    body.loaded #main-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background-color: #d0b594;
    }

    .michael {
      max-width: 100%;
      max-height: calc(100vh - 15vh);
      object-fit: contain;
      animation: floatAndTilt 10s linear infinite;
    }

    footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      color: #000;
    }

    footer p {
      font-size: 28px;
    }

    .social-links {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }

    .social-links a {
      color: #000;
      text-decoration: none;
      font-size: 24px;
      transition: all 0.2s ease-in-out;
    }

    .social-links a:hover {
      color: #c20000;
      box-shadow: #c20000 0px 2px;
    }

    @media (max-width: 600px) {
      .social-links {
        flex-direction: column;
        align-items: center;
      }
    }

    @keyframes floatAndTilt {
      0% {
        transform: translateY(0px) rotate(0deg);
      }

      25% {
        transform: translateY(-10px) rotate(-2deg);
      }

      50% {
        transform: translateY(0px) rotate(0deg);
      }

      75% {
        transform: translateY(10px) rotate(2deg);
      }

      100% {
        transform: translateY(0px) rotate(0deg);
      }
    }

    footer p:nth-of-type(1) {
      margin-bottom: 0px;
    }

    footer p:nth-of-type(2) {
      margin-top: 0px;
    }

    footer p img {
      width: 46px;
    }