/**
█████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ 

██████  ██    ██ ████████ ███████     ███    ██  ██████  ██    ██  █████  ███████ 
██   ██  ██  ██     ██    ██          ████   ██ ██    ██ ██    ██ ██   ██ ██      
██████    ████      ██    █████       ██ ██  ██ ██    ██ ██    ██ ███████ █████ 
██   ██    ██       ██    ██          ██  ██ ██ ██    ██  ██  ██  ██   ██ ██    
██████     ██       ██    ███████     ██   ████  ██████    ████   ██   ██ ███████ 

█████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ █████ 
 **/
:root{
    /*colors*/
    --bg-color:#212529;
    --post-body-color:#b7b7c7;
    --primary-color: #f41919;
    --link-color:#0000ff;
    --menu-color:var(--primary-color);
    --post-header-color: var(--primary-color);
    --footer-color: var(--primary-color);

    /*Fonts*/
    --header-font:"arca_majora_3_heavy", monospace;
    --menu-font:var(--header-font);
    --post-header-font:var(--header-font);

    --body-font:"arca_majora_3_bold", monospace;
    --post-body-font:var(--body-font);
    --footer-font: var(--body-font);
    --font-size-multiplier: 1.6;
}

@font-face {
    font-family: 'arca_majora_3_bold';
    src: url('arcamajora3-bold-webfont.woff2') format('woff2'),
         url('arcamajora3-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'arca_majora_3_heavy';
    src: url('arcamajora3-heavy-webfont.woff2') format('woff2'),
         url('arcamajora3-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'andada';
    src: url('andada-regular-webfont.woff2') format('woff2'),
         url('andada-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html {
    font-size: 1em;
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family:var(--body-font);
    background-color: var(--bg-color);
}

.container{
    max-width: 1020px;
    display:grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1em 1fr 1em;
    margin: 0 auto;
}

/*---Navigation---*/
/*----------------*/

.header{
    grid-row:1;
    grid-column:2;
    display:flex;
    flex-direction:column;
}
.navbar{}

.menu{
    display:grid;
}

.navbar__menu{
    padding:0px;
    grid-template-rows:1fr;
    grid-template-columns: 1fr 1fr  1fr 1fr 1fr 1fr;
    place-items:center;
    list-style:none;
}

.menu__item{
    text-decoration:none;
    font-family:var(--menu-font);
    color:var(--menu-color);
}

.menu__item:nth-child(2){
    grid-column:4;
}

.menu__item:nth-child(3){
    grid-column:5;
}

.menu__link {
    color:var(--menu-color);
    text-decoration:none;
    text-align:center;
    display:block;
    padding:10px;
    font-size:calc(0.7em * var(--font-size-multiplier));
    letter-spacing:0.124em;
}

a.link{
    color: var(--post-body-color);
    text-decoration: none;
}

.menu__logo{
    grid-column:1;
    width:25vw;
    height:25vw;
}


/*---BLOG---*/
/*----------*/

.errorcontainer, .blogcontainer{
    width:100%;
    height:100%;
    display:grid;
    grid-row:2;
    grid-column:2;
    padding-bottom: 10rem;

}

.blog{
    list-style:none;
}

.error__header{
    font-family:var(--post-header-font);
    font-size: calc(3em * var(--font-size-multiplier));
    color: var(--post-header-color);
    padding-top:2em;
    text-transform:uppercase;
    margin: 0 auto;
}

.post__header{
    font-family:var(--post-header-font);
    font-size: calc(1em * var(--font-size-multiplier));
    color: var(--post-header-color);
    padding-top:2em;
    text-transform:uppercase;
}

.post__body{
    font-family:var(--post-body-font);
    font-size: calc(0.8em * var(--font-size-multiplier));
    color: var(--post-body-color);
    padding:0;
    margin:0;
    letter-spacing: 0.125em;
    line-height:1.4em;
}
.error__link{
    font-family:var(--post-header-font);
    text-transform:uppercase;
    margin: 0 auto;
    padding-top:10vh;
}

.error__link, .post__link{
    letter-spacing:0.124em;
    font-size: calc(1em * var(--font-size-multiplier));
    color: var(--post-header-color);
    text-decoration:none;

}

.error__link:hover, .error__link:active,  .menu__link:hover, .menu__link:active, .post__link:hover, .post__link:active{
    text-decoration-thickness: .125em;
    text-underline-offset: 1.5px;
    text-decoration: underline;
}

/*---MEDIA QUERIES---*/
/*-------------------*/
@media(min-width:120px) {
    .menu__logo {
        height: 25vw;
        width: 25vw;
    }
    :root{
        --font-size-multiplier: 0.8;
    }
}

@media(min-width:320px) {
    .menu__logo {
        height: 30vw;
        width: 30vw;
    }

    :root{
        --font-size-multiplier: 1;
    }
}


@media(min-width:520px) {
    .menu__logo {
        height: 25vw;
        width: 25vw;
    }

    :root{
        --font-size-multiplier: 1.2;

    }
}

@media(min-width:768px) {
    .menu__logo {
        height: 100px;
        width: 100px;
    }

    :root{
        --font-size-multiplier: 1.4;
    }
}