@import url('https://fonts.googleapis.com/css2?family=Raleway:ital@0;1&display=swap');

/* z-index definitions for layering
0 for main content
1 for navbars/headers/footers
2 for modals/popups/overlays
use variables --z-main, --z-head, --z-modal */

:root {
    --bg-color: #1e1e1e;
    --text-color: #f0f0f0;
    --accent-color: #90847ef5;
    --font-family: 'Raleway', sans-serif;
    --font-weight: 500;
    --z-main: 0;
    --z-head: 1;
    --z-modal: 2;
}

body {
    display: flex;
    justify-content: center; /* horizontal center */
    align-items: center;     /* vertical center */
    min-height: 100vh;       /* full viewport height */
    margin: 0;               /* remove previous margin */
    background-image: url('https://c.tenor.com/bpHwXWi71QoAAAAd/tenor.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    text-align: center;
}

/* center nav links */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--bg-color);
    border-bottom: 2px solid var(--accent-color);
    padding: 10px 0;
    z-index: var(--z-head);
    display: flex;
    justify-content: center; /* center links */
    align-items: center;
    font-size: large;
}

.links {
    display: flex;
}

.nav-links {
    list-style: none;
    display: flex;        /* horizontal list */
    gap: 20px;            /* spacing between items */
    padding: 20px;
    margin: 0;
}

.nav-links li {
    display: inline-block;
    min-width: 80px; /* ensure clickable area */
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--font-weight);
    padding: 5px 10px;
    transition: background-color 0.3s ease;
    border-radius: 4px;
}

.nav-links a:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-radius: 4px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0; /* top margin to separate from heading */
}

.intro {
    border-color: var(--accent-color);
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    box-shadow: dimgrey 5px 5px 5px;
    padding: 20px;
    max-width: 40vh;
    width: 30vh;
    height: 50vh;
    overflow: auto; /* enable scrolling if content overflows */
    margin: 0 auto; /* center and add bottom margin */
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
}

/* Hide scrollbar for WebKit-based browsers (Chrome, Safari, Edge) */
.intro::-webkit-scrollbar {
    display: none;
}

.intro a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--font-weight);
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.intro a:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-radius: 4px;
}

.intro li {
    margin: 15px 0; /* spacing between list items */
}

main img {
    height: 10vh;
    margin-bottom: 10px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--bg-color);
    border-top: 2px solid var(--accent-color);
    padding: 10px 20px; /* top/bottom + horizontal padding */
    z-index: var(--z-head);

    display: flex;
    justify-content: center; /* center the footer content */
    align-items: center;
}

footer .nav-container,
footer .links {
    display: flex;
    justify-content: center; /* center inner divs */
    width: auto;             /* shrink to content */
}

footer .nav-links {
    list-style: none;
    display: flex;
    gap: 20px;    /* spacing between items */
    padding: 0;
    margin: 0;
    align-items: center;
}

footer .nav-links li {
    display: inline-flex;
    align-items: center;
}

.markdown {
    max-width: 90vh;
    margin: 20px auto;
    text-align: center;
    padding: 20px;
    border: var(--accent-color);
    border-width: 2px;
    border-style: dashed;
}

.markdown ul {
    list-style-type: none;
}

.markdown h1 {
    margin-top: 15vh;
}

.markdown a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: var(--font-weight);
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.markdown a:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
    border-radius: 4px;
}

.markdown table {
    width: 80%;
    margin: 20px auto;
    border-color: antiquewhite;
    border-width: 2px;
}

.markdown table th,
.markdown table td {
    padding: 12px 15px;
    border: 1px solid var(--border-color);
}

.markdown table th {
    background-color: var(--accent-color);
    color: var(--bg-color);
    text-align: left;
}