html{
  height: 100vh;
  overflow: hidden;
}
*{
  font-family: 'Franklin Gothic Heavy';
}
body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color:antiquewhite;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: scroll;
  animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.section1, .section2, .section3, .section4, .section5, .end{
  width: 100%;
  min-height: 100vh;
  position: relative;
  transform-style: preserve-3d;
}


.section1::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("ItalyFirst.jpg");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(-1px) scale(2.02);
}
.section1::after{
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("ItalySecond.png");
  background-position: 0 100%;
  background-size: cover;
  transform: translateZ(-0.60px) scale(1.61);
}
.section1 .text{
  width: 100%;
  transform: translateZ(-0.9px) scale(1.91);
}

.section2::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("FranceFirst.jpg");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(-0.60px) scale(1.61) translateY(38%);
}
.section2::after{
  content:"";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("FranceSecond.png");
  background-position: 0 100%;
  background-size: cover;
  transform: translateZ(-0.40px) scale(1.41) translateY(33%);
}
.section2 .text{
  width: 100%;
  top: 30%;
  transform: translateZ(-0.59px) scale(1.60) translateY(5%);
}
.section3::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("EnglandFirst.jpg");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(-0.40px) scale(1.41) translateY(62%);
}
.section3::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("EnglandSecond.png");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(-0.20px) scale(1.21) translateY(62%);
}
.section3 .text{
  width: 100%;
  top: 60%;
  transform: translateZ(-0.39px) scale(1.40) translateY(5%);
}

.section4::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("SpainFirst.jpg");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(-0.20px) scale(1.21) translateY(72%);
}
.section4::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("SpainSecond.png");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(0px) scale(1) translateY(83%);
}
.section4 .text{
  width: 100%;
  top: 60%;
  transform: translateZ(-0.19px) scale(1.20) translateY(20%);
}
.section5::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("SwissFirst.jpg");
  background-position: 0% 100%;
  background-size: cover;
  transform:scale(1) translateY(83%);
}
.section5::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("SwissSecond.png");
  background-position: 0% 100%;
  background-size: cover;
  transform: translateZ(0.2px) scale(0.81) translateY(100%);
}
.section5 .text{
  width: 100%;
  top: 60%;
  transform: translateZ(0.10px) scale(0.79) translateY(30%);
}

.end{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  position: absolute;
  text-align: center;
  font-size: 1000%;
  transform: translateZ(0.2px) scale(0.81) translateY(75%);
}
.end p{
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.end p a{
  text-decoration: none;
  color: black;
}
@keyframes floating{
  0%{transform: translate(0,0px);}
  50%{transform: translate(0,25px);}
  100%{transform: translate(0,-0px);}
}
.text{
  display:flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  font-family: 'Franklin Gothic Heavy';
  font-size: 15vw;
  color: white;
  transform: scale(1,1.1);
}
.section1 .text, .section4 .text{
  text-shadow: 3px 3px 5px #A64D2D; 
}
.section2 .text{
  text-shadow: 3px 3px 5px #E19E67;
}
.section3 .text, .section5 .text{
  text-shadow: 3px 3px 5px #a1c2d1;
}

@media only screen and (max-width: 768px){
  .section2 .text, .section3 .text, .section4 .text{
    top: 75%;
  }
  .section3 .text{
    top: 90%;
  }
  .section4 .text{
    top: 95%;
  }
  .section5 .text{
    top: 95%;
  }
  .end{
    font-size: 700%;
  }
}