@font-face {
    font-family: 'montserratthin';
    src: url('/fonts/montserrat-variablefont_wght-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-variablefont_wght-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}


body {
            margin: 0;
            height: 100vh;
            width: 100vw;
            justify-content: center;
            align-items: center;
    
            
        }
        
#layout {
  position: absolute;
  top: 30vh;
  left: 50%; /* Use 50% instead of 50vw */
  width: 50vw;
  transform: translateX(-50%);
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevents horizontal scrolling */
}
        
.menu-bar {
            position: absolute;
            top: -30vh;
            left: 80vh;
            width: 100%;
            padding: 1rem 0;
        }
        
.menu-item {
            margin: 0 15px;
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
        }
        
.menu-item:hover {
            text-decoration: underline;
        }
        
.main {
            width: 100%;
            text-align: center;
        }
        
.main h1 {
            margin-bottom: 0.5rem;
            font-size: 2.5rem;
        }
        
.main p {
            font-size: 1.5rem;
            color: #6c757d;
        }
        
.button-link, .button-link:visited {
            display: inline-block;
            padding: 10px 20px;
            margin: 10px;
            font-size: 30px;
            text-decoration: none;
            /* This maintains the underline */
            color: #333;
            /* Text color */
            background-color: #f8f9fa;
            /* Button color */
            border: 2px solid #ddd;
            /* Button border */
            border-radius: 5px;
            /* Rounded corners for the button */
            transition: all 0.3s ease;
        }
        
.button-link:hover, .button-link:focus {
            background-color: #B6D0DF;
            /* Slightly darker button color on hover/focus */
            border-color: #B6D0DF;
            /* Darker border color on hover/focus */
            text-decoration: none;
            /* Optionally remove underline on hover/focus */
            color: #fff;
            /* Optionally change text color on hover/focus */
        }