body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #1f2c39;
     color: #bdc3c7;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}
 header {
     background-color: #19252f;
     padding: 0.3cm;
     text-align: center;
     position: relative;
}
 .title:hover {
     color: #fff;
}
 .title {
     color: #bdc3c7;
     font-weight: bold;
     margin: 0;
     font-size: 32px;
     cursor: pointer;
     transition: color 0.3s ease-in-out;
     text-decoration: none;
}
 nav {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     overflow: hidden;
     max-height: 0;
     transition: max-height 0.2s ease-in-out;
}
 nav a {
     color: #bdc3c7;
     text-decoration: none;
     margin: 0 1em;
     font-weight: bold;
     position: relative;
     opacity: 1;
}
 nav a::before {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: #bdc3c7;
     transform: scaleX(0);
     transform-origin: bottom right;
     transition: transform 0.3s ease-in-out;
}
 nav a:hover::before {
     transform: scaleX(1);
     transform-origin: bottom left;
}
 footer {
     text-align: center;
     margin-top: auto;
     background-color: #19252f;
     padding: 0.2cm;
}
 .loading-box {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #19252f;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
}
 .loading-text {
     font-weight: bold;
     position: fixed;
     bottom: 0;
     opacity: 0.1;
}
 .loading-spinner {
     border: 4px solid rgba(0, 0, 0, 0.1);
     border-left-color: #273746;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin 0.85s linear infinite;
}
 @keyframes spin {
     to {
         transform: rotate(360deg);
    }
}
 .fade-out {
     animation: fadeOut 0.3s ease forwards;
    /* Apply fade-out animation */
}
 @keyframes fadeOut {
     from {
         opacity: 1;
    }
     to {
         opacity: 0;
         visibility: hidden;
    }
}
 @media only screen and (max-width: 710px) {
     nav {
         flex-direction: column;
         align-items: center;
    }
     .menu-toggle {
         display: block;
         cursor: pointer;
         font-size: 30px;
         color: #bdc3c7;
         background: none;
         border: none;
         outline: none;
         padding: 0;
         position: absolute;
         right: 0.3cm;
         top: 8px;
    }
     .title {
         font-size: 25px;
    }
     nav.open {
         max-height: 200px;
        /* Adjust the maximum height as needed */
         animation: slideDown 0.5s ease-in-out forwards;
    }
     nav.close {
         max-height: 0;
         animation: slideUp 0.5s ease-in-out forwards;
    }
     nav a {
         margin: 5px 0 5px;
    }
     @keyframes slideDown {
         from {
             max-height: 0;
        }
         to {
             max-height: 200px;
            /* Adjust the maximum height as needed */
        }
    }
     @keyframes slideUp {
         from {
             max-height: 200px;
            /* Adjust the maximum height as needed */
        }
         to {
             max-height: 0;
        }
    }
}
 @media only screen and (min-width: 711px) {
     .menu-toggle {
         display: none;
    }
     nav {
         max-height: none;
         overflow: visible;
    }
     nav a {
         opacity: 1;
         transition: opacity 0.3s ease-in-out;
    }
     nav a:hover::before {
         transform: scaleX(1);
         transform-origin: bottom left;
    }
}