@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      body, html {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', Arial, sans-serif;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-30px);
        }
        60% {
          transform: translateY(-15px);
        }
      }
      .bounce {
        animation: bounce 1s ease;
      }
      .section-one {
        height: 100vh;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #ff6b6b;
        animation: backgroundColorChange 15s infinite linear;
        color: white;
        text-align: center;
        font-family: 'Poppins', Arial, sans-serif;
      }
      @keyframes backgroundColorChange {
        0% { background-color: #c62828; } /* Darker Red */
        25% { background-color: #2e7d32; } /* Darker Green */
        50% { background-color: #1565c0; } /* Darker Blue */
        75% { background-color: #f57f17; } /* Darker Orange */
        100% { background-color: #c62828; } /* Darker Red */
      }
      .logo {
        max-width: 65%;
        height: auto;
        margin-bottom: 1em;
      }
      .tagline {
        font-size: calc(6% + 2vw);
        margin-top: 0.5em;
        font-weight: 500;
      }
      .top-right-button {
        position: absolute;
        top: 20px;
        right: 10%;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        color: white;
        border: none;
      }
      .definition {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px; /* Responsive font size */
        text-align: center;
        max-width: 80%;
        line-height: 1.5;
      }
      .definition .term {
        font-weight: bold;
      }
      .definition .pronunciation {
        font-style: italic;
      }
      .definition .quote {
        font-size: 90%;
        font-style: italic;
        margin-top: 10px;
        display: block;
      }
      .footer {
        text-align: center;
        padding: 30px 20px 60px;
        background-color: #f4f4f4;
        font-family: "Poppins", Arial, sans-serif;
        font-weight: 400;
      }
      .footer div {
        font-size: 18px;
        margin-bottom: 15px;
      }
      .social-media {
        display: inline-flex;
        gap: 15px;
        margin: 20px 0;
      }
      .social-button {
        width: 50px; /* Adjust size as needed */
        height: 50px; /* Adjust size as needed */
        border-radius: 50%;
        border: 2px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.3s, transform 0.3s;
        cursor: pointer;
        color: black; /* Set icon color to black */
        font-size: 24px; /* Adjust icon size as needed */
        text-decoration: none; /* Remove underline */
      }
      .social-button:hover {
        border-color: grey;
        transform: scale(1.2);
      }

      .social-button i {
        color: black; /* Ensure icon color is black */
      }
      hr {
        border: 0;
        height: 1px;
        background-color: black;
        width: 80%;
        margin: 30px auto;
      }

      .copyright {
        font-size: 14px;
        color: #333;
      }
      @media (max-width: 768px) {
        .tagline {
          font-size: calc(0.8em + 1vw);
        }

        .top-right-button {
          top: 10px;
          right: 10px;
          font-size: 12px;
        }

        .definition {
          font-size: calc(3% + 2vw); /* Increase font size for smaller screens */
        }

        hr {
          width: 85%;
        }

        .footer div {
          font-size: 16px;
        }

        .social-button {
          width: 45px;
          height: 45px;
        }

        .social-button img {
          width: 22px;
          height: 22px;
        }

        .copyright {
          font-size: 12px;
        }
      }
      @media (max-width: 480px) {
        .definition {
          font-size: calc(4% + 3vw); /* Further increase font size for very small screens */
        }

        .footer div {
          font-size: 14px;
        }

        .social-button {
          width: 40px;
          height: 40px;
        }

        .social-button img {
          width: 20px;
          height: 20px;
        }

        .copyright {
          font-size: 10px;
        }
      }