/* BODY */
body {
    background: rgb(58, 41, 63) no-repeat;
    color: rgb(240, 240, 240);
    font-size: 14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
}
::placeholder {
    color: rgb(20, 20, 20);
    opacity: 1;  /* Firefox */
}
::-ms-input-placeholder {  /* Edge 12-18 */
    color: rgb(20, 20, 20);
}

.status-a {
    color: rgb(28, 132, 237);  /* Default color */
    /* text-decoration: none; */
}
    .status-a:hover {
        color: rgb(12, 188, 211);  /* Color when hovered */
    }
    .status-a:active {
        color: rgb(12, 188, 211);  /* Color when clicked */
    }
    .status-a:visited {
        color: rgb(168, 70, 214);  /* Color after being clicked if it's a visited link */
    }
.spacer {
    height: 0px; /* Creates vertical spacing */
}


.centre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: auto;
    text-align: center;
}


/* NAVIGATION BAR */
.navbar {
    position: fixed;
    top:0;
    width: 100vw;
    height: 3vh;
    display: flex;
    justify-content: center; /* Center the navigation buttons */
    align-items: center;
    background-color: rgb(25, 20, 55); /* Dark background color for the bar */
    padding: 10px 0; /* Add vertical padding */
    border-bottom: 2px solid rgb(10,10,10);
    z-index: 2;
}
.nav-button {
    color: rgb(240, 240, 240); /* Make the text white */
    text-decoration: none; /* Remove the underline */
    margin: 0 15px; /* Space between buttons */
    padding: 10px 20px; /* Add padding for clickable area */
    border-radius: 5px; /* Rounded corners */
    background-color: transparent; /* Default button background */
    transition: background-color 0.1s ease; /* Smooth hover effect */
}
    .nav-button:hover {
        background-color: rgb(101, 83, 111); /* Change background on hover */
        border: #73627c; /* Change background on hover */
    }


/* GENERIC */
.sub-header {
    position: relative;
    left: 2.5%;
    font-size: 30px;
    margin-left: 0;
    margin-bottom: 5px;
    padding: 0;
}

.grid-header {
    color: rgb(240, 240, 240);
    text-decoration: none;
    font-size: 24px;
    margin: 10px;
    padding: 0;
}
    a.grid-header:hover {
        color: rgb(147, 192, 255);
    }
.grid-text {
    color: rgb(240, 240, 240);
    text-align: left;
    margin: 0;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 16px;
    line-height: 2;
}

.divider {
    width: 95vw;
    height: 2px;
    border: none;
    background: rgb(223, 223, 223);
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}