body {
        background-color: #24273a;
        font-family: 'BarlowCondensed-Regular', sans-serif;
        color: #487cff;
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #1e2030;
        color: #cad3f5;
        text-align: center;
     }

    @font-face {
        font-family: 'BarlowCondensed-Thin';
        src: url('fonts/BarlowCondensed-Thin.ttf');
    }

    @font-face {
        font-family: 'BarlowCondensed-Regular';
        src: url('fonts/BarlowCondensed-Regular.ttf');
    }

    @font-face {
        font-family: 'BarlowCondensed-Light';
        src: url('fonts/BarlowCondensed-Light.ttf');
    }

    h1 {
        font-family: 'BarlowCondensed-Regular';
        color: #487cff;
        text-align: center;
    }
      
    h2 {
        font-family: 'BarlowCondensed-Thin';
        color: #487cff;
        text-align: center;
    }

    p {
        font-family: 'BarlowCondensed-Light';
        color: #cad3f5;
        font-size: 20px;
        text-align: center;
    }

    a {
        color: #487cff;
        text-decoration: underline;
    }

    .text {
        width: 50%; 
        margin: 0 auto; 
        background-color: #343a40; 
    }

    .outer-container {
        width: 70%;
        margin: 20px auto;
        padding: 20px;
        background-color: #1e2030;
        color: #cad3f5;
        border: 1mm ridge #487cff;
    }

    .inner-container {
        width: 50%;
        margin: 10px auto;
        padding: 15px;
        background-color: #343a40;
        color: #ffffff;
        border: 1mm ridge #487cff;
    }

    .search-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
    }


    .search-bar {
      width: 500px;
      padding: 10px;
      border: 1px solid #1e2030;
      border-radius: 8px 0 0 8px;
      background-color: #2b2e36;
      font-size: 16px;
      color: #809fa3;
      outline: none;
      transition: border-color 0.3s;
    }

    .search-bar:focus {
      border-color: #0056b3; 
    }


    .search-button {
      padding: 10px 20px;
      background-color: #2b2e36; 
      color: #809fa3;
      border: 1px solid #1e2030;
      border-radius: 0 8px 8px 0;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .search-button:hover {
      background-color: #003f7f; 
      color: #809fa3;
    }

    .search-button:active {
      background-color: #5588ff; 
    }