:root {
    /* Variables */

    /* Colors */
    --birb_c-50: #fffbfb;
    --birb_c-100: #f2dcdc;
    --birb_c-200: #e4bebe;
    --birb_c-300: #c98888;
    --birb_c-400: #a15151;
    --birb_c-500: #781a1a;
    --birb_c-600: #5e0606;
    --birb_c-700: #430000;
    --birb_c-800: #280000;
    --birb_c-900: #0d0000;

    --birb_c-primary: var(--birb_c-800);
    --birb_c-secondary: var(--birb_c-700);
    --birb_c-bg: var(--birb_c-800);
    --birb_c-text: var(--birb_c-100);

    --birb_c-header: var(--birb_c-secondary);
    --birb_c-footer: var(--birb_c-secondary);

    --birb_c-button: var(--birb_c-secondary);
    --birb_c-button-hover: var(--birb_c-600);
    --birb_c-button-active: var(--birb_c-500);

    /* Sizes */
    --birb_padding-xxs: 0.125em;
    --birb_padding-xs: 0.25em;
    --birb_padding-sm: 0.5em;
    --birb_padding-md: 1em;
    --birb_padding-lg: 1.5em;
    --birb_padding-xl: 2em;
    --birb_padding-xxl: 3em;

    --birb_border-rad-max: 3621px;

    /* Common Reusables */
    --birb_main-line-height: 1.5em;

    --birb_footer-link-hover-opacity: 0.5;
    --birb_footer-copyright-opacity: 0.75;
    --birb_footer-separator-opacity: 0.5;
    --birb_footer-separator-width: 2px;

    --birb_button-padding: 0.75em 1em;
    --birb_button-gap: 1em;
    --birb_button-icon-size: 1.75em;
    --birb_button-max-width: 20em;

    --birb_icon-size: 20em;

    /* Typography */
    font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa,
        Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
        source-sans-pro, sans-serif;

    /* Root stuff */
    background-color: var(--birb_c-bg);
    color: var(--birb_c-text);
}

/* Custom Reset */
a {
    text-decoration: none;
    color: inherit;
}

a:visited {
    color: inherit;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Other things */
.birb {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Skip to content */
.birb_skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--birb_padding-sm);
    background-color: var(--birb_c-button);
    opacity: 0;
    pointer-events: none;
}

.birb_skip-to-content:focus {
    opacity: 1;
    pointer-events: all;
}

/* Links */
.birb_nav {
    background-color: var(--birb_c-header);
}

.birb_nav__links {
    display: flex;
}

.birb_nav__link-item {
}

.birb_nav__link--title {
    font-weight: bold;
}

.birb_nav__link {
    display: block;
    padding: var(--birb_padding-md);
}

.birb_nav__link:hover,
.birb_nav__link:focus {
    background: var(--birb_c-button-hover);
}

.birb_nav__link--active,
.birb_nav__link:active {
    background: var(--birb_c-button-active);
}

/* Main */
.birb_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--birb_padding-lg);
    flex-grow: 1;
}

.birb_main__icon {
    border-radius: var(--birb_border-rad-max);
    width: var(--birb_icon-size);
    height: var(--birb_icon-size);
    color: transparent;
    background-color: var(--birb_c-secondary);
}

.birb_main__title {
    margin: var(--birb_padding-sm);
    text-align: center;
    line-height: var(--birb_main-line-height);
}

.birb_main__title-text {
    font-size: 2rem;
    margin-bottom: var(--birb_padding-sm);
}

/* Footer */
.birb_footer {
    background-color: var(--birb_c-footer);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--birb_padding-md);
    padding: var(--birb_padding-md);
}

.birb_footer__link:hover,
.birb_footer__link:focus {
    opacity: var(--birb_footer-link-hover-opacity);
}

.birb_footer__separator {
    border-left: var(--birb_footer-separator-width) solid var(--birb_c-text);
    opacity: var(--birb_footer-separator-opacity);
    align-self: stretch;
}

.birb_footer__side {
    width: 100%;
}

.birb_footer__side--left {
    text-align: right;
}

.birb_footer__copyright {
    margin: var(--birb_padding-xs) 0;
    opacity: var(--birb_footer-copyright-opacity);
}

.birb_footer__list {
    margin: 0;
}

.birb_footer__list-item {
    margin: var(--birb_padding-xs);
}

/* Buttons */
.birb_link-buttons {
    max-width: var(--birb_button-max-width);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.birb_link-buttons__link {
    display: flex;
    align-items: center;

    border-radius: var(--birb_border-rad-max);
    padding: var(--birb_button-padding);
    margin-bottom: var(--birb_button-gap);

    background-color: var(--birb_c-secondary);

    transition: transform 100ms;
}

.birb_link-buttons__link:hover {
    transform: translateY(-0.125em);
}

.birb_link-buttons__link:active {
    transform: translateY(0.125em);
}

.birb_link-buttons__icon {
    width: var(--birb_button-icon-size);
    height: var(--birb_button-icon-size);
    filter: invert(1);
}

.birb_link-buttons__text-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    gap: 0.5em;
}

.birb_link-buttons__text-title {
    margin: 0;
    font-weight: bold;
    font-size: 1.125em;
}

.birb_link-buttons__text-subtitle {
    margin: 0;
    opacity: 0.75;
}
