:root {
    --primary: #396dff;
    --grey: #f7f7f7;
    --white: #fff;
    --bgcolor: #ffffff;

    --xs: 4px;
    --s: 8px;
    --m: 16px;
    --l: 24px;
}

.websitetitle {
    align-items: center;
    font-size: 64px;
    color: #00CCCC;
    padding: 10px 40px;
}

.websitetitle a {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Makes the link inherit the color from .websitetitle */
}

body {
    margin: 0;
    background-color: var(--bgcolor);
    font-family: "Times New Roman", serif;
}

.content {
    padding: 20px 40px;
}

.profilephoto {
    float: left;
    margin: 10px;
}

.abouttext {
    text-align: justify;
}

.classes {
    display: none;
}

button.classes_button {
    background: none;
    border: none;
    font-family: "Times New Roman";
    font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
}

summary {
    background: none;
    border: none;
    font-family: "Times New Roman";
    font-size: 24px;
    font-weight: bold;
}

.homepage_row {
    display: flex;
}

.homepage_column_left {
    flex: 25%;
}

.homepage_column_right {
    flex: 75%;
}

/* === Nav bar === */
/* done with the help of Gemini 2.5 Pro */

.navbar {
    background-color: #2b2b2b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Highlight active tab */
.nav-links a.active {
    background-color: #00CCCC;
    color: black;
}

.nav-links li a, .dropbtn {
    display: block;
    color: var(--bgcolor);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover for nav links */
.nav-links li a:hover, .dropdown:hover .dropbtn {
    background-color: #dddddd;
    color: black;
}

/* Don't change color on hover if active */
.nav-links a.active:hover {
    background-color: #00CCCC;
    color: black;
}

/* Email link on the right */
.nav-email a {
    color: var(--bgcolor);
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

.nav-email a:hover {
    color: #00CCCC;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2b2b2b;
    min-width: 0px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--bgcolor);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #dddddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}