:root{

    --background-color:#48261c;

    --text-color:#b49154;
    --text-color-light:#fff;
}
.sprites{
    --sheet-width:500;
    --sheet-height:200;

    --x:0;
    --y:0;

    --sprite-width:1;
    --sprite-height:1;

    --width:1;
    --height:1;
    
    --scale-width:var(--width) / var(--sprite-width);
    --scale-height:var(--height) / var(--sprite-height);

    --new-sheet-width:calc(var(--sheet-width) * var(--scale-width) * 1px);
    --new-sheet-height:calc(var(--sheet-height) * var(--scale-height) * 1px);

    --sprite-x:calc(var(--x) * var(--scale-width) * -1px);
    --sprite-y:calc(var(--y) * var(--scale-height) * -1px);

    background: url('/static/images/sprites.webp') no-repeat;
    background-size:var(--new-sheet-width) var(--new-sheet-height);
    background-position:var(--sprite-x) var(--sprite-y);
    
    width:calc(var(--width) * 1px);
    height:calc(var(--height) * 1px);
}
  

.wrapper{
    width:75em;height:100%;margin:auto;box-sizing:border-box;
}

:root{
    --font-max:15px;
}

body{
    background:var(--main-color-1);
    color:var(--main-color-1-contrast);
    font-family:var(--font-family);
    position:relative;z-index:1;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--title-font-family);
}

a{text-decoration:none;outline:none;color:inherit;}

i.sprite-logo{
    --x:0;
    --y:0;
    --sprite-width:500;
    --sprite-height:200;
}


header{
    --background-color-1:var(--background-color);
    --background-color-2:#000;

    display:block;position:relative;z-index:1;
    width:100vw;height:100vh;
    
    background:var(--background-color-1) linear-gradient(45deg,var(--background-color-1) 0%,var(--background-color-2) 100%)  no-repeat center right;
}
header::before{
    content:'';display:block;width:50%;height:100%;
    position:absolute;z-index:1;top:0;right:0;
    background:url(/static/images/banner.webp) no-repeat center left;
    background-size:cover;
    transform:translateX(0%);
    opacity:1;
    
    -webkit-animation:animate-fade-in 2s 1 forwards,animate-loop 3s infinite ease-in-out 2s alternate;
    animation:animate-fade-in 2s 1 forwards,animate-loop 3s infinite ease-in-out 2s alternate;
}


