/* plus-jakarta-sans-latin */
@font-face { 
    font-family: "Dela Gothic One";
    src: url("fonts/dela-gothic-one.woff2")format("woff2");
}


html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
    /* background-image: url('media/bg.webp'); */
    background-attachment: fixed;
    background-color: white;
    margin: 0;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em;
}

h1, h2, h3 {
    font-family: 'Dela Gothic One', sans-serif;
    font-weight: 600;
    line-height: 1.4em;
    color: black;
}

p, .light, .bold {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 
    font-weight: 400;
    color: black;
    font-size: 1.1em;
    line-height: 1.5em;
}

h1 {
    font-size: 4em;
    margin-bottom: 0.1em;
}

h2 {
    font-size: 3em;
}

h3 {
    font-size: 1.8em;
    margin-bottom: 0;
    margin-top: 0.25em;
}

.light {
    color: #a3a3a3;
}

.bold {
    font-weight: 600;
}

img{
    max-width: 100%;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.7em;
    }

    h3 {
        font-size: 1.4em;
    }
}

/* ALIGN */
.align_left, .align_horizontal, .align_right {
    display: flex;
    flex-direction: column;
    width: 100%
}

.align_top, .align_vertical, .align_bottom {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.align_left, .align_top {
    align-items: flex-start;
}

.align_horizontal, .align_vertical {
    align-items: center;
}

.align_right, .align_bottom {
    align-items: flex-end;
}

/* BOX */

.box, .box_standard, .box_wide {
    display: flex;
    flex-direction: column;
    width: 100%
}

.box_standard {
    padding-left: 20px;
    padding-right: 20px;
}

.box_wide {
    align-items: center;
}

.spacer {
    width: var(--size);
    height: var(--size);
}

.column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: var(--custom_height);
}

@media (max-width: 768px) {
    .spacer {
        width: calc(var(--size)/2);
        height: calc(var(--size)/2);
    }
}

@media (min-width: 768px) {
    .box, .box_standard{
        display: flex;
        flex-direction: row;
    }

    .column {
        width: var(--custom_width);
    }

    .row {
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .box, .box_standard{
        flex-direction: row;
        max-width: 1200px;
    }
}

/* HEADER */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 5em;

    margin-left: 42px;
    margin-right: 42px;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .header_box {
        flex-direction: column;
        gap: 16px;
        margin-top: 16px;
    }
}

@media (min-width: 922px) {
    .header_box {
        max-width: 1240px;
    }
}

/* FOOTER */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 4em;
}

/* BUTTON */
.button{
    align-items: center;
    background-color: #ECFEEE;
    color: #0C6F19;
    padding: 0.75em 2em 0.75em 2em;
    border: 1px #0C6F19 solid;
    border-radius: 3em;
    margin: 0px;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; 
    font-weight: 500;
    font-size: 1em;
    line-height: 1.5em;
    text-decoration: none;

    width: fit-content;
    
    transition: all 0.3s ease;
}

.button:hover{
    background-color: #0C6F19;
    border: 1px #0C6F19 solid;
    color: white;
    transition: all 0.3s ease;
}

#back_to_top {
    --offset: 50px; 
    position: sticky;
    bottom: 42px;
    right: 42px;
    margin-top: 8px;
    margin-right:10px; 
    place-self: end;
    margin-right: calc(100vw + var(--offset));
    align-items: center;
    background-color: white;
    padding: 0.8em 0.9em 0.8em 0.9em;
    border: 1px #00000000 solid;
    border-radius: 3em;
    margin: 0px;
    aspect-ratio: 1/1;
}

#back_to_top:hover {
    background-color: black;
    filter: brightness(100%);
    .back_to_top_img {
        filter: brightness(100%);
    }
    transition: all 0.1s ease-out;
}

.back_to_top_img {
    filter: brightness(0%);
}