:root{
    --bk-one: #e0ffd1;
    --main: #000023;
    --margin: 15px;
    --anim-time: 0.3s ease-in-out;
    /* hamburger */
    --bar-width: 50px;
    --bar-height: 6px;
    --hamburger-gap: 6px;
    --hamburger-height: calc(var(--bar-height) * 5);
}

@font-face {
    font-family: 'Vevey Humankind';
    src: url('fonts/Vevey-HumanKind.woff2') format('woff2'),
        url('fonts/Vevey-HumanKind.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vevey Positive';
    src: url('fonts/Vevey-Positive.woff2') format('woff2'),
        url('fonts/Vevey-Positive.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* CORE STYLING */

html{
    box-sizing: border-box;
    background-color:var(--bk-one);
    font-family: 'Vevey Positive', sans-serif;
    color: var(--main);
    letter-spacing: 0.1px;
    font-size: 15px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
html::-webkit-scrollbar {
    display: none;
}
body, *{margin: 0;}
body > *{
    margin: 0;
    scrollbar-width: none;
    transition: all var(--anim-time);
}
*, *:before, *:after{
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1{font-family: 'Vevey Humankind', sans-serif;}
p{min-height: var(--margin);}
a{ color: inherit; text-decoration: none;}

/* MAIN ELEMENT STYLING */
.content > * {margin: var(--margin) 0; line-height: 1.4;}
.content li{margin: var(--margin) 0;}
.content h1 {  margin-bottom: calc(var(--margin) * 2);}
.content a{position: relative; font-family: 'Vevey Humankind', sans-serif;}
.content a::before {
  content: '';
  background-color: hsla(118.2, 60.7%, 58%, 0.75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 4px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

.content a:hover::before {
  bottom: 0;
  height: 100%;
}
.background, .logo-container{
    position: fixed;
    pointer-events: none;
    top: 0;
    width: 100vw;
    height: 100vh;
}
.background{
    background-image:
    radial-gradient(at 11% 95%, hsla(56,69%,89%,1) 0px, transparent 50%),
    radial-gradient(at 2% 45%, hsla(52,95%,72%,1) 0px, transparent 50%),
    radial-gradient(at 59% 28%, hsla(157,55%,85%,1) 0px, transparent 50%),
    radial-gradient(at 0% 63%, hsla(200,69%,67%,1) 0px, transparent 50%),
    radial-gradient(at 70% 56%, hsla(94,46%,67%,1) 0px, transparent 50%);
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container .logo {
    width: 250px;
    fill: var(--main);
}
footer.title {
  position: fixed;
  bottom: 0;
  margin: var(--margin);
  width: calc(100vw / 4);
  z-index: 2;
}

.content-container {
    display: flex;
    justify-content: center;
    padding: var(--margin);
    z-index: 1;
    position: relative;
}
.content {
width: calc(100vw / 2);
}
.menu-icon{
    --x-width: calc(var(--hamburger-height) * 1.41421356237);

    display: flex; 
    gap: var(--bar-height) 0;
    flex-direction: column;
    width: fit-content;
    margin: var(--margin);
    position: fixed;
    right: 0;
    cursor: pointer;
    z-index: 2;
}
.menu-icon::before,
.menu-icon::after,
.menu-icon input{
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--main);
    border-radius: 50px;
    transform-origin: left center;
    transition: opacity var(--anim-time), width var(--anim-time), transform var(--anim-time), translate var(--anim-time);
}
.menu-icon input{
    appearance: none;
    margin: 0;
    padding: 0;
    outline: none;
    pointer-events: none;
}
.menu-icon:has(input:checked)::before{
    transform: rotate(45deg); 
    width: var(--x-width); 
    translate: 0 calc(var(--bar-height) / -2);
}
.menu-icon:has(input:checked)::after{
    transform: rotate(-45deg); 
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}
.menu-icon input:checked{
    opacity: 0; 
    width: 0;
}

.menu-container {
  width: max-content;
  max-width: calc(100vw / 4);
  padding: var(--margin);
  text-align: right;
  position: fixed;
  z-index: 2;
  right: 0;margin-top: calc(var(--hamburger-height) + var(--margin));
  transition: translate var(--anim-time);
  translate: 100% 0;
}
.menu-container nav h1 {font-size: 2rem;}
.menu-icon:has(input:checked) + .menu-container { translate: 0; }

.content figure {
width: 100%;
text-align: center;
}
.content figure img{
    max-width: 90%;
    max-height: 80vh;
    border: 6px solid;
    border-radius: 25px;
}
.content figure.landscape img, .content figure.square img{min-width: 80%;}
.content figure.portrait img{min-height: 75vh;}
.content figure figcaption {
  font-style: italic;
  font-size: 0.9rem;
}

html.is-changing .transition-fade { 
    transition: all 0.25s;   
    opacity: 1; 
} 
html.is-animating .transition-fade {   
    opacity: 0; 
    filter: blur(40px);
    -webkit-filter: blur(40px);
}

/* MOBILE */
@media screen and (max-width: 750px) {
    footer.title {width: fit-content;}
    .logo-container .logo { width: 165px;}
    .menu-container{  max-width: 70vw;}
    .content-container{padding: 90px 0;}
    .content{width: 90vw;}
    .menu-icon, .menu-container, footer.title{
         filter: drop-shadow(1px 1px 5px var(--bk-one)) drop-shadow(1px -1px 5px var(--bk-one))
    drop-shadow(-1px 1px 5px var(--bk-one)) drop-shadow(-1px -1px 5px var(--bk-one));
    }
}

/* Specific styles for landscape mode on mobile */
@media screen and (max-width: 750px) and (orientation: landscape) {}