@font-face {
  font-family: "Muli";
  src: url(../Ressources/Muli.woff);
}

@font-face {
  font-family: "Open Sans";
  src: url(../Ressources/OpenSans-VariableFont_wdth\,wght.ttf);
}

* {
  margin: 0px;

  padding: 0px;
  box-sizing: border-box;
  --white: rgb(250, 249, 235);

  --black: rgb(28, 19, 22);
  --blackOpa: rgba(28, 19, 22, 0.3);

  --blue: #213F99;
  --clear: #F1EDE8;

  --red: #cf3b44;
  --rose: #ffA4fb;

  text-decoration: none !important;



}

body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  background-color: var(--clear);
  height: 110vh;
  background: url(../Ressources/Fond.png) repeat fixed, var(--clear);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;


}

.container {
  display: grid;
  width: 100%;
  height: 110vh;
  grid-template-columns: 1fr 7fr 1fr;
  grid-template-rows: 10vh 7fr 3fr 10vh;

}

.Header {
  grid-column: 1/4;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  /* border-bottom: 4px solid var(--red); */
  background-color: var(--clear);
  position: sticky;
  top: 0px;

}

.Header>.layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}


.Header>.layout>.main-button {
  width: auto;
  height: auto;
  color:var(--clear);
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  font-family: 'Courier New', Courier, monospace;
  padding:0.3em 0.6em;
  box-sizing: border-box;
  text-transform: uppercase;
  background: url(../Ressources/Red.png) no-repeat center center fixed, var(--red);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

.Header>.layout>.Title {
  color: var(--red);
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New';
}

.Header>.layout>.Title>#tiny {
  font-size: 0.5em;
  font-weight: normal;
  text-decoration: none;
}

.Header>.line {
  content: "";
  height: 4px;
  width: 100%;
  background: url(../Ressources/Red.png) no-repeat center center fixed, var(--red);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.main {
  grid-column: 1/4;
  grid-row: 2/5;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6fr 4fr 10vh;

}


.fleurs {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 5fr 4fr 4fr 5fr;
  grid-template-rows: 11fr 2fr 1fr;
  background: url(../Ressources/FLEUR.png) no-repeat;
  -webkit-background-size: 50%;
  -moz-background-size: 50%;
  -o-background-size: 50%;
  background-size: 50%;
  -webkit-background-position: 50% 40%;
  -moz-background-position: 50% 40%;
  -o-background-position: 50% 40%;
  background-position: 50% 40%;
}



.fleurs>.button {
  grid-column: 2/4;
  grid-row: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: url(../Ressources/Red.png) no-repeat center center fixed, var(--red);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Courier New', Courier;
  font-size: 1em;
  font-weight: bold;
  color: var(--clear);
  border-radius: 30%/100%;
}


.game {
  grid-column: 1;
  grid-row: 2/4;
  width: 100%;
  height: 100%;
  background: url(../Ressources/Section.png) center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  display: grid;
  grid-template-columns: 5fr 4fr 4fr 5fr;
  grid-template-rows: 11fr 2fr 2fr;


}

.game>.button {
  grid-column: 2/4;
  grid-row: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: url(../Ressources/Fond.png) repeat center center fixed, var(--red);
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  font-family: 'Courier New', Courier;
  font-size: 1em;
  font-weight: bold;
  color: var(--red);
  border-radius: 30%/100%;
}