@import url('https://fonts.googleapis.com/css?family=Sofia|Oswald|DynaPuff|Dancing+Script|Pacifico|Salsa|Lemon|Montserrat+Alternates|Shadows+Into+Light');

body {
background-image: url('https://cdn.thecollector.com/wp-content/uploads/2021/09/lallemand-storming-bastille.jpg?width=1400&quality=55');
background-attachment: fixed;
background-size: cover;
background-position-y: 25%;
background-position-x: right 50%;
}
.frenchrev {
  position: absolute;
  font-family: Sofia;
  left: 8.5%;
  top: 0.3%;
  font-size: 25px;
}
.nav {
  background-color: lime;
  height: 60px;
}
.frenchflag {
  position: absolute;
  top: 2%;
  left: 1.2%;
}
.tabs td {
  padding: 7px;
  font-family: Oswald;
  font-size: 20px;
  font-weight: bold;
}
.tabs {
  position: absolute;
  top: 2.3%;
  left: 32%;
}
.tabs td a {
  color: black;
}
.tabletabs table tr td a:hover {
  color: red;
}
.tabletabs table tr td a:active {
  color: yellow;
}
.causetitle, .phase1title, .phase2title, .phase3title {
  font-size: 60px;
  color: #F1C40F;
  font-family: 'Dancing Script';
  text-shadow: 0 0 3px #ff0000, 5px 5px 5px #0000ff;
  margin-top: 5px;
}
.intro {
  background-color: rgba(230, 126, 34, 0.5); 
  padding: 20px;
   border: 5px outset rgba(25, 129, 221);
}
.asd {
  font-size: 30px;
  font-family: Salsa;
}
div.socialstructure {
  background-color: rgba(241, 196, 15, 0.5);
  padding: 15px;
  width: 600px;
  position: absolute;
  left: 45%;
  top: 96%;
  border: 5px outset rgba(14, 59, 240);
}
div.socialstructure h2, .ecocrisis h2, .environmentyea h2, .theabs h2, .directory h2, .theofficialend h2 {
  font-family: Salsa;
  color: rgba(23, 32, 42, 0.7);
}
div.socialstructure p, .ecocrisis p, .environmentyea p, .theabs p, .formofnat p, .directory p, .theofficialend p {
  font-family: Salsa;
  color: rgba(23, 32, 42, 0.8);
}
.ecocrisis {
  background-color: rgba(72, 201, 176, 0.5);
  padding: 15px;
  width: 550px;
  position: absolute;
  left: 3%;
  top: 160%;
  border: 5px outset rgba(183, 54, 79);
}
.environmentyea {
  background-color: rgba(243, 156, 18, 0.5);
  padding: 15px;
  width: 550px;
  position: absolute;
  left: 50%;
  top: 240%;
  border: 5px outset rgba(12, 99, 237);
}
.theabs {
  background-color: rgba(231, 76, 60, 0.5);
  padding: 15px;
  width: 550px;
  position: absolute;
  left: 3%;
  top: 300%;
  border: 5px outset rgba(24, 179, 195);
}
.socialimg {
  position: absolute;
  top: 93%;
  left: 5%
}
.starveimg {
  position: absolute;
  top: 161.5%;
  left: 53%;
  width: 570px;
}
.environmentimg {
  position: absolute;
  top: 225%;
  left: 3%;
  width: 530px;
}
.absoluteimg {
  position: absolute;
  top: 290%;
  left: 53%;
  width: 570px;
}
.phase1intro p {
  font-size: 30px;
  font-family: Salsa;
}
.phase1intro {
  background-color: rgba(88, 214, 141, 0.5); 
  padding: 20px;
  border: 5px outset rgba(167, 41, 114);
}
.formofnat {
  background-color: rgba(231, 76, 60, 0.5);
  width: 600px;
  padding: 15px;
  position: absolute;
  left: 3%;
  top: 85%;
  border: 5px outset rgba(24, 179, 195);
}
.natimg {
  width: 500px;
  position: absolute;
  left: 58%;
  top: 80%;
}
.formofnat h2, .bastille h2, .foundofchange h2, .consequences h2 {
  font-family: 'Montserrat Alternates';
  color: rgba(23, 32, 42, 0.8)
}
.formofnat p, .bastille p, .foundofchange p, .consequences p {
  font-family: 'Montserrat Alternates';
  color: black;
  font-weight: bold;
}
.bastille {
  background-color: rgba(46, 134, 193, 0.5);
  width: 600px;
  padding: 15px;
  position: absolute;
  top: 160%;
  left: 48%;
  border: 5px outset rgba(209, 121, 62);
}
.bastilleimg {
  width: 500px;
  position: absolute;
  top: 150%;
  left: 3%;
}
.foundofchange {
  background-color: rgba(236, 240, 241, 0.5);
  width: 600px;
  padding: 15px;
  position: absolute;
  top: 230%;
  left: 1%;
  border: 5px outset rgba(19, 15, 14);
}
.foundofchangeimg {
  width: 550px;
  position: absolute;
  top: 225%;
  left: 55%;
}
.consequences {
  background-color: rgba(241, 196, 15, 0.5);
  width: 600px;
  padding: 15px;
  position: absolute;
  top: 290%;
  left: 48%;
  border: 5px outset rgba(14, 59, 240);
}
.consequencesimg {
  width: 500px;
  position: absolute;
  top: 282%;
  left: 3%;
}
.phase2intro {
  background-color: rgba(244, 208, 63, 0.5);
  padding: 20px;
  border: 5px outset rgba(11, 47, 192);
}
.phase2intro p {
  font-size: 40px;
  font-family: 'Shadows Into Light';
}
.thecps {
  background-color: rgba(72, 201, 176, 0.7);
  padding: 15px;
  width: 600px;
  border: 5px outset rgba(183, 54, 79);
  position: absolute;
  top: 100%;
  left: 47%;
}
.thecps h2, .idkman h2, .theend h2 {
  font-family: 'Shadows Into Light';
  color: rgba(33, 47, 61);
}
.thecps p {
  font-family: 'Shadows Into Light';
  color: rgba(33, 47, 61, 0.75);
  font-weight: bold;
}
.thecpsimg {
  width: 300px;
  position: absolute;
  top: 90%;
  left: 10%;
}
.idkman {
  width: 600px;
  background-color: rgba(93, 173, 226, 0.6);
  padding: 15px;
  border: outset 5px rgba(162, 82, 29);
  position: absolute;
  top: 160%;
  left: 2%;
}
.idkman p {
  font-family: 'Shadows Into Light';
  color: rgba(33, 47, 61, 0.75);
  font-weight: bold;
  font-size: 20px;
}
.idkmanimg {
  width: 550px;
  position: absolute;
  top: 153%;
  left: 55%;
}
.theend {
  background-color: rgba(231, 76, 60, 0.6);
  padding: 15px;
  width: 600px;
  border: 5px outset rgba(24, 179, 195);
  position: absolute;
  top: 230%;
  left: 47%;
}
.theend p {
  font-family: 'Shadows Into Light';
  color: rgba(33, 47, 61, 0.75);
  font-weight: bold;
  font-size: 20px;
}
.theendimg {
  width: 550px;
  position: absolute;
  top: 218%;
}
.phase3intro {
  background-color: rgba(230, 126, 34, 0.5); 
  padding: 20px;
  border: 5px outset rgba(25, 129, 221);
}
.phase3intro p {
  font-size: 30px;
  font-family: Salsa;
}
.directory {
  background-color: rgba(241, 196, 15, 0.5);
  padding: 15px;
  width: 600px;
  position: absolute;
  left: 45%;
  top: 96%;
  border: 5px outset rgba(14, 59, 240);
}
.directoryimg {
  width: 500px;
  position: absolute;
  top: 80%;
  left: 3%;
}
.theofficialend {
  background-color: rgba(72, 201, 176, 0.5);
  padding: 15px;
  width: 550px;
  position: absolute;
  left: 3%;
  top: 160%;
  border: 5px outset rgba(183, 54, 79);
}
.theofficialendimg {
  width: 500px;
  position: absolute;
  top: 150%;
  left: 55%;
}
.home-box {
  background-color: rgba(247, 220, 111, 0.5);
  padding: 100px;
  width:500px;
  height:300px;
  position: absolute;
  left: 23.5%;
  top: 16.5%;
  border: 10px outset red;
}
.home-box img {
  position: absolute;
  width: 300px;
  left: 28%;
  top: 15%;
}
.home-box h1 {
  position: absolute;
  top: 65%;
  left: 18%;
  font-family: DynaPuff;
  font-size: 50px;
}
.home-box p {
  position: absolute;
  top: 80%;
  font-size: 35px;
  left: 32.5%;
  font-family: 'Dancing Script';
  color: red;
}
.meme1 {
  position: absolute;
  top: 18%;
  left: 3%;
}
.meme2 {
  width: 270px;
  position: absolute;
  top: 57%;
  left: 1%;
}
.meme3 {
  width: 230px;
  position: absolute;
  top: 18%;
  left: 81%;
}
.meme4 {
  width: 200px;
  position: absolute;
  top: 63%;
  left: 83%;
}
.guide {
  width: 300px;
  font-family: Oswald;
  position: absolute;
  top: -0.55%;
  left: 76%;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll h2, .animate-on-scroll p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.animate h2,
.animate-on-scroll.animate p {
  opacity: 1;
  transform: translateY(0);
}