@-webkit-keyframes animate-fade-in{
    0%{
        transform:translateX(100%);
        opacity:0;
    }
    100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes animate-fade-in{
    0%{
        transform:translateX(100%);
        opacity:0;
    }
    100%{
        transform:translateX(0%);
        opacity:1;
    }
}

@-webkit-keyframes animate-loop{
    0%{
        transform:translateX(0%);
    }
    100%{
        transform:translateX(5%);
    }
}
@keyframes animate-fadloop{
    0%{
        transform:translateX(0%);
    }
    100%{
        transform:translateX(5%);
    }
}

header .main-container{
    padding:0 1rem;height:100%;
    display:flex;flex-direction:column;
}
header a.logo{
    display:flex;align-items:center;justify-content:left;width:100%;padding:2rem 0;
}
header a.logo>i{
    display:block;
    --width:500;
    --height-ratio:calc(500 / 200);
    --height:calc(var(--width) / var(--height-ratio));

}
header .content{
    flex-grow:1;height:0;display:flex;align-items:center;
}
header .content .command{
    padding:1rem 0;
}
header .content .command .button{
    --font-size:1.5rem;
}

section.image-article{
    --background-color-1:#2c1812;
    --background-color-2:#1a0c08;
    
    position:relative;z-index:2;
    background:var(--background-color-1) linear-gradient(45deg,var(--background-color-1) 0%,var(--background-color-2) 100%)  no-repeat center right;
    padding:4rem 0;
}
section.image-article.light{
    --background-color-1:#48261c;
    --background-color-2:#5b382d;
}

section.image-article .main-container{
    display:flex;
    align-items:center;
}
section.image-article .thumbnail{
    flex-basis:min(600px,50%);
}
section.image-article .thumbnail .thumbnail-container{
    display:block;
    position:relative;z-index:1;
    padding-top:60%;
    box-shadow:0 0 1rem rgba(0,0,0,1);
}
section.image-article .thumbnail .thumbnail-container img{
    display:block;width:100%;height:100%;position:absolute;
    top:0;left:0;object-fit:cover;
}
section.image-article .content{
    flex-grow:1;width:0;padding-left:2rem;display:flex;align-items:center;
    text-align:justify;
    text-align-last:left;
}



section.article-image{
    --background-color-1:#2c1812;
    --background-color-2:#1a0c08;
    
    position:relative;z-index:2;
    background:var(--background-color-1) linear-gradient(45deg,var(--background-color-1) 0%,var(--background-color-2) 100%)  no-repeat center right;
    padding:4rem 0;
    
}
section.article-image.light{
    --background-color-1:#48261c;
    --background-color-2:#5b382d;
}

section.article-image .main-container{
    display:flex;flex-direction: row-reverse;
    align-items:center;
}
section.article-image .thumbnail{
    flex-basis:min(600px,50%);
}
section.article-image .thumbnail .thumbnail-container{
    display:block;
    position:relative;z-index:1;
    padding-top:60%;
    box-shadow:0 0 1rem rgba(0,0,0,1);
}
section.article-image .thumbnail .thumbnail-container img{
    display:block;width:100%;height:100%;position:absolute;
    top:0;left:0;object-fit:cover;
}
section.article-image .content{
    flex-grow:1;width:0;padding-right:2rem;display:flex;align-items:center;
    text-align:justify;
    text-align-last:left;
}

footer{
    --background-color-1:#2c1812;
    --background-color-2:#1a0c08;
    
    position:relative;z-index:2;
    background:var(--background-color-1) linear-gradient(45deg,var(--background-color-1) 0%,var(--background-color-2) 100%)  no-repeat center right;
    padding:4rem 0;

    text-align:center;
}
footer .title{font-size:1.5rem;}
.button{
    --font-size:1rem;

    --webkit-user-select:none;
    user-select:none;

    cursor:pointer;
    display:inline-flex;
    height:2.5em;
    font-size:var(--font-size);
    min-width:calc(var(--font-size) * 5);
    padding:0 3em;
    align-items:center;justify-content:center;
    background:#b49154;
    border:1px solid #b49154;
    color:#48261c;
    border-radius:1rem;

    transition:background-color 0.3s,color 0.3s;
}

.button:hover{
    background:#48261c;
    color:#b49154;
}

@media (max-width:75em){ /* <=1200 */
    .wrapper{
        width:100%;padding:0 1rem;
    }
    
    header::before{
        width:60%;
    }
}

@media (max-width:62em){
    header::before{
        width:70%;
    }
    header a.logo{justify-content:center;}
    header .main-container .content{text-align:center}
}

@media (max-width:48em){
    header::before{
        width:80%;
    }
    header a.logo>i{
        --width:400;
    }

    section.image-article{
        padding:1rem 0;
    }
    section.image-article .main-container{
        flex-direction:column;
    }
    section.image-article .main-container .thumbnail{
        width:100%;
        flex-basis:auto;
    }
    section.image-article .main-container .content{
        width:100%;padding:2rem 0 0 0;
    }

    

    section.article-image{
        padding:1rem 0;
    }
    section.article-image .main-container{
        flex-direction:column;
    }
    section.article-image .main-container .thumbnail{
        width:100%;
        flex-basis:auto;
    }
    section.article-image .main-container .content{
        width:100%;padding:2rem 0 0 0;
    }
}
@media (max-width:36em){
    header::before{
        width:90%;
    }
    header a.logo>i{
        --width:250;
    }
}