/* homepage */

body {
    background-color: #143369;
    overflow-x: hidden; /* prevent horizontal scrolling */
    margin: 0;
    width: 100vw;
    height: 100vh;
}
.original-size {
    width: auto;
    height: auto;
}
.container {
    position: relative;
    z-index: 1; /* make sure the container is on top of the background */
}

/* Animations */
.hidden {
    opacity: 0;
    transition: opacity 1s ease-in;
}
.show {
    opacity: 1;
}

.depression-man {
    /* "transform" is essential since the original image is too large, 
    but it also shrinks the effect of top and left shifting */
    transform: scale(0.3, 0.3); 
    position: relative;
    top: -600px;
    left: -700px;
}
.section1 {
    position: relative;
    top: -1850px;
    left: 400px;
    color: #FFFFFF;
    font: bold 38px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-shadow: 12px 8px 5px silver;
    text-align: center;
}
.section2-1 {
    position: relative;
    top: -1200px;
    left: -425px;
    color: #FF0000;
    font: bold 38px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-shadow: 12px 8px 5px silver;
    text-align: center;
}
.section2-2 {
    position: relative;
    top: -1250px;
    left: 52.5px;
    color: #FFFFFF;
    font: bold 38px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: left;
}
.cloud {
    width: 250px;
    height: 250px;
    position: relative;
    top: -1650px;
    left: 950px;
}
.sad-face {
    width: 150px;
    height: 150px;
    position: relative;
    top: -1275px;
    left: -265px;
}
.depression-boy-1 {
    width: 960px;
    height: 540px;
    position: relative;
    top: -1230px;
    left: -50px;
}
.section3-1 {
    /* We want the text to be fixed on the screen and act as an anchor for other following elements */
    position: absolute;
    top: 1530px;
    left: 625px;
    color: #FFFFFF;
    font: bold 32px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.section3-2 {
    /* We want the text to be fixed on the screen and act as an anchor for other following elements */
    position: absolute;
    top: 1565px;
    left: 730px;
    color: #FFE268;
    font: bold 109px Brixton Sans, Garamond, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.section4-1 {
    position: relative;
    top: -1000px;
    left: -225px;
    color: #FFFFFF;
    font: bold 32px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.graph {
    width: 520px;
    height: 400px;
    position: relative;
    top: -1000px;
    left: 150px;
}
.section5 {
    position: relative;
    top: -750px;
    left: 25px;
    color: #143369;
    font: bold 38px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.question-mark {
    width: 1340px;
    height: 810px;
    position: relative;
    top: -975px;
    left: 0px;
}
.text {
    width: 773.25px;
    height: 205px;
    position: relative;
    top: -1475px;
    left: 275px;
}
.section6 {
    /* We want the text to be fixed on the screen and act as an anchor for other following elements */
    position: absolute;
    top: 3800px;
    left: 400px;
    color: #143369;
    font: bold 38px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
    z-index: 2; /* make sure the text is on top of the "shine" image */
}
.shine {
    width: 1063.5px;
    height: 810px;
    position: relative;
    top: -1325px;
    left: 100px;
}
.serene-logo {
    width: 435px;
    height: 280px;
    position: relative;
    top: -1900px;
    left: 425px;
}
.section7-1 {
    position: relative;
    top: -1550px;
    left: -125px;
    color: #FFC000;
    font: bold 50px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.section7-2 {
    position: relative;
    top: -1660px;
    left: 100px;
    color: #143369;
    font: bold 38px Arial, Tahoma, Verdana, sans-serif;
    white-space: pre;
    text-align: center;
}
.image-slider {
    top: 4750px;
    left: 650px;
    position: absolute;
    width: 870px; /* This defines the width of the image slider, which is the width of the two buttons */
    height: 280px;
    text-align: center;
}
.slider-image {
    top: 4750px;
    left: 650px;
    position: absolute;
    width: 50%;
    height: auto;
    transform: translateX(-50%);
    transition: opacity 0.5s ease-in-out;
}
.arrow-left {
    top: 4900px;
    left: 240px;
    position: absolute;
    width: 64.1675px;
    height: 99.5px;
    transform: translateY(-50%);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.arrow-right {
    top: 4900px;
    left: 980px;
    position: absolute;
    width: 64.1675px;
    height: 99.5px;
    transform: translateY(-50%);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.section8-1 {
    position: relative;
    top: -1200px;
    left: 250px;
    color: #143369;
    font: bold 32px Arial, Tahoma, Verdana, sans-serif;
    white-space: pre;
    text-align: center;
}
.section8-2 {
    position: relative;
    top: -1200px;
    left: 250px;
    color: #143369;
    font: bold 30px Georgia, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.serotonin {
    width: 250px;
    height: auto;
    position: relative;
    top: -1185px;
    left: 475px;
}
.smile-button {
    width: 500px;
    height: auto;
    position: relative;
    top: -1200px;
    left: 500px;
    z-index: 10; /* make sure the link is on top of the background */
}
.section9-1 {
    position: relative;
    top: -1000px;
    left: -250px;
    color: #143369;
    font: bold 32px Arial, Tahoma, Verdana, sans-serif;
    white-space: pre;
    text-align: center;
}
.section9-2 {
    position: relative;
    top: -1000px;
    left: -250px;
    color: #143369;
    font: bold 30px Georgia, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.film-button {
    width: 500px;
    height: auto;
    position: relative;
    top: -1025px;
    left: 200px;
    z-index: 10; /* make sure the link is on top of the background */
}
.section10 {
    position: relative;
    top: -850px;
    left: 0px;
    color: #143369;
    font: bold 36px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.section11-1 {
    position: relative;
    top: -650px;
    left: 200px;
    color: #143369;
    font: bold 32px Arial, Tahoma, Verdana, sans-serif;
    white-space: pre;
    text-align: center;
}
.section11-2 {
    position: relative;
    top: -650px;
    left: 200px;
    color: #143369;
    font: bold 30px Georgia, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
}
.pokefish-button {
    width: 500px;
    height: auto;
    position: relative;
    top: -650px;
    left: 700px;
    z-index: 10; /* make sure the link is on top of the background */
}
.hp-button {
    width: 500px;
    height: auto;
    position: relative;
    top: -500px;
    left: 175px;
    z-index: 10; /* make sure the link is on top of the background */
}
.section12 {
    position: relative;
    top: -300px;
    left: 0px;
    color: #143369;
    font: bold 32px Glacial Indifference, Aptos, Tahoma, Verdana, sans-serif, Arial;
    white-space: pre;
    text-align: center;
    background-image: url('https://static.igem.wiki/teams/5040/homepage/text-background.png');
    background-size: 1200px auto; /* set the background image as 500 px in width and automatically adjusts the height */
    background-repeat: no-repeat; /* to make sure the background image is not repeated */
    background-position: center; /* to make sure the background image is centered */
    /* added some padding to make sure the text is not too close to the background image, 
    also making sure the background image does not get cut off */
    padding: 250px;
}
.bg-with-flowers {
    width: 900px;
    height: auto;
    position: relative;
    top: -250px;
    left: 25%;
}
.tree {
    width: 25%;
    height: auto;
    position: absolute;
    top: 8350px;
    left: -2%; /* make the horizontal position of the image to be a little in the left */
}
.happy-people {
    width: 50%;
    height: auto;
    position: absolute;
    top: 8800px;
    left: 30%; /* center the image */
}