.arrow {
    font-size: 4vh;
    font-weight: bolder;
    position: absolute;
    width: 100%;
    margin-top: 50%;
    top: -2vh;
    left: 0vh;
}

button {
    height: 6vh;
    border-radius: 50%;
    background-color: #6100ff;
    position: absolute;
    width: 6vh;
    top: -3vh;
    margin-top: 50vh;
    border: 1px solid #ffffff;
}

.book {
    width: 100%;
    position: absolute;
    box-shadow: 0px 0px 4px #ffffff;
    min-width: 600px;
    height: 100%;
}

.book-page {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 0px 0px 6px #636363;
    padding-top: 1px;
    padding-left: 80px;
    padding-right: 80px;
}

.button-right {
    right: 2%;
    z-index: 500;
}

.button-left {
    left: 2%;
    z-index: 500;
}

.two {
    background-color: #e0ddd4;
    background-image: url('https://images.unsplash.com/photo-1537420327992-d6e192287183?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDkyMnwwfDF8c2VhcmNofDF8fHNwYWNlfGVufDB8fHx8MTYzMTA2MTQ5Mw&ixlib=rb-1.2.1&q=80&w=1080');
    background-size: 140%;
    background-position: 50% 40%;
}

p {
    font-family: arial;
    position: relative;
    z-index: 2;
    font-size: 30px;
}

h2 {
    font-family: 'Actor', sans-serif;
    font-size: 60px;
    text-align: center;
    width: 100%;
    color: #d1d1d1;
    text-shadow: 0px 0px 3px #000000;
    z-index: 2;
    position: relative;
    margin-top: 5%;
}

.hot-earth {
    background-image: radial-gradient(circle at center, rgb(78, 25, 0) 0%, rgb(152, 30, 30) 100%);
    width: 86%;
    height: 128%;
    border-radius: 50%;
    box-shadow: 0vw 0vw 1vw #9c5f08;
}

.smashed-earth-holder {
    height: 20vh;
    width: 30vh;
    position: absolute;
    bottom: -2vh;
    left: 11vw;
}

.earth-smashing-planet {
    position: absolute;
    width: 20%;
    height: 29%;
    background-image: radial-gradient(circle at center, #000 0%, rgb(58, 58, 58) 100%);
    border-radius: 50%;
    box-shadow: 1vh -1vh 3vh 2vh #aa7120;
}

.darken {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.32);
    left: 0;
    top: 0;
}

.four {
    background-image: radial-gradient(circle at center, rgb(182, 87, 17) 0%, rgb(0, 0, 0) 32%);
}

.life-present-day-timescale {
    width: 90%;
    height: calc(100vh - 340px);
    background-color: #000000;
    position: relative;
    z-index: 2;
    overflow: auto;
    border: 1px solid #ffffff;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.quaternary {
    height: 26px;
    background-color: #b31f28;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-align: center;
    font-size: 19px;
    text-transform: uppercase;
    padding-top: 2px;
    margin-top: 71px;
}

.neogene {
    background-color: #b3474d;
    left: 5%;
    width: 55%;
    height: 204px;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 90px;
    position: relative;
}

.paleogene {
    background-color: #b36d71;
    position: relative;
    left: 5%;
    width: 55%;
    height: 430px;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
}

.cretaceous {
    background-color: #4031af;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 790px;
}

.jurassic {
    background-color: #564ab1;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 550px;
}

.triassic {
    background-color: #6e66af;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 500px;
}

.permian {
    background-color: #3cac45;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 400px;
}

.carboniferous {
    background-color: #52aa59;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 40px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 100px;
}

.devonian {
    background-color: #67aa6c;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 1200px;
}

.silurian {
    background-color: #79a67d;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 250px;
}

.ordovocian {
    background-color: #92bd96;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 400px;
}

.cambrian {
    background-color: #a8dcad;
    position: relative;
    left: 5%;
    width: 55%;
    font-family: 'Alatsi', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    padding-top: 100px;
    border-top-width: 1px;
    border-top-style: solid;
    height: 400px;
}

.line {
    width: 9%;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    left: 60%;
}

.mya-bya {
    width: 90%;
    height: 40px;
    background-color: #75d2e1;
    border-width: 1px;
    border-style: solid;
    font-family: 'Alatsi', sans-serif;
    font-size: 22px;
    text-align: center;
    padding-top: 4px;
    margin-left: auto;
    margin-right: auto;
}

h3 {
    font-family: 'Actor', sans-serif;
    font-size: 30px;
}

.image-and-description {
    grid-area: image;
}

.inner-description-block {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 'heading heading' 'text image';
    grid-gap: 20px;
}

.inner-description-block h3 {
    grid-area: heading;
}

.text-box {
    grid-area: text;
}

.text-box p {
    font-size: 25px;
}

.text-box p:first-child {
    margin-top: 0;
}

.fun-fact-p {
    font-size: 27px;
    text-align: center;
}

.fun-fact-h3 {
    margin-top: 2%;
    text-align: center;
    font-size: 40px;
}

.fun-facts-box {
    width: 100%;
    margin-top: 5%;
    border-width: 10px;
    border-style: double;
    padding-bottom: 4%;
}

.image {
    position: relative;
    width: 100%;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.58);
}

.bibliography-p {
    font-family: 'Actor', sans-serif;
    font-size: 19px;
}