/* i decided to add the discord theme because that's what we were doing on the chatroom so for the case of consistancy i'll just do it like this for this site aswell. */
:root {
    --discord-dark-bg: #36393f;
    --discord-medium-bg: #2f3136;
    --discord-light-bg: #40444b;
    --discord-text-color: #dcddde;
    /*--discord-accent-blue: #7289da;*/
    --discord-accent-blue: #72f374;
    --discord-hover-blue: #677bc4;
    --discord-green: #43b581;
    --discord-red: #f04747;
    --discord-shadow: rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* maybe i'll switch the font to Inter later */
    margin: 0;
    padding: 0;
    background-color: var(--discord-dark-bg);
    color: var(--discord-text-color);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.header {
    background-color: var(--discord-medium-bg);
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid var(--discord-light-bg);
}

.header h1 {
    font-size: 3em;
    margin-bottom: 10px;
    color: #0ad40b;
}

.header p {
    font-size: 1.2em;
    color: var(--discord-text-color);
}

.navbar {
    background-color: var(--discord-light-bg);
    overflow: hidden;
    box-shadow: 0 2px 5px var(--discord-shadow);
    margin-bottom: 30px;
}

.navbar .container {
    display: flex;
    justify-content: center;
}

.navbar a {
    display: block;
    color: var(--discord-text-color);
    text-align: center;
    padding: 18px 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar a:hover {
    background-color: var(--discord-accent-blue);
    color: white;
}

.main-container {
    padding-top: 20px;
    padding-bottom: 40px;
}

.card {
    background-color: var(--discord-medium-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--discord-shadow);
    margin-bottom: 30px;
    border: 1px solid var(--discord-light-bg);
}

.card h2 {
    color: var(--discord-accent-blue);
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--discord-accent-blue);
    padding-bottom: 10px;
}

.course-card {
    background-color: var(--discord-light-bg);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px var(--discord-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px var(--discord-shadow);
}

.course-card h3 {
    color: var(--discord-green);
    margin-top: 0;
    margin-bottom: 10px;
}

.course-card p {
    margin-bottom: 10px;
}

.button {
    background-color: var(--discord-accent-blue);
    color: white;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: var(--discord-hover-blue);
    transform: translateY(-2px);
}

.footer {
    background-color: var(--discord-medium-bg);
    color: var(--discord-text-color);
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--discord-light-bg);
}