/*-- Fonts --*/

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Bebas+Neue&family=Economica:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300&family=Montserrat:wght@300;400&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,700;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,700&family=Nunito:wght@300&family=Source+Sans+3:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

title, .title {
   font-family: 'Economica', sans-serif;
   text-align: center !important
 }

body, .body {
   font-family: 'Economica', sans-serif;
   font-size: 1.3em;
   letter-spacing: 1px;
 }

/*-- scss:defaults --*/
$body-bg: white;
$body-color: black;
$link-color: black;
$link-decoration: none;

.emphasized {
   font-size: 2em;
}

/*-- scss:rules --*/

h1 {
  font-size: calc(100% + 2vw);
  text-align: center;
  opacity: 1;
}

h2 {
  position: relative;
  top: 20%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: calc(100% + 4vw);
  padding: 0px; /* Add padding for better readability */
  text-align: center; /* Center text horizontally */
  margin: 0 auto; /* Center horizontally */
  text-decoration: none; /* Remove underline */
  color: yellow; /* Text color */
  border: 0px solid #ccc; /* Border */
}

h3 {
  position: relative;
  top: 20%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
  text-align: center;
  display: block; /* Display as block element */
  font-size: calc(100% + 1vw);
  padding: 0px; /* Add padding for better readability */
  margin: 0 auto; /* Center horizontally */
  text-decoration: none; /* Remove underline */
  color: white; /* Text color */
  border: 0px solid #ccc; /* Border */
}

h4 {
  position: relative;
  top: 20%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
  font-size: calc(100% + 1vw);
  padding: 0px; /* Add padding for better readability */
  text-align: center; /* Center text horizontally */
  margin: 0 auto; /* Center horizontally */
  text-decoration: none; /* Remove underline */
  color: white; /* Text color */
  border: 0px solid #ccc; /* Border */
}

h5 {
  display: block; /* Display as block element */
  font-size: calc(50% + 0.1vw);
  padding: 0px; /* Add padding for better readability */
  text-align: center; /* Center text horizontally */
  margin: 0 auto; /* Center horizontally */
  text-decoration: none; /* Remove underline */
  color: white; /* Text color */
  border: 0px solid #ccc; /* Border */
}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  font-size: 10vw;
  padding-left: 2vw;
  text-align: center;
  top: 0;
}

div {
  right: 0;
  left: 0;
  position: relative;
}

html,body{
    overflow-x: clip;
}

/*-- SKY --*/

