body {
    font-family: Arial, sans-serif; /* Set the font family */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox layout */
}

aside {
    background-color: #1f3d7a; /* Set the background color */
    color: white; /* Set the text color */
    padding: 1em; /* Add padding */
    width: 220px; /* Set the width */
    height: 100vh; /* Set the height to 100% of the viewport height */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: fixed; /* Fix the position */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Arrange children in a column */
    justify-content: space-between; /* Space out children evenly */
}

aside h1 {
    text-align: center; /* Center the text */
    margin: 0; /* Remove default margin */
    padding: 1em 0; /* Add padding */
    font-size: 1.2em; /* Set the font size */
}

nav ul {
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    margin-top: 3em; /* Add margin at the top */
}

nav ul li {
    margin: 1.5em 0; /* Add vertical margin */
    text-align: center; /* Center the text */
}

nav ul li a {
    display: block; /* Make the element a block-level element */
    width: 100%; /* Set the width to 100% */
    padding: 1em 0; /* Add padding */
    color: white; /* Set the text color */
    text-decoration: none; /* Remove default text decoration */
    font-weight: bold; /* Make the text bold */
    background-color: #1f3d7a; /* Set the background color */
}

nav ul li a.active {
    background-color: #16315b; /* Set the background color for active link */
    border-radius: 5px; /* Add rounded corners */
}

nav ul li a:hover {
    background-color: #16315b; /* Set the background color on hover */
}

main {
    margin-left: 220px; /* Add left margin to account for the sidebar */
    padding: 2em; /* Add padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    width: calc(100% - 220px); /* Set the width, accounting for the sidebar */
}

section {
    margin-bottom: 2em; /* Add bottom margin */
}

.form-group, .form-voorkeuren {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically in the center */
    margin-bottom: 10px; /* Add bottom margin */
}

.form-group label, .form-voorkeuren label {
    width: 150px; /* Increase the width to ensure 'Student number' fits on one line */
    margin-right: 10px; /* Reduce right margin */
    text-align: left; /* Align label text to the left */
}

input[type="text"],
select {
    width: 200px; /* Increase the width of input fields */
    padding: 0.5em; /* Add padding */
    margin-left: 0; /* Remove left margin */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

input[type="submit"] {
    background-color: #1f3d7a; /* Set the background color */
    color: white; /* Set the text color */
    border: none; /* Remove border */
    padding: 0.5em 1em; /* Add padding */
    cursor: pointer; /* Change cursor to pointer */
    font-size: 1em; /* Set the font size */
    margin-top: 20px; /* Add top margin */
}

input[type="submit"]:hover {
    background-color: #16315b; /* Set the background color on hover */
}

.keuze-container {
    display: flex; /* Use flexbox layout to place Voorkeuren and Tegenvoorkeuren next to each other */
    gap: 20px; /* Add space between Voorkeuren and Tegenvoorkeuren */
}

.voorkeuren, .tegenvoorkeuren {
    display: flex;
    flex-direction: column;
}

.tegenvoorkeuren {
    margin-left: 30px; /* Set the fixed distance between Voorkeuren and Tegenvoorkeuren */
}

.form-voorkeuren, .form-tegenvoorkeuren {
    display: flex; /* Use flexbox layout */
    align-items: center; /* Align items vertically in the center */
    margin-bottom: 10px; /* Add bottom margin */
}

.form-voorkeuren:last-of-type {
    margin-bottom: 10px; /* Extra space after the last form-voorkeuren div (S-nummer) */
}

/* Toegevoegde ruimte boven de Voorkeuren-tekst */
.voorkeuren p {
    margin-top: 10px; /* Increase the space above the Voorkeuren text */
}

/* Toegevoegde ruimte boven de Tegenvoorkeuren-tekst */
.tegenvoorkeuren p {
    margin-top: 50px; /* Increase the space above the Tegenvoorkeuren text */
}

.form-voorkeuren label, .form-tegenvoorkeuren label {
    width: 100px; /* Reduce the width to move inputs closer */
    margin-right: 10px; /* Reduce right margin */
    text-align: left; /* Align label text to the left */
}