*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    background-color: rgb(170, 168, 164);
    color: #3a3737;
    line-height: 1.4;
    margin: 0em;
    font-size: 1.15em;
    display: grid;
    grid-template-columns: 2fr;
    font-family: 'VG5000';
}


header{
    background: #605c5cb0;
    color: rgb(219, 210, 210);
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VG5000';
    position:fixed; 
    left: 0vh; top:0vh;;
  }

h3{
    font-size: 4vh;
    text-transform: uppercase;
    letter-spacing: -0.07em;
    font-family: 'terminal';

}

h1 {
  font-size: 6vw;
  font-size: clamp(1.5em, 8vw, 5em);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  font-family: 'terminal';
  text-wrap: balance ;
  line-height: 0.5em;
}

h2 {
    font-size: 4vw;
    text-align: left;
    letter-spacing: -0.05em;
    font-family: 'terminal';
}

.premier {
font-size: 7vw;
  margin: 1em, 2em;
  border-bottom:calc(var(--p)*4) solid var(--c1);
  scale: -1;
  position:sticky;
  top: 10vh;
  left: 100vh;
  font-weight: 500;
  color: #7a7676ea ;
}

.premier2 {
    margin: 1em, 2em;
    border-bottom:calc(var(--p)*4) solid var(--c1);
    position:absolute;
    top: 10vh;
    left: 50vh;
    color: #918989;
  }

  .tall { grid-row-end: span 2; 
    position:absolute;
    top: 0vh;
    left: 100vh;
    text-wrap: balance;
    max-width: 150em;
}

article {
    max-width: 40em;
}

p {
    text-align: left;
    margin: 2vh;
    text-wrap: balance;
    max-width: 100em;
    font-family: 'VG5000';
}


blockquote {
    text-align: end;
    margin: 5%;
    font-size: 0.9em;
    text-wrap: balance;
    font-style: oblique;
    letter-spacing: -0.11;
    font-weight: 100;
    color: #78afd3;
    font-family: 'VG5000';
}
.container { 
    display: grid; 
    gap:.5em;
    /* autant de colonnes que possible (auto-fill), dont la largeur est au minimum 300px */
    grid-template-columns: repeat(auto-fill, minmax(400px, 2fr)); 
    /* on ne définit pas de lignes, le navigateur en créera autant que nécessaire */
    position: relative;
    left: 10vh;
    top: 10vh;
  }

img {
    width: 100%;
}
footer{
    background: #605c5cb0;
    color: rgb(219, 210, 210);
    height: 10vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'VG5000';
    position:fixed; 
    left: 0vh; top:0vh;;
  }

@media (max-width:500px) {
    body {
        background: rgb(136, 133, 133);
        color: #3a3737;
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@font-face {
    font-family: 'VG5000';
    src:    url('fonts/webfonts/VG5000-Regular_web.eot');
    src:    url('fonts/webfonts/VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
            url('fonts/webfonts/VG5000-Regular_web.woff') format('woff'),
            url('fonts/webfonts/VG5000-Regular_web.woff2') format('woff2'),
            url('fonts/webfonts/VG5000-Regular_web.ttf') format('truetype'),
            url('fonts/webfonts/VG5000-Regular_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'terminal';
    src:    url('fonts/Terminal-Grotesque-master/terminal-grotesque_open.otf');
    src:    url('fonts/Terminal-Grotesque-master/webspecimen/font/terminal-grotesque-webfont.eot') format('embedded-opentype'),
            url('fonts/Terminal-Grotesque-master/webspecimen/font/terminal-grotesque-webfont.woff') format('woff'),
            url('fonts/Terminal-Grotesque-master/webspecimen/font/terminal-grotesque-webfont.woff2') format('woff2'),
            url('fonts/Terminal-Grotesque-master/webspecimen/font/terminal-grotesque-webfont.ttf') format('truetype'),
            url('fonts/Terminal-Grotesque-master/webspecimen/font/terminal-grotesque-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}