:root {
    --black: #000000;
    --white: #f2f2f2;

    --color_yellow: #eabf01;
    --color_dark_blue: #0c0a1e;
    --color_orange: #ff9100;
    --neon_green: #00FF00;


    --space_64px: 64px;
    --space_32px: 32px;
    --space_16px: 16px;
    --space_8px: 8px;
    --space_4px: 4px;
    --space_2px: 2px;
}

html {
    background-color: var(--white);

    font-family: Arial, Helvetica, sans-serif;
    /* font-family: Georgia, 'Times New Roman', Times, serif; */


    color: var(--black);
    display: flex;
    flex-direction: column;
    padding: var(--space_16px);
    scrollbar-color: var(--black) var(--white);
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

main {
    display: flex;
    justify-content: space-between;
    overflow-y: auto;
    /* align-items: flex-start; */
    gap: var(--space_32px);

    scrollbar-color: var(--black) var(--white);

    margin-top: 3em;

}

h1,
h2 {
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
    font-weight: 100;
    font-size: 2rem;

    letter-spacing: -2%;
    /* scale, for all modern browsers */
    /* -webkit-transform: scale(1, 2);
        -moz-transform: scale(1, 2);
        -ms-transform: scale(1, 2);
        -o-transform: scale(1, 2);
        transform: scale(1, 2); */


    margin: 0;
}

h3,
h4,
h5,
h6,
p,
a {
    margin: 0;
    font-size: 1rem;
    font-weight: 200;
}

ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space_2px);
}

ul,
li {
    /* reset the margin and padding */
    margin: 0;
    padding: 0;
}

.comment ul {
    /* 1 em margin for the UL elements under .comment */
    margin-left: 1em;
}

.comment ul ul ul ul ul {
    /* stop the nesting! */
    margin-left: 0;
}

a {
    text-decoration: none;
    color: var(--black);
    font-style: italic;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
    font-style: normal;
}

button {
    display: flex;
    border-radius: 32px;
    border: solid 2px transparent;
    background-color: transparent;
    color: var(--black);

    backdrop-filter: blur(10px) brightness(140%);

    padding: var(--space_4px) var(--space_8px) var(--space_4px) var(--space_8px);
    gap: var(--space_8px);
}

button:hover {
    border: solid 2px var(--black);
}

/* for a header that has fixed positioning, looks cooler than sticky */
#header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: var(--space_16px);
    left: var(--space_16px);
    right: var(--space_16px);
    border-radius: var(--space_32px);
}

.mobile_hide {
    display: flex;
    gap: var(--space_16px);
}

.grid_container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    align-content: flex-start;
    column-gap: var(--space_8px);
    row-gap: var(--space_16px);
    margin-bottom: var(--space_16px);
    flex: 3;
}

#l_col {
    height: 100%;
    flex: 1;
}

nav {
    display: flex;
    flex-direction: column;
}

ul {
    display: flex;
    flex-direction: column;
}




.grid_item>div>img {
    /* aspect-ratio: 1 / 1.414; */
    /* transform: rotate(90deg); */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.image_wrapper {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.grid_item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    border: solid 2px transparent;
}

.grid_item:hover {
    border: solid 2px var(--black);
}

#menu_item_button {
    display: none;
}

#site_credit_container {
    display: flex;
    justify-content: end;
    margin: var(--space_64px) 0 var(--space_64px) 0;
    /* filter: opacity(20%); */
}

footer {
    position: fixed;
    left: var(--space_16px);
    bottom: var(--space_16px);
    display: flex;
    flex-direction: column;
}

#scroll_to_top_button {
    /* display: none; */
    align-items: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
}

#mobile_menu_button {
    display: none;
}


#mobile_menu_popup{
    display: none;
}

#mobile_menu_popup>div>div{
    overflow: scroll;
    overscroll-behavior: contain;
}

#image_overlay_container{
    display: none;
}

.fixed_overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(10px) brightness(30%);
}

.fixed_overlay > div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: var(--space_32px);
    right: var(--space_32px);
    bottom: var(--space_32px);
    left: var(--space_32px);
    gap: var(--space_16px);
    background-color: var(--white);
}

.fixed_overlay>div>div {
    position: absolute;
    left: var(--space_16px);
    right: var(--space_16px);
    top: var(--space_16px);
    bottom: var(--space_16px);
    padding: var(--space_16px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: solid 2px var(--black);
}

/* used in disclaimer */
.high_contrast_button {
    background-color: var(--black);
    color: var(--white);
    border-color: transparent;
}

.high_contrast_button:hover {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
}

.high_contrast_button:focus {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--black);
}


@media (max-width: 1400px) {
    .grid_container {
        grid-template-columns: repeat(3, 1fr);
    }
}



@media (max-width:1000px) {
    #header_container {
        justify-content: center;
    }

    .grid_container {
        grid-template-columns: 1fr 1fr;
    }

    #l_col {
        display: none;
    }

    body {
        justify-content: center;
    }

    .mobile_hide {
        display: none;
    }

    #mobile_menu_button {
        display: flex;
        position: fixed;
        left: var(--space_16px);
        bottom: var(--space_16px);
    }

    #site_credit_container {
        justify-content: center;
    }
}