@font-face {
    font-family: "EB Garamond";
    src: url("/src/fonts/EB_Garamond/EBGaramond-Regular.ttf");
}

:root{
    --page-side-padding: 8px;
    --main-menu-top-padding: 8px;
    --main-menu-heigth: 48px;
    --main-menu-font-size: 20px;
    --main-bottom-margin: calc(var(--main-menu-heigth) + ( 2 * var(--main-menu-top-padding) ));

    --header-padding: 12px;
    --header-heigth: 64px;

    --default-font: "EB Garamond";
    --pallete-front-color: #efefef;
    --pallete-back-color: #242424;
    --pallete-secondary-color: #313131;

    font-family: "EB Garamond";
    color: var(--pallete-front-color);
    background-color: var(--pallete-back-color);
}

header{
    width: calc(100% - ( 2 * var(--header-padding) ));
    max-width: 100%;
    height: var(--header-heigth);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--header-padding);
    text-align: center;
    background-color: var(--pallete-secondary-color);
    position: fixed;
    top: 0;
    left: 0;

    .pageTitle{
        margin: 0;
    }
}

body{
    width: 1024px;
    max-width: 100%;
    max-height: 100%;
    margin-top: calc(var(--header-heigth) + ( 2 * var(--header-padding) ));
    margin-bottom: var(--main-bottom-margin);
    margin-left: auto;
    margin-right: auto;
}

main{
    
}

a{
    color: var(--pallete-front-color);
    cursor: pointer;
}

h2{
    font-size: 20pt;

    &.topic{
        text-align: center;
    }
}

h3{
    font-size: 16pt;
}

p{
    font-size: 16pt;
}

section#home{
    width: 100%;
    margin: 0 auto;
}

nav{
    display: flex;
}


@media screen and (min-width: 1024px) {
    main{
        padding: 0px var(--page-side-padding);
    }
}

@media screen and (max-width: 960px) {
    
}

@media screen and (max-width: 720px) {
    
}

@media screen and (max-width: 540px) {
    
}

@media screen and (max-width: 480px) {
    
}

@media screen and (max-width: 400px) {
    
}

@media screen and (max-width: 360px) {
    
}