@font-face {
    font-family: 'C64';
    src: url('/fonts/c-64.ttf') format('truetype'),
         url('/fonts/c-64.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 16px; /* Set base font size for rem units */
}

body {
    font-family: 'C64', sans-serif; /* Apply the C64 font to the body */
    text-transform: uppercase; /* Make all text uppercase */
    color: #FFFFFF; /* Set text color to white */
    background-color: #011e8b; /* Set background color */
    text-align: left; /* Default text alignment */
    -webkit-font-smoothing: auto;
    -webkit-osx-font-smoothing: auto;
    line-height: 1.5; /* Add separation between lines of text */
    margin: 0;
    height: 100%;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange children in a column */
    padding: 0; /* Default padding */
    justify-content: flex-start; /* Default justify content */
    align-items: flex-start; /* Default align items */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Link styles */
a {
    color: #00FFFF; /* Set link color to cyan */
    text-decoration: none; /* Remove underline from links */
}

a:hover, a:focus {
    text-decoration: underline; /* Add underline on hover and focus for accessibility */
}

/* Button, input, textarea, and label styles */
button, input, textarea, label {
    font-family: inherit; /* Inherit font from parent */
    font-size: 1rem; /* Ensure font size is consistent with other text */
    color: inherit; /* Inherit color from parent */
    background-color: transparent; /* Transparent background */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    outline: none; /* Remove outline */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    text-transform: uppercase; /* Ensure text is uppercase */
}

/* Submit button styles */
button[type="submit"] {
    font-size: 1rem; /* Ensure font size is consistent with other text */
    outline: 2px solid #FFFFFF; /* Add white outline around submit button */
    padding: 10px 20px; /* Add padding for better appearance */
    cursor: pointer; /* Change cursor to pointer on hover */
}

button[type="submit"]:hover, button[type="submit"]:focus {
    background-color: #FFFFFF; /* Add background color on hover and focus */
    color: #011e8b; /* Change text color on hover and focus */
}

/* Textarea styles */
textarea {
    border: 2px solid #FFFFFF; /* Add white border around textarea */
    padding: 10px; /* Add padding for better appearance */
}

/* Number input styles */
input[type="number"] {
    border: 2px solid #FFFFFF; /* Add white border around number input */
    padding: 5px; /* Add padding for better appearance */
    -moz-appearance: textfield; /* Hide up/down arrows in Firefox */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide up/down arrows in Chrome, Safari, Edge, and Opera */
    margin: 0; /* Remove margin */
}

/* Table styles */
table {
    width: 100%; /* Ensure table takes full width */
    border-collapse: collapse; /* Collapse borders */
    margin-top: 0; /* Default margin */
    table-layout: auto; /* Default table layout */
}

th, td {
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    text-align: left; /* Default text alignment */
    position: static; /* Default position */
    word-wrap: break-word; /* Break words to prevent overflow */
}

/* Label styles */
label {
    cursor: default; /* Default cursor */
    display: inline-block; /* Default display */
    color: inherit; /* Inherit color from parent */
    font-size: 1rem; /* Ensure font size is consistent with other text */
    text-shadow: none; /* Remove text shadow */
    line-height: normal; /* Default line height */
    text-transform: uppercase; /* Ensure text is uppercase */
}

/* Radio button styles */
input[type="radio"] {
    display: none; /* Hide the radio button */
}

input[type="radio"]:checked + label {
    color: #bc3fff; /* Change text color when radio button is selected */
}

/* Menu styles */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    background-color: #011e8b; /* Set background color */
    padding: 10px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.menu ul {
    list-style-type: none;
    padding: 0;
}

.menu ul li {
    margin-bottom: 10px;
}

.menu ul li a {
    text-decoration: none;
    color: #FFFFFF; /* Set text color to white */
}

.content {
    margin-left: 220px; /* Adjust based on the width of the menu */
    padding: 20px;
    padding-right: 20px; /* Add padding to the right */
    flex: 1; /* Allow content to grow and fill available space */
    width: calc(100% - 240px); /* Ensure content takes full width minus menu width and right padding */
}

section {
    margin-bottom: 40px; /* Add space between sections */
}

/* Blinking animation */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blink {
    animation: blink 0.5s ease-in-out 3; /* Blink 3 times */
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    html {
        font-size: 14px; /* Adjust base font size for smaller screens */
    }

    .menu {
        position: static; /* Make menu static on mobile */
        width: 100%; /* Full width on mobile */
        box-shadow: none; /* Remove box shadow on mobile */
    }

    .content {
        margin-left: 0; /* Remove left margin on mobile */
        padding: 10px; /* Adjust padding on mobile */
        padding-right: 10px; /* Add padding to the right on mobile */
        width: 100%; /* Ensure content takes full width */
    }

    button, input, textarea, label, input[type="radio"] {
        font-size: 1rem; /* Ensure font size is consistent with other text */
        text-transform: uppercase; /* Ensure text is uppercase */
    }
}