@import url('https://fonts.googleapis.com/css2?family=Balthazar&family=Cormorant+Garamond:wght@300;400;700&display=swap');


:root {
    --main-foreground: black;
    --main-bg-color: #F3F2EA;
    --accent-1: #D1CFC0;
    --accent-2: #d7d9e2;
    --button: #414039;
}

body {
    background: var(--main-bg-color);
    color: var(--main-foreground);
    position: relative;
    margin: 0;
    padding: 0;
}

header {
    position: sticky;
    top: 0;
    padding: 1rem 0;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 10;
}

dialog {
    background: transparent;
    width: 100%;
    height: 100%;
    border: 0;
    margin: auto;
}

dialog > div {
    max-width: 100ch;
    margin: auto;
}

dialog .box1, dialog .box2 {
    margin: 2rem auto;
}

dialog img {
    max-width: 100%;
    width: 100%;
    object-fit: contain;
}

dialog .box1 {
    padding: 1rem;
}

dialog::backdrop {
    background: #f3f2ea71;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

dialog[open]::backdrop {
    -webkit-animation: show-bd 1s ease normal;
}
dialog.hide::backdrop {
    -webkit-animation: hide-bd 1s ease normal;
}

dialog[open] {
    -webkit-animation: show 1s ease normal;
}
dialog.hide {
    -webkit-animation: hide 1s ease normal;
}
@-webkit-keyframes show{
    from {
        transform: translateY(110%);
        opacity: 0.4;
    }
    to {
        transform: translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes hide{
    to {
        transform: translateY(-110%);
        opacity: 0.4;
    }
}
@-webkit-keyframes show-bd{
    from {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
}
@-webkit-keyframes hide-bd{
    20% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}



dialog p {
    margin: 1rem auto;
}

dialog ul {
    list-style-type: none;
    font-size: 1.3rem;
    max-width: 60ch;
    margin-top: 1rem;
}




h1, h2, h4, p, button, ul, footer{
    font-family: Cormorant Garamond;
}

h1,h2,h3,h4,button {
    text-align: center;
}

h1 {
    font-size: 3.5rem;
    font-weight: 400;
    margin: 0;
}

h2 {
    font-size: 3rem;
    font-weight: 400; 
    margin-top: 2em;
    margin-bottom: 0.4em;
}

h3 {
    font-family: 'Copperplate', 'Balthazar';
    font-size: 2.2rem;
    margin-bottom: 0.4em;
    margin-top: 2em;
}

h4 {
    font-size: 1.4rem;
    margin-bottom: 0;
}

ul {
    padding: inherit;
}


h1, h2, h3 {
    padding: 0 1rem;
}

p, ul {
    max-width: 56ch;
    font-size: 1.5rem;
    margin: auto;
    font-weight: 300;
    margin-top: 2rem;
}
body > p {
    margin-bottom: 3rem;
}

body > p {
    padding: 0 2rem;
}

sup {
    font-size: 0.7em;
    padding: 0 0.5ch;
    opacity: 0.7;
    line-height: 0;
}

.references {
    margin-top: 8em;
    opacity: 0.8;
    font-size: 0.8rem;
}
.references ol {
    max-width: 110ch;
    margin: auto;
    opacity: 0.8;
}


footer {
    background: var(--accent-2);
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px;

    font-size: 1.2rem;
}
footer span {
    margin: 3px;
}

button {
    background: var(--button);
    color: var(--main-bg-color);
    border: 0;
    width: 180px;
    font-size: 1.4rem;
    padding: 1rem;
    box-sizing: border-box;
    margin: auto;
    cursor: pointer;
    display: block;
}
button span::after {
    content: '→';
    margin-left: 0.4em;
    position: relative;
    top: 0.1em;
    transition: margin 0.2s ease-out;
}
button:hover span::after {
    margin-left: 0.8em;
}

.graphic p {
    margin: 1em;
    max-width: 50ch;
}

.graphic img {
    max-width: 100%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.graphic {
    display: grid;
    min-height: 300px;
    max-width: 1000px;
    width: calc(100% - 2rem);
    margin: auto;
}
.box1 {
    background: var(--accent-1);
    z-index: 1;
    height: min-content;
}
.box2 {
    background: var(--accent-2);
}

.box1, .box2, button {
    box-shadow: 0px 14px 30px 2px rgba(0, 0, 0, 0.2);
}

.g1 {
    grid-template-columns: minmax(2rem, auto) auto minmax(2rem, auto) auto auto;
    grid-template-rows: auto 2rem 2rem auto auto;
}
.g1 .box1 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
.g1 .box2 {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 6;
}
.g1 button {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}

.g2 {
    grid-template-columns: auto auto auto minmax(2rem,8rem) minmax(2rem, 4rem) auto auto;
    grid-template-rows: 4rem auto 2rem auto auto;
}
.g2 .box1 {
    grid-column-start: 4;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 3;
}
.g2 .box2 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 6;
}
.g2 button {
    grid-column-start: 6;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 5;
}

.g3 {
    grid-template-columns: minmax(2rem, auto) auto minmax(2rem, auto) 2rem auto atuo;
    grid-template-rows: auto minmax(2rem,5rem) 2rem auto auto;
}
.g3 .box2 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}
.g3 .box1 {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 6;
}
.g3 button {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}


@media screen and (max-width: 770px) {
    footer {
        display: block;
    }
    footer div {
        margin: 0.5rem 0;
    }

    html {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 500px) {
    .graphic {
        display: block;
    }
    h1 {
        font-size: 2.8em;
    }
    h2 {
        font-size: 2.5em;
    }
    h3 {
        font-size: 2em;
    }
    .box1 p{
        padding: 0.75em 0.25em;
    }
    .box1, .box2 {
        margin-bottom: 2rem;
    }
    .box2 img {
        max-height: 160px;
    }
}

@media screen and (max-height: 400px) {
    header{
        position: static;
    }
}