@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500');
       body {
        font-family: 'Be Vietnam Pro', sans-serif;
        background-color: #262626;
        color: #DBCf7A;
        margin: 0;
        padding: 0;
      }
      
      #header {
        background-color: #262626;
        padding: 20px;
        text-align: center;
      }
      
      #header h1 {
        margin: 0;
        font-size: 24px;
        font-family: 'Be Vietnam Pro', sans-serif;
        color: #fff;
        letter-spacing: 2px;
        text-transform: uppercase;
      }
      
      #header img {
        width: 20%;
        height: auto;
      }
      
      #content {
        text-align: center;
        padding: 20px;
      }
      
      #content h1 {
        font-size: 24px;
        cursor:pointer;
        text-transform: uppercase;
        font-family: 'Be Vietnam Pro', sans-serif;
        line-height: 1.5;
        margin-bottom: 20px;
      }
      
      #searchbar {
        text-align: center;
        margin: 20px auto;
          font-family: 'Be Vietnam Pro', sans-serif;
      }
      
      .form__input {
        padding: 15px;
        margin-bottom: 20px;
        width: calc(30% - 30px);
        border: none;
        border-radius: 5px;
        background-color: transparent;
        color: #DBCf7A;
        box-shadow: 0 0 3px white;
        transition: 0.8s;
        text-align:center;
        font-family: 'Be Vietnam Pro', sans-serif;
      }
      
      a{
        text-decoration: none;
        color:#DBCf7A;
        width:50px;
        height:50px;
        padding-right: 1px;
        padding-left: 1px;
        text-align: center;
        align-self: center;
      }
      
      .form__input::placeholder {
        color: #aaa;
        text-align: center;
      }
      
      .form__input:focus {
        outline: none;
        background-color: black;
         text-align:center;
         border-radius: 40px;
         width: 500px;
         box-shadow: 0 0 9px white;
      }
      #footer {
        position: fixed;
        left: 0;
        bottom: 0;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #99ccff;
         font-family: 'Be Vietnam Pro', sans-serif;
        width: 100%;
        height:15px;
        background-color: #000;
        padding-top: 7.5px;
        padding-bottom: 10px;
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
      
      #footer p {
        margin: 0;
      }
      
      .fa {
        font-size: 24px;
        margin-right: 10px;
        color: #fff;
      }
      
      .fa:hover {
        color: #aaa;
      }
              #uv-error {
        color: #ff6666 !important;
        white-space: pre-wrap;
      }
      
      #uv-error-code {
        font-size: 12px;
        color: #fff;
        font-family: "Courier New", Courier, monospace;
      }
      
      #uv-register-sw {
        color: #DBCf7A;
        background: #555555;
        cursor: pointer;
        outline: none;
        border: none;
        border-radius: 6px;
        padding: 16px 20px;
        line-height: 16px;
        display: none;
      }
      
      #uv-register-sw:active {
        background: #333333;
      }
      
      #uv-register-sw.show {
        display: block;
      }
      .navbar {
        background-color: transparent;
        overflow: hidden;
        border-radius: 10px;
          margin: 14px;
          box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
      }
      
      .navbar a {
        float: right;
        display: block;
        color: #DBCf7A;
        text-align: center;
        text-decoration: none;
        font-size: 40px;
        transition: 0.9s;
        margin:10px;
      }
      
      .navbar a:hover {
        transform: scale(1.1);
      }
      .material-symbols-outlined {
        font-size: 15px;
      }