@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

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

      html, body {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        background-color: rgb(222, 222, 222);
      }

      body::selection {
        background-color: rgb(255, 221, 0);
      }

      nav {
        background-color: white;
        width: 100vw;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
      }

      .logo1 {
        display: flex;
        gap: 25px;
        align-items: center;
      }

      .logo1 a {
        text-decoration: none;
        color: black;
        font-weight: 500;
         padding: 5px 10px;
         border-radius: 5px;
      }

      .link2 {
        border: 1px solid black;
        border-radius: 5px;
        padding: 5px 10px;
      }

      .link1:hover {
        background-color: rgb(193, 193, 193);
      }

      .link2:hover {
        background-color: rgb(255, 0, 0);
        color: #fff;
        border-color: rgb(255, 0, 0);
      }

      main {
        height: 90vh;
        width: 100%;
      }

      .item {
        width: 100%;
      }

      .item1 {
        text-align: center;
        height: 30vh;
      }

      .item1 h3 {
        padding-top: 50px;
        opacity: 0.33;
        font-weight: 100;
      }

      .item1 h1 {
        padding-top: 10px;
        font-size: 70px;
      }

      .item2 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25vh;
        position: relative;
      }

      .typing-area {
        position: relative;
        font-family: "Merriweather", serif;

        width: 1100px;
        height: 120px;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        box-shadow: 4px 4px 40px 4px rgb(145, 145, 145);
        overflow: hidden;
      }

      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 40px;
        padding: 20px 50px;
        border: none;
        outline: none;
        background: transparent;
        color: transparent;
        caret-color: transparent;
        z-index: 1;
      }

      .text-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(0, -50%);
        white-space: nowrap;
        font-size: 28px;
        color: #111827;
        pointer-events: none;
        transition: transform 0.03s linear;
        z-index: 2;
      }

      .caret {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 2.6em;
        background: #111827;
        animation: blink 0.7s steps(1) infinite;
        z-index: 3;
      }

      @keyframes blink {
        50% {
          opacity: 0;
        }
      }

      .correct {
        color: #16a34a;
      }

      .wrong {
        color: #ef4444;
      }

      .item3 {
        height: 35vh;
        margin-top: -50px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }

      .info {
        height: 120px;
        width: 120px;
        border-radius: 10px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 500;
      }

      .info1 {
        border-radius: 50%;
        border: 6px solid rgb(255, 221, 0);
        font-size: 50px;
      }

      @media (max-width: 1200px) {
        .typing-area,
        .box {
          width: 90vw;
          max-width: 1100px;
        }

        .item1 h1 {
          font-size: clamp(36px, 5vw, 70px);
        }
      }