/* Variables */
:root {
    --yellow:#efc618;
}

/* Fonts */
@font-face {
    font-family:'Road Rage';
    src: url('../fonts/RoadRage.woff2') format('woff2');
}
@font-face {
    font-family:'Stolzl';
    src: url('../fonts/Stolzl-Regular.woff2') format('woff2');
    font-weight:normal;
}
@font-face {
    font-family:'Stolzl';
    src: url('../fonts/Stolzl-Medium.woff2') format('woff2');
    font-weight:600;
}
@font-face {
    font-family:'Stolzl';
    src: url('../fonts/Stolzl-Bold.woff2') format('woff2');
    font-weight:bold;
}

/* Classes */
body {background:var(--yellow);color:#000;font-family:'Stolzl';}
h1, h2, h3, h4, h5, h6 {font-family:'Road Rage', sans-serif;}
a:hover {color:#fff;}

.grid-container {max-width:calc(100% - 4rem);}

nav {margin-top:1rem;position:fixed;width:100%;top:0;left:0;}
nav a {color:#000;}
nav .cell:last-of-type {text-align:right;}
nav h1 {font-size:0;}
nav h1::before {content:'';background:url('../img/logo-look-my-book.svg') no-repeat center center;aspect-ratio:239/149;width:180px;display:block;}

section {min-height:75vh;display:flex;align-items:center;justify-content:center;}

img[alt="Com sur des roolettes"] {display:block;margin:0 auto .5rem auto;height:60vh;}

footer {background:#000;position:relative;min-height:25vh;display:flex;align-items:flex-end;}
footer::before {content:'';background:url('../img/motif.png') no-repeat center center;width:100%;position:absolute;height:86px;left:0;top:-43px;}
footer img {max-width:185px;margin:0 auto 1rem auto;display:block;}
footer p {text-align:center;color:#fff;font-size:.7rem;}

@media screen and (max-width:640px) {
    .grid-container {max-width:100%;}
    nav h1::before {margin:0 auto;}
    nav .cell:last-of-type {text-align:center;}
    img[alt="Com sur des roolettes"] {margin:15vh auto .5rem auto;max-width:90%;height:auto;}
}