:root {

      --color-primary: #0c1c2c;
      --color-secondary: #A22224;

      --color-dark: #111111;
      --color-light: #ffffff;

      --color-text: #222222;

      --font-primary: 'Lexend', sans-serif;

      --transition: 0.3s ease;
    }


@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend/Lexend-Bold.ttf') format('truetype');
  font-weight: 700;
}

    /* RESET */

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

    html {
      scroll-behavior: smooth;
    }

    body {

      min-height: 100vh;

      font-family: var(--font-primary);

      background:
        linear-gradient(
          rgba(12, 28, 44, 0.92),
          rgba(12, 28, 44, 0.92)
        ),
        url("../img/home.png") center/cover no-repeat;

      display: flex;

      align-items: center;

      justify-content: center;

      padding: 2rem;

      color: var(--color-light);

      overflow: hidden;
    }

    /* MAIN CONTENT */

    .construction-container {

      text-align: center;

      max-width: 700px;

      animation: fadeIn 1s ease;
    }

    .construction-icon {

      font-size: 6rem;

      color: var(--color-secondary);

      margin-bottom: 2rem;

      animation:
        float 3s ease-in-out infinite;
    }

    .construction-title {

      font-size:
        clamp(2.5rem, 6vw, 4.5rem);

      font-weight: 700;

      margin-bottom: 1rem;

      letter-spacing: 2px;
    }

    .construction-text {

      font-size:
        clamp(1rem, 2vw, 1.3rem);

      line-height: 1.8;

      opacity: 0.9;
    }

    /* OPTIONAL BUTTON */

    .construction-button {

      margin-top: 3rem;

      display: inline-flex;

      align-items: center;

      gap: .75rem;

      padding:
        1rem 2rem;

      border-radius: 999px;

      background: var(--color-secondary);

      color: white;

      text-decoration: none;

      transition: var(--transition);

      font-weight: 500;
    }

    .construction-button:hover {

      transform: translateY(-3px);

      background: #c22a2c;
    }

    /* ANIMATIONS */

    @keyframes fadeIn {

      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {

      0% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }

      100% {
        transform: translateY(0);
      }
    }