@import url('reset.css');

html {
    border-top: #123121 2vw solid;
}

body {
    border-top: #c0d969 1vw solid;
    background-image: url('/img/wide_body_bg.png');
    background-repeat: repeat-y;
    background-size: auto;
    background-position: center top;
    background-color: #ecefcd;
}

body > header {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    
    position: relative;
    margin: auto;
}

@media (max-width:414px){

    body {
        background-image: url('/img/mobile_header_bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #eae7b9;
    }

    body > header {
        margin: 30px auto;
        width: 90%;
    }
}

header figure {
    width: 100%;
}

div.btn_back_to_mgl {
    position: absolute;
    right: 1rem;
    top:-.5rem;
    width: 90px;
}

@media (min-width:540px){
    div.btn_back_to_mgl {
        width: 110px;
    }
}

main,aside,nav {
    margin: auto;
}

article > header {
    margin-bottom: 2vw;
}

@media (max-width:768px){
    article > header {
        margin-bottom: 3vw;
    }
}

@media (max-width:480px){
    article {
        padding: calc(14px + 1.5625vw);
    } article > header {
        margin-bottom: 4vw;
    }
}

article > footer {
    padding: 0.5vw;
    font-size: calc(12px + 0.390625vw);
}

header ~ section {
    margin-top: 1vw;
}

hgroup {
    margin-bottom: 2vw;
}

body > footer {
    text-align: center;
    color: #413e13;
    margin: auto;
}

body > footer > div {
    padding: 5% 0;
}

footer p {
    font-size: calc(10px + 0.390625vw);
    line-height: 1.5;
}

@media (max-width:480px) {
    body > footer {
        padding-top: 10%;
        padding-bottom: 16%;
    }
}