body{
  margin: 0;
  padding:0;
  padding-bottom: 100vh;
}

p{
  padding-right: 20px;
}
.sticky {
  font-size: 200vw;
}

.img-container {
  position: absolute;
  display: block;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 40vw;
  display: table;
  text-decoration: none;
}
.content{
  display: table-cell;
  vertical-align: middle;
}
.content img {
  width: 100%;

}
.content h1 {
  font-style: normal;
  font-family: sans-serif;
  font-size: 51px;
  color: black;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
}

.rectbleu{
  background: blue;
  width:100vw;
  height: 100vh;
  position:absolute;
}
.rectbleu h1{
  position:   absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: white
}
.rectbleu p {
  position: relative;
  font-style:  normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: white
}

.rectjaune{
  background: yellow;
  width:88vw;
  height: 88vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectjaune h1{
  position: absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: black
}
.rectjaune p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: black
}

.rectnoir{
  background: black;
  width:76vw;
  height: 76vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectnoir h1{
  position:   absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: white
}
.rectnoir p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: white
}

.rectblanc{
  background: white;
  width:64vw;
  height: 64vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectblanc h1{
  position:   absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: blue
}
.rectblanc p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: blue
}

.rectbleu2{
  background: blue;
  width:52vw;
  height: 52vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectbleu2 h1{
  position:   absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: white
}
.rectbleu2 p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: white
}

.rectjaune2{
  background: yellow;
  width:40vw;
  height: 40vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectjaune2 h1{
  position: absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: black
}
.rectjaune2 p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: black
}

.rectnoir2{
  background: black;
  width:28vw;
  height: 28vh;
  position:absolute;
  bottom:0;
  right:0;
}
.rectnoir2 h1{
  position:   absolute;
  font-style: normal;
  font-family: sans-serif;
  font-size: 50px;
  margin-left:15px;
  color: white
}
.rectnoir2 p {
  position: relative;
  font-style: normal;
  font-family: serif;
  font-size: 15px;
  margin-left:15px;
  color: white
}

body.page1 {
  background-color: blue;
}
.page1 p{
  font-size: 170px;
  color: white;
  font-weight: bolder;
  font-family: serif;
  position: static;
  margin-left:30px;
}

body.page2 {
  background-color: yellow;
}
.page2 p{
  font-size: 170px;
  color: black;
  font-weight: bolder;
  font-family: serif;
  margin-left:30px;
}
.page2 img {
  width: 50%;
}

body.page3 {
  background-color: black;
}
.page3 p{
  font-size: 170px;
  color: white;
  font-weight: bolder;
  font-family: serif;
  margin-left:30px;
}
.page3 img {
  width: 80%;
}

body.page4 {
  background-color: white;
}
.page4 p{
  font-size: 170px;
  color: blue;
  font-weight: bolder;
  font-family: serif;
  margin-left:30px;
}
.page4 img {
  width: 60%;
}

body.page5 {
  background-color: blue;
}
.page5 p{
  font-size: 170px;
  color: white;
  font-weight: bolder;
  font-family: serif;
  margin-left:30px;
}
.page5 img {
  width: 150%;
}

body.page6 {
  background-color: yellow;
}
.page6 p{
  font-size: 170px;
  color: black;
  font-weight: bolder;
  font-family: serif;
  margin-left:30px;
}
.page6 img {
  width: 55%;
}

body.page7 {
  background-color: black;
}
.page7 p{
  font-size: 170px;
  color: white;
  font-weight:bolder;
  font-family: serif;
  margin-left:30px;
}
.page7 img {
  width: 75%;
}

.button-home{
  float: right;
  margin-right: 20px;
  margin-bottom: 60px;
}
.button-home a{
 display: inline-block;
}
.galerie {
  display: block;
  width:7vw;
  height: 7vh;
  font-family: sans-serif;
  font-weight: bolder;
  text-decoration: none;
  text-align: center;
  padding-top: 4vh;
}
.relire{
  width:7vw;
  height: 7vh;
  font-family: sans-serif;
  font-weight: bolder;
  text-decoration: none;
  text-align: center;
  padding-top: 4vh;
}

.button-blue .relire{
  background:white;
  color: blue;
}
.button-blue .galerie{
  background:white;
  color: blue;
}

.button-yellow .relire{
  background:#000;
  color: yellow;
}
.button-yellow .galerie{
  background:#000;
  color: yellow;
}

.button-black .relire{
  background:white;
  color: black;
}
.button-black .galerie{
  background:white;
  color: black;
}

.button-white .relire{
  background:blue;
  color: white;
}

.button-white .galerie{
  background:blue;
  color: white;
}