html {
  height: 100%;
  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* Keyframes for twinkling animation */
@keyframes twinkling {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
}

/* Generate 20 stars */
.star:nth-child(1) { top: 10%; left: 20%; }
.star:nth-child(2) { top: 70%; left: 80%; }
.star:nth-child(3) { top: 30%; left: 50%; }
.star:nth-child(4) { top: 90%; left: 40%; }
.star:nth-child(5) { top: 50%; left: 10%; }
.star:nth-child(6) { top: 80%; left: 30%; }
.star:nth-child(7) { top: 20%; left: 70%; }
.star:nth-child(8) { top: 60%; left: 90%; }
.star:nth-child(9) { top: 40%; left: 30%; }
.star:nth-child(10) { top: 10%; left: 90%; }
.star:nth-child(11) { top: 70%; left: 40%; }
.star:nth-child(12) { top: 30%; left: 80%; }
.star:nth-child(13) { top: 80%; left: 10%; }
.star:nth-child(14) { top: 50%; left: 60%; }
.star:nth-child(15) { top: 20%; left: 30%; }
.star:nth-child(16) { top: 90%; left: 70%; }
.star:nth-child(17) { top: 40%; left: 80%; }
.star:nth-child(18) { top: 10%; left: 60%; }
.star:nth-child(19) { top: 60%; left: 20%; }
.star:nth-child(20) { top: 70%; left: 10%; }

/* Twinkling animation */
.star {
  animation: twinkling 1.5s infinite;
  animation-delay: calc(0.1s * (var(--i) + 1)); /* Different delay for each star */
}

@keyframes twinkling {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.moon {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 10vw;
  height: 10vw;
  background: radial-gradient(circle at 30% 30%, #fdfcfb, #d1d1d1);
  border-radius: 50%;
  box-shadow: 0 0 30px #ffffff88;
}

/*-- OCEAN --*/
.ocean {
  margin: 0;
  position: absolute;
  top: calc(55vh + 0px); 
  height: calc(45vh + 269402px); 
  width: 100%;
  opacity: 0.4;
  background: black;
  overflow: hidden;
}

/*-- SEAFLOOR --*/
.seafloor {
  position: absolute;
  top: 70vh; 
  width: 100%;
  height: 30vh;
  opacity: 1;
  background: #a67c58;
  border: 2px solid black;  
  z-index: 1;
}

/* Boat container */
.boat {
  position: absolute;
  bottom: 43%;
  left: 70%;
  width: 80px;
  height: 60px;
  animation: float 4s ease-in-out infinite;
  z-index: 4;
}

/* Boat hull */
.hull {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 20px;
  background: black;
  border-radius: 0 0 40px 40px;
}

/* Cabin */
.cabin {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 30px;
  height: 20px;
  background: black;
  border-radius: 3px;
}

/* Mast */
.mast {
  position: absolute;
  bottom: 20px;
  left: 38px;
  width: 4px;
  height: 30px;
  background: black;
}

/* Light on mast */
.light {
  position: absolute;
  top: -5px;
  left: 35px;
  width: 10px;
  height: 10px;
  background: yellow;
  border-radius: 50%;
  box-shadow: 0 0 10px yellow;
}

/* Drill */
.drill {
  position: absolute;
  top: 0px;
  left: 38px;
  width: 4px;
  height: 300px;
  background: black;
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

#scrollPosition {
  position: fixed;
  bottom: 0%;
  left: 55%;
  text-align: center;
  transform: translateX(-50%);
  opacity: 0.75;
  padding: 5px 10px;
  width: 90%;
}

.default-style {
    color: black; /* Default text color */
    background-color: #c1e0e2;
    border: 2px solid black;  
}

/* Custom styling */
.custom-style {
    color: transparent;
}


/* title */

.title-page {
  margin: 0;
  display: block;
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #201c2f 0%, #100751 100%);
}

/* stages */

.Quaternary { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 0px); 
  height: 1292px; 
  color: black;  
  background: #F9F97F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Piacenzian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 1290px); 
  height: 512px; 
  color: black;  
  background: #FFFFBF;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Zanclean { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 1800px); 
  height: 869px; 
  color: black;  
  background: #FFFFB3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Messinian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 2666px); 
  height: 959px; 
  color: black;  
  background: #FFFF73;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Tortonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 3623px); 
  height: 2194px; 
  color: black;  
  background: #FFFF66;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Serravallian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 5815px); 
  height: 1097px; 
  color: black;  
  background: #FFFF59;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Langhian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 6910px); 
  height: 1082px; 
  color: black;  
  background: #FFFF4D;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Burdigalian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 7990px); 
  height: 2232px; 
  color: black;  
  background: #FFFF41;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Aquitanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 10220px); 
  height: 1297px; 
  color: black;  
  background: #FFFF33;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Chattian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 11515px); 
  height: 2397px; 
  color: black;  
  background: #FEE6AA;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Rupelian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 13910px); 
  height: 3042px; 
  color: black;  
  background: #FED99A;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Priabonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 16950px); 
  height: 1907px; 
  color: black;  
  background: #FDCDA1;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Bartonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 18855px); 
  height: 1747px; 
  color: black;  
  background: #FDC091;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Lutetian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 20600px); 
  height: 3302px; 
  color: black;  
  background: #FCB482;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Ypresian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 23900px); 
  height: 4102px; 
  color: black;  
  background: #FCA773;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Thanetian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 28000px); 
  height: 1602px; 
  color: black;  
  background: #FDBF6F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Selandian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 29600px); 
  height: 1202px; 
  color: black;  
  background: #FEBF65;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Danian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 30800px); 
  height: 2202px; 
  color: black;  
  background: #FDB462;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Maastrichtian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 33000px); 
  height: 3052px; 
  color: black;  
  background: #F2FA8C;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Campanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 36050px); 
  height: 5752px; 
  color: black;  
  background: #E6F47F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Santonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 41800px); 
  height: 1352px; 
  color: black;  
  background: #D9EF74;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Coniacian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 43150px); 
  height: 1752px; 
  color: black;  
  background: #CCE968;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Turonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 44900px); 
  height: 2052px; 
  color: black;  
  background: #BFE35D;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Cenomanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 46950px); 
  height: 3302px; 
  color: black;  
  background: #B3DE53;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Albian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 50250px); 
  height: 6252px; 
  color: black;  
  background: #CCEA97;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Aptian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 56500px); 
  height: 4202px; 
  color: black;  
  background: #BFE48A;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Barremian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 60700px); 
  height: 2187px; 
  color: black;  
  background: #B3DF7F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Hauterivian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 62885px); 
  height: 3417px; 
  color: black;  
  background: #A6D975;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Valanginian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 66300px); 
  height: 3602px; 
  color: black;  
  background: #99D36A;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Berriasian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 69900px); 
  height: 2602px; 
  color: black;  
  background: #8CCD60;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Tithonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 72500px); 
  height: 2102px; 
  color: black;  
  background: #D9F1F7;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Kimmeridgian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 74600px); 
  height: 2802px; 
  color: black;  
  background: #CCECF4;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Oxfordian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 77400px); 
  height: 3352px; 
  color: black;  
  background: #BFE7F1;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Callovian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 80750px); 
  height: 1902px; 
  color: black;  
  background: #BFE7E5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Bathonian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 82650px); 
  height: 1452px; 
  color: black;  
  background: #B3E2E3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Bajocian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 84100px); 
  height: 1352px; 
  color: black;  
  background: #A6DDE0;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Aalenian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 85450px); 
  height: 1902px; 
  color: black;  
  background: #9AD9DD;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Toarcian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 87350px); 
  height: 4752px; 
  color: black;  
  background: #99CEE3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Pliensbachian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 92100px); 
  height: 4352px; 
  color: black;  
  background: #80C5DD;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Sinemurian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 96450px); 
  height: 3302px; 
  color: black;  
  background: #67BCD8;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Hettangian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 99750px); 
  height: 952px; 
  color: black;  
  background: #4EB3D3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Rhaetian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 100700px); 
  height: 3552px; 
  color: black;  
  background: #E3B9DB;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Norian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 104250px); 
  height: 9252px; 
  color: black;  
  background: #D6AAD3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Carnian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 113500px); 
  height: 5002px; 
  color: black;  
  background: #C99BCB;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Ladinian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 118500px); 
  height: 2502px; 
  color: black;  
  background: #C983BF;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Anisian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 121000px); 
  height: 2602px; 
  color: black;  
  background: #BC75B7;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Olenekian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 123600px); 
  height: 2002px; 
  color: black;  
  background: #B051A5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Induan { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 125600px); 
  height: 353px; 
  color: black;  
  background: #A4469F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Changhsingian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 125951px); 
  height: 1121px; 
  color: black;  
  background: #FCC0B2;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Wuchiapingian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 127070px); 
  height: 2687px; 
  color: black;  
  background: #FCB4A2;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Capitanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 129755px); 
  height: 2387px; 
  color: black;  
  background: #FB9A85;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Wordian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 132140px); 
  height: 1312px; 
  color: black;  
  background: #FB8D76;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Roadian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 133450px); 
  height: 3057px; 
  color: black;  
  background: #FB8069;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Kungurian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 136505px); 
  height: 5247px; 
  color: black;  
  background: #E38776;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Artinskian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 141750px); 
  height: 3302px; 
  color: black;  
  background: #E37B68;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Sakmarian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 145050px); 
  height: 1712px; 
  color: black;  
  background: #E36F5C;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Asselian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 146760px); 
  height: 2692px; 
  color: black;  
  background: #E36350;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Gzhelian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 149450px); 
  height: 2402px; 
  color: black;  
  background: #CCD4C7;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Kasimovian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 151850px); 
  height: 1652px; 
  color: black;  
  background: #BFD0C5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Moscovian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 153500px); 
  height: 4102px; 
  color: black;  
  background: #C7CBB9;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Bashkirian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 157600px); 
  height: 4002px; 
  color: black;  
  background: #99C2B5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Serpukhovian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 161600px); 
  height: 3852px; 
  color: black;  
  background: #BFC26B;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Visean { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 165450px); 
  height: 7902px; 
  color: black;  
  background: #A6B96C;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Tournaisian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 173350px); 
  height: 6102px; 
  color: black;  
  background: #8CB06C;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Famennian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 179450px); 
  height: 6652px; 
  color: black;  
  background: #F2EDC5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Frasnian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 186100px); 
  height: 5252px; 
  color: black;  
  background: #F2EDAD;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Givetian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 191350px); 
  height: 2502px; 
  color: black;  
  background: #F1E185;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Eifelian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 193850px); 
  height: 2802px; 
  color: black;  
  background: #F1D576;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Emsian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 196650px); 
  height: 7152px; 
  color: black;  
  background: #E5D075;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Pragian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 203800px); 
  height: 1602px; 
  color: black;  
  background: #E5C468;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Lochkovian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 205400px); 
  height: 4202px; 
  color: black;  
  background: #E5B75A;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Pridoli { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 209600px); 
  height: 1902px; 
  color: black;  
  background: #E6F5E1;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Ludfordian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 211500px); 
  height: 1302px; 
  color: black;  
  background: #D9F0DF;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Gorstian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 212800px); 
  height: 902px; 
  color: black;  
  background: #CCECDD;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Homerian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 213700px); 
  height: 1552px; 
  color: black;  
  background: #CCEBD1;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Sheinwoodian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 215250px); 
  height: 1452px; 
  color: black;  
  background: #BFE6C3;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Telychian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 216700px); 
  height: 2552px; 
  color: black;  
  background: #BFE6CF;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Aeronian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 219250px); 
  height: 1152px; 
  color: black;  
  background: #B3E1C2;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Rhuddanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 220400px); 
  height: 1502px; 
  color: black;  
  background: #A6DCB5;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Hirnantian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 221900px); 
  height: 702px; 
  color: black;  
  background: #A6DBAB;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Katian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 222600px); 
  height: 3902px; 
  color: black;  
  background: #99D69F;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Sandbian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 226500px); 
  height: 2702px; 
  color: black;  
  background: #8CD094;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Darriwilian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 229200px); 
  height: 4452px; 
  color: black;  
  background: #74C69C;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Dapingian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 233650px); 
  height: 1352px; 
  color: black;  
  background: #66C092;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Floian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 235000px); 
  height: 3852px; 
  color: black;  
  background: #41B087;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Tremadocian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 238850px); 
  height: 3852px; 
  color: black;  
  background: #33A97E;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Stage-10 { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 242700px); 
  height: 2052px; 
  color: black;  
  background: #E6F5C9;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Jiangshanian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 244750px); 
  height: 2252px; 
  color: black;  
  background: #D9F0BB;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Paibian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 247000px); 
  height: 1502px; 
  color: black;  
  background: #CCEBAE;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Guzhangian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 248500px); 
  height: 1752px; 
  color: black;  
  background: #CCDFAA;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Drumian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 250250px); 
  height: 2002px; 
  color: black;  
  background: #BFD99D;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Wuliuan { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 252250px); 
  height: 2252px; 
  color: black;  
  background: #B3D492;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Stage-4 { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 254500px); 
  height: 2502px; 
  color: black;  
  background: #B3CA8E;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Stage-3 { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 257000px); 
  height: 3502px; 
  color: black;  
  background: #A6C583;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Stage-2 { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 260500px); 
  height: 4002px; 
  color: black;  
  background: #A6BA80;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}

.Fortunian { 
  position: absolute; 
  margin: 0; 
  width: 10%; 
  top: calc(100vh + 264500px); 
  height: 4902px; 
  color: black;  
  background: #99B575;  
  opacity: 1;  
  border: 2px solid black;  
  font-size: 1vmin;  
  writing-mode: vertical-rl;  
  transform: rotate(-180deg);  
}