:root {
    --color-primary: #2A3F54;
    --text-color-primary: white;
    --color-secondary: #b4dbff;
    /* https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable */
    --color-secondary-rgb: 180, 219, 255;
    --color-success: #26943f;
    --color-error: #a94442;
    --color-warning: #d7ab2b;
    --link-color: #4e4eca;
    --default-background-color: white;
    --comment-list-min-height: 8em;
    --comment-list-max-height: 8em;
    --text-hover-primary: gold;
}

html {
    font-size: 15px;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
}

body {
    all: unset;
    display: block;
    background-color: var(--default-background-color);
}

header {
    position: fixed;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 6rem;
    padding: 1rem 2.5vw;
    box-shadow: 0px 0px 5px 0px #a4a4a4;
    text-align: center;
    background-color: var(--color-primary);
    color: var(--text-color-primary);
    z-index: 3;
}

header a, header a:hover, header a:focus,
#comment-menu-dropdown .custom-dropdown-content > *:last-child  {
    color: var(--text-color-primary);
    font-weight: 600;
    text-decoration: underline;
}

header a:hover, header a:focus,
#comment-menu-dropdown .custom-dropdown-content > *:last-child:hover  {
    cursor: pointer;
    color: var(--text-hover-primary);
}

#page-title a {
    text-decoration: none;
}

#header-content {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    height: 100%;
}

#page-title {
    font-size: 2rem;
}

#comment-menu-dropdown {
    font-size: 1.35rem;
}

#comment-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.8rem;
    align-items: center;
}

#comment-menu:hover,
.custom-dropdown-open #comment-menu {
    color: var(--text-hover-primary);
}

#comment-menu-dropdown .custom-dropdown-content {
    box-shadow: 0px 0px 6px #9d9d9d;
    background-color: var(--color-primary);
    margin-right: calc((100vw - min(1600px, 95vw)) / 2);
    margin-left: calc((100vw - min(1600px, 95vw)) / 2);
    margin-top: 0.3rem;
    border-radius: 3px;
    right: 0;
    position: fixed;
    right: 0;
    top: 6rem;
    color: var(--text-color-primary);
    font-size: 1rem;
    padding: 1rem;
    z-index: 3 !important;
}

#comment-menu-dropdown .custom-dropdown-content > * {
    margin-bottom: 0.5rem;
}

#comment-menu-dropdown .custom-dropdown-content > *:last-child {
    margin-bottom: unset;
    text-align: right;
}

main {
    min-height: calc(100vh - 11rem);
    margin-top: 7rem;
    margin-bottom: 1rem;
    text-align: center;
}

footer {
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    padding: 1rem;
    box-shadow: 0px 0px 5px 0px #a4a4a4;
    text-align: center;
    background-color: var(--color-primary);
    color: var(--text-color-primary);
}

#footer-content {
    text-align: left;
    display: inline-block;
}

@media all and (max-width: 1600px) {
    html {
        font-size: 14px;
    }
}

@media all and (max-width: 1200px)  {
    html {
        font-size: 13px;
    }
}

.custom-alert-messages {
    margin-top: 7rem !important;
}