@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@font-face {
    font-family: 'Monorama';
    src: url('../fonts/Monorama-SemiBold.woff2') format('woff2'),
        url('../fonts/Monorama-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


:root{
  --text-font:"IBM Plex Mono", monospace;
  --title-font: "Monorama", sans-serif;
  --main-color: #959595;
}

body{
  font-size: 25px;
  margin: 0px;
  font-family: var(--text-font);
  line-height: 1.4;
}

img{
  width:100%;
}

a{
  text-decoration: none;
}

a:hover{
  color: #000;
}

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

h2{
  font-size: 32px;
}

h2 + p, h2 + div {
  margin-top: 50px;
}

p{
  margin-bottom: 20px;
}

figcaption{
  font-size: 0.5em;
  color: var(--main-color);
  margin-top: 5px;
}

header{
  padding: 20px;
  position: fixed;
  z-index: -1;
  top: 0;
}

nav{
  font-family: var(--title-font);
  text-transform: uppercase;
  font-size: 32px;
  padding: 0px 20px;
  position: fixed;
  top: 25vw;
}

nav a{
  color: var(--main-color);
  text-decoration: none;
}

nav a:hover{
  color: #000;
}

nav li.active a{
  color: #000;
}

main{
  margin-top: 25vw;
  margin-bottom: 200px;
}

/* ------- home ------- */

body.home{
  background: rgb(0, 255, 0);
}

.introduction{
  margin-top: 50px;
}

.intro-bold p{
/*  font-weight: 700;*/
}

/* ---- Collections ------ */

body.collections{
  background: #452E3B;
}

.collections-grid li{
  margin-bottom: 30px;
  margin-top: 30px;
}

/* ---- Boutique ------ */

body.boutique{
  background: #FF008A;
}

.boutique-grid li{
  margin-bottom: 30px;
  margin-top: 30px;
}

/* ------ Infos ------- */
body.infos{
  background: #F4F0F0;
}

.infos-inner h2 + p{
  margin-top: 0;
}

.infos-inner h2{
  margin-top: 70px;
}


/* ------- MAP -------- */

.map{
  width: 100%;
/*  min-width: 320px;*/
}

.map iframe{
  width: 100%;
  height: 600px;
}

.banderole{
  background: #000;
  padding: 10px 0px;
}

marquee{
  text-transform: uppercase;
  color: #66FF00;
  font-weight: bold;
}

/* ------- RESPONSIVE ------- */

/* SMARTPHONES */
@media only screen and (max-width: 990px){
  nav{
    width: 100%;
  }
  nav li{
    display: inline-block;
    margin-right: 20px;
    text-align: center;
  }

  main{
    margin-top: 40vw;
  }
}