/* ==========================================
   Variables
========================================== */

:root {
    --primary: #00a5ff;
    --background: orangered;
    --content: black;

    --header-height: 80px;
    --page-padding: 200px;

    --title-size: 30px;
    --nav-size: 25px;
}

/* ==========================================
   Page
========================================== */

html,
body {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

main {
    min-height: 100%;
}

/* ==========================================
   Top Navigation
========================================== */

#topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    height: var(--header-height);
    padding: 0 40px;

    background: var(--primary);
}

#topbar h2,
#topbar ul {
    margin: 0;
    padding: 0;
}

#topbar h2 {
    font-size: var(--title-size);
    color: white;
}

/* Navigation List */

#topbar ul {
    display: flex;
    gap: 30px;
}

#topbar li {
    list-style: none;
}

#topbar a {
    color: white;
    text-decoration: none;
    font-size: var(--nav-size);
    font-weight: bold;
}

#topbar a:hover {
    text-decoration: underline;
}

/* ==========================================
   Main Content
========================================== */

#after-top {
    height: calc(100vh - var(--header-height));
    padding: 0 var(--page-padding);
    background: var(--background);
}

#indoor-body {
    height: 100%;
    background: var(--content);
}