html,body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:root {
    --bar-width: 2.125rem;
    --bar-height: 0.25rem;
    --hamburger-gap: 0.375rem;
    --foreground: #fff;
    --background: #000;
    --shadow: #0006;
    --hamburger-margin: 0.5rem;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}
p, h2, h3, h4, ul li{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
p{
    line-height: 1.75rem;
    padding: .75rem 0rem;
    margin: 0;
}
p.copy{
    font-size:smaller;
}
h1{
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: calc(min(8vw, 6.25rem));
    text-align: center;
}
h2{
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
    font-size: calc(min(7vw, 3.125rem));
    text-align: center;
}
h3{
    font-weight: 600;
}
header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    filter: drop-shadow(1px 1px 1px var(--background));
    background-color: #0000;
    transition: background-color 600ms ease-in-out;
}
header div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
header div.menu:nth-child(2){
    order: 1;
}
header div.logo{
    order: 2;
}
header div.menu:nth-child(3){
    order: 3;
}
header div a{
    padding: 10px 15px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    color: var(--foreground);
    filter: drop-shadow(2px 2px 2px var(--shadow));
}
header div.menu a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--foreground);
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}
header div.menu a:hover{}
header div.menu a:hover::before{
    transform-origin: left;
    transform: scaleX(1);
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    header div.menu a:hover{
        text-decoration: underline;
    }
    header div.menu a:hover::before{
        transform-origin: left;
        transform: scaleX(0);
    }
}
#headerLogo{
    max-width: 340px;
    height: auto;
}
svg{
    fill: var(--foreground);
}
svg.headerLogo {
    width: 340px;
    height: 93px;
}
section.heroImage{
    width: 100%;
    overflow: hidden;
    height: 100vh;
}
section.heroImage img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
section.Publications div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 5em;
}
section.Publications div img{
    max-width: 300px;
    padding: 1rem;
    height: auto;
}
footer{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #000;
    color: #FFF;
}
footer p{
    padding: 5px 15px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}
footer div.socialMedia{
    display: flex;
    flex-direction: row;
    column-gap: 1.5rem;
    padding: 1.5rem;
}
footer a.socialLink{
    opacity: 0.6;
}
footer a.socialLink:hover{
    opacity: 1;
}
footer a.socialLink svg{
    height: 1.5rem;
}
footer a.Logo{
    padding: 50px;
}
section.PageElement{
    background-color: #FFF;
    max-width: 800px;
    padding: 5em;
    margin: auto;
}

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
  
    display: none;
    padding: 0px 25px;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    z-index: 2;
    cursor: pointer;
  }
  
  .hamburger-menu:has(input:checked) {
    --foreground: white;
    --background: #333;
  }
  
  .hamburger-menu:has(input:focus-visible)::before,
  .hamburger-menu:has(input:focus-visible)::after,
  .hamburger-menu input:focus-visible {
    border: 1px solid var(--background);
    box-shadow: 0 0 0 1px var(--foreground);
  }
  
  .hamburger-menu::before,
  .hamburger-menu::after,
  .hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: 1px;
    transform-origin: right center;
    transition: opacity var(--animation-timing), width var(--animation-timing),
      rotate var(--animation-timing), translate var(--animation-timing),
      background-color var(--animation-timing);
  }
  
  .hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
  }
  
  .hamburger-menu:has(input:checked)::before {
    rotate: -135deg;
    width: var(--x-width);
    translate: calc(-.75 * var(--x-width)) calc(var(--bar-height) / -2);
  }
  
  .hamburger-menu:has(input:checked)::after {
    rotate: 135deg;
    width: var(--x-width);
    translate: calc(-.75 * var(--x-width)) calc(var(--bar-height) / 2);
  }
  
  .hamburger-menu input:checked {
    opacity: 0;
    width: 0;
  }
  
  .sidebar {
    transition: translate var(--animation-timing);
    translate: -100%;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    background-color: var(--foreground);
    color: var(--background);
    max-width: 10rem;
    min-height: 100vh;
  }
  
.gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 5em 0em;
}

.gallery div {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.gallery img {
    margin: .125em;
}

@media screen and (max-width: 1299px) {
    header{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
    header.overlay{
        background-color: #0008;
        transition: background-color 600ms;
    }
    header div{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    header div a{
        padding: 0px 15px;
        font-family: "Montserrat", sans-serif;
        font-size: large;
        font-size: calc(min(100vh, 100vw)* .05);
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        color: var(--foreground);
        filter: drop-shadow(2px 2px 2px var(--shadow));
    }
    header div.menu a{
        display: none;
        opacity: 0%;
        transition: opacity 600ms;
    }
    header div.menu a::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: var(--foreground);
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }
    header div.menu a:hover::before{
        transform-origin: right;
        transform: scaleX(1);
    }
    header div.menu a.show{
        display: flex;
        transform-origin: right center;
        transform-style: preserve-3d;
        opacity: 100%;
        transition: opacity 600ms;
    }
    div.logo {
        order: 1;
        flex-direction: row;
        justify-content: space-between;
    }
    header div.menu:nth-child(2){
        order: 2;
    }
    header div.menu:nth-child(3){
        order: 3;
    }
    div.menu{
        align-items: flex-end;
        justify-content: space-around;
        height: calc((100vh - 93px) / 2);
        max-height: calc(min(100vh , 100vw) / 2);
    }
    .hamburger-menu {
        display: flex;
    }
    svg.headerLogo {
        max-width: 70%;
    }
    section.PageElement{
        background-color: #FFF;
        max-width: 800px;
        padding: 1.5em;
        margin: auto;
    }
}