/* Basic styling for body */
body {
    
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e8e8e8;
}
/* Style for the header */
header {
    padding: 20px;
    background-color: #0F2844; /* Background color of the header */
    text-align: Left; /* Center-aligns the text and logo */
}

/* Style for the logo image */
.logo {
    max-width: 150px; /* Adjust the maximum width of the logo */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it appears as a block-level element */
    margin: 0 auto 10px; /* Center the logo and add spacing below it */
}

/* Style for the header text */
header h1 {
    font-family: "Apple Chancery", cursive; /* Use the preferred font */
    color: #ffffff; /* Text color */
    margin: 0; /* Remove default margin */
}


img {
    width: 100%; /* Responsive width */
    max-width: 600px; /* Max width to avoid stretching */
    height: auto; /* Maintain aspect ratio */
}


main {
    padding: 20px;
}
/* Reset default list styles */
ul.nav-buttons {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #416189; /* Match the header background color */
    text-align: center;
}

/* Style each list item as a button */
ul.nav-buttons li {
    display: inline-block;
}

/* Style for the links */
ul.nav-buttons li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    font-family: "URW Chancery L", cursive; /* Use the preferred font */
    font-size: 22px;
}

/* Change the color on hover */
ul.nav-buttons li a:hover {
    background-color: #748DA1; /* Slightly lighter shade */
}
figure {
    text-align: center; /* Center the content inside the figure */
    margin: 20px auto;
}

figcaption {
    margin-top: 10px; /* Space between image and caption */
    font-style: italic; /* Italicize the caption */
    color: #555; /* Subtle color for the caption */
    font-family: Arial, sans-serif; /* Set the caption font */
}
/* General Styling */
body {
    font-family: 'Arial', sans-serif;
    text-align: center;
}

/* Centering the main content */
main {
    text-align: center;
    padding: 20px;
}

.form-container {
    display: inline-block;
    text-align: center;
}

#passcode-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    margin-top: -200px;
}

.passcode-input {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.passcode-input input {
    padding-right: 30px;
    padding: 10px;
    font-size: 16px;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Centering the footer content */
footer {
    text-align: center;
    padding: 10px;
    background-color: #1f456E; /* Match header and nav background color */
    color: white;
}