* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: #f9f9f9;
      background-size: cover;
      color: #535368;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      flex-direction: column;
      text-align: center;
    }

    .artwork {
      height: auto;
      max-height: 50vh;
      max-width: 80vw;
      margin-bottom: 4rem;
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #2f2e41;
    }

    p {
      line-height: 1.6;
      font-size: 1.4rem;
    }

        #countup {
            display: flex;
            justify-content: center;
            gap: 15px;
            perspective: 500px;
        }
        .time-box {
            position: relative;
            width: 70px;
            height: 90px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            text-align: center;
            font-size: 2.5rem;
            font-weight: bold;
            line-height: 90px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
        }
        .flip {
            animation: flipAnimation 1.0s ease-in-out, opacity 0.4s ease-out;
        }
        @keyframes flipAnimation {
            0% { transform: rotateX(0deg); }
            50% { transform: rotateX(-90deg); }
            100% { transform: rotateX(0deg); }
        }

    @media only screen and (max-width: 500px) {
      html {
        font-size: 75%;
      }
    }

    @media (prefers-color-scheme: dark) {
      body{
        background-color: #535368;
        color: #cddcdd;
      }
      h1 {
        color: #f9f9f9;
      }
    }