* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* stop user text highlight with cursur selection */
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE edge */
    user-select: none;
    /*  */
}

@font-face {
    font-family: spectralRegular;
    src: url(../assets/fonts/Spectral-Regular.ttf);
}

@font-face {
    font-family: googleSansRegular;
    src: url(../assets/fonts/GoogleSans-Regular.ttf);
}


*:active {
    /* stop browser outline from displaying on button clicks */
    outline: 0;
}

html,
body {
    /* stop scrolling */
    height: 100%;
    overflow: hidden;
    font-family: googleSansRegular;
    background-color: black;

}

#colored-word {
    color: #7ec7aa;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.6rem;
}

div,
main,
section,
img {
    position: absolute;
}

main {
    display: none;
}

#loading,
#begin,
main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading {
    width: 8rem;
    height: auto;
}


#btnContainer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../assets/images/background.png);
    background-size: 100%;
    background-repeat: no-repeat;
    visibility: hidden;
}

.intro_container {
    width: 100%;
    height: 100%;
}

.introduction {
    width: 600px;
    height: auto;
    position: relative;
    margin: 0 auto;
    margin-top: 140px;
    /* margin: 50px 0px 0px 50px; */
    padding: 30px 40px 40px 40px;
    background: #000;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    word-spacing: 0.2rem;
    line-height: 3rem;
    border: 1px solid #7ec7aa;

}

#begin {
    display: inline-block;
    /* these styles can be changed */
    background-color: black;
    color: aliceblue;
    border-radius: 1rem;
    padding: 0rem 2rem;
    transition: all 0.5s;
    visibility: hidden;
    margin-top: 12rem;
    /* Centers a block-level element horizontally */
}


#begin:hover {
    cursor: pointer;
    background-color: #7ec7aa;
    color: black;

}

#intro-background {

    visibility: hidden;
}

main {
    width: 960px;
    height: 600px;
    overflow: hidden;
    box-shadow: 0 0 0.8rem #00000020;
}

section {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


#next img {
    width: 12rem;
    height: auto;
    padding-right: 6rem;

}

#prev img {
    width: 12rem;
    height: auto;
    padding-left: 6rem;
}

#prev,
#next {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;

    /* these styles can be changed */
    width: 2rem;
    height: 2rem;
    bottom: 1rem;
    font-size: 1rem;
    font-weight: bold;
    /* transition: background 0.5s; */
}

#next {
    right: 1rem;
}

#prev {
    left: 1rem;
}

#next:hover,
#prev:hover {
    cursor: pointer;
    /* color: aquamarine;
    background: peru; */
}

/* shared screen styles */

h1 {
    position: absolute;

    /* these styles can be changed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: darkolivegreen;
}

/* screen 01 styles */
#screen1 {
    z-index: 6000;
    background: url(../assets/images/background1.png);
    background-size: cover;
}

#title {
    position: absolute;
    top: 2rem;
    left: 1.8rem;
}

#sub-title {
    position: absolute;
    top: 12rem;
    left: 17rem;
}

#map {
    position: absolute;
    top: 15.8rem;
    left: 17rem;
}

/* screen 02 styles */
#screen2 {
    z-index: 5000;
    background: url(../assets/images/background2.png);
    background-size: cover;
}

#migrationadapt {
    position: absolute;
    top: 3rem;
    left: 1rem;
    visibility: hidden;
}

#randomcloud {
    position: absolute;
    top: 0rem;
    left: 30rem;
    visibility: hidden;
}

#copy1 {
    position: absolute;
    top: 6rem;
    left: 0rem;
    visibility: hidden;
}

#tower1 {
    position: absolute;
    top: 23rem;
    left: 0rem;
    cursor: pointer;
    visibility: hidden;
}

#copy2 {
    position: absolute;
    top: 13rem;
    left: 5rem;
    visibility: hidden;
}

#tower2 {
    position: absolute;
    bottom: 0rem;
    left: 14.2rem;
    cursor: pointer;
    visibility: hidden;
}

#tower3 {
    position: absolute;
    top: 16rem;
    left: 27rem;
    cursor: pointer;
    visibility: hidden;
}

#chartbase {
    position: absolute;
    top: 8rem;
    left: 37rem;
    visibility: hidden;
}

#chartbars {
    position: absolute;
    top: 12rem;
    left: 44rem;
    visibility: hidden;
}

.cover1 {
    position: absolute;
    top: 12rem;
    left: 44rem;
    height: 90px;
    width: 180px;
    background-color: #fff;
    visibility: hidden;
}

#arrow1 {
    position: absolute;
    top: 26rem;
    left: 11rem;
    visibility: hidden;
}

#arrow2 {
    position: absolute;
    top: 30rem;
    left: 21rem;
    visibility: hidden;
}

#arrow3 {
    position: absolute;
    top: 23rem;
    left: 37rem;
    visibility: hidden;
}

/* screen 03 styles */
#screen3 {
    z-index: 4000;
    background: url(../assets/images/background3.png);
    background-size: cover;
}

#misadventure {
    position: absolute;
    top: 34.3rem;
    left: 12.4rem;
    visibility: hidden;
}

#copy3 {
    position: absolute;
    top: 5rem;
    left: 4rem;
    visibility: hidden;
}

#copy4 {
    position: absolute;
    top: 10rem;
    left: 4rem;
    visibility: hidden;
}

#copy5 {
    position: absolute;
    top: 7rem;
    left: 22rem;
    visibility: hidden;
}

#sleepinglady {
    position: absolute;
    top: 21.3rem;
    left: 7rem;
    cursor: pointer;
    visibility: hidden;
}

#sadman {
    position: absolute;
    top: 17.5rem;
    left: 29rem;
    cursor: pointer;
    visibility: hidden;
}

#needle {
    position: absolute;
    top: 32rem;
    left: 48rem;
    cursor: pointer;
    visibility: hidden;
}

#spincycle {
    position: absolute;
    top: 7rem;
    left: 48rem;
    cursor: pointer;
    visibility: hidden;
}

#arrow4 {
    position: absolute;
    top: 22rem;
    left: 18rem;
    visibility: hidden;
}

#arrow5 {
    position: absolute;
    top: 20rem;
    left: 42rem;
    visibility: hidden;
}

#arrow6 {
    position: absolute;
    top: 32rem;
    left: 54rem;
    visibility: hidden;
}

/* screen 04 styles */
#screen4 {
    z-index: 3000;
    background: url(../assets/images/background4.png);
    background-size: cover;
}

#contributions {
    position: absolute;
    top: 3.5rem;
    left: 11.4rem;
    visibility: hidden;
}


#copy6 {
    position: absolute;
    top: 8rem;
    left: 0rem;
    visibility: hidden;
}

#copy7 {
    position: absolute;
    top: 8rem;
    left: 18rem;
    visibility: hidden;
}

#copy8 {
    position: absolute;
    top: 7rem;
    left: 40rem;
    visibility: hidden;
}

#step1 {
    display: none;
    position: absolute;
    top: 29rem;
    left: 23rem;
    cursor: pointer;
    visibility: hidden;
}

#step2 {
    display: none;
    position: absolute;
    top: 29.5rem;
    left: 21.5rem;
    cursor: pointer;
    visibility: hidden;
}

#step3 {
    /* display: none; */
    position: absolute;
    top: 30.5rem;
    left: 23.5rem;
    cursor: pointer;
    visibility: hidden;
}


/* screen 05 styles */
#screen5 {
    z-index: 2000;
    background: url(../assets/images/background5.png);
    background-size: cover;
}

#capitalism {
    position: absolute;
    top: 34.3rem;
    left: 15.6rem;
    visibility: hidden;
}

#copy9 {
    position: absolute;
    top: 5rem;
    left: 5rem;
    visibility: hidden;
}

#shoppingcart {
    position: absolute;
    top: 12.5rem;
    left: 8rem;
    cursor: pointer;
    visibility: hidden;
}

#piechart1 {
    position: absolute;
    top: 10rem;
    left: 47.9rem;
    z-index: 1890;
    visibility: hidden;

}

#piechart2 {
    position: absolute;
    top: 15.7rem;
    left: 49.2rem;
    z-index: 1891;
    visibility: hidden;

}

#piechart3 {
    position: absolute;
    top: 15.7rem;
    left: 53.5rem;
    z-index: 1892;
    visibility: hidden;
}

#arrow7 {
    position: absolute;
    top: 13rem;
    left: 38rem;
    visibility: hidden;
}

#arrow8 {
    position: absolute;
    top: 4rem;
    left: 43rem;
    visibility: hidden;
}

#piechartbase {
    position: absolute;
    top: 3.1rem;
    left: 47.2rem;
    z-index: 1889;
    visibility: hidden;
}

#door {
    position: absolute;
    top: 2.3rem;
    left: 46.4rem;
    z-index: 1898;
    cursor: pointer;
    visibility: hidden;
}

/* screen 06 styles */
#screen6 {
    z-index: 1000;
    background: url(../assets/images/background6.png);
    background-size: cover;
}

.refcopy {
    color: #7ec7aa;
    position: absolute;
    top: 8.5rem;
    left: 24rem;
    transform: rotateY(48deg) rotateX(-16deg) rotateZ(-16deg);
    width: 29rem;
    line-height: 2rem;
    font-weight: bold;
    visibility: hidden;
    font-size: 0.5rem;
}

#references {
    position: absolute;
    top: 25.8rem;
    left: 49.2rem;
    transform: rotateZ(-2deg);
    visibility: hidden;
}

/* 
#referenceslist {
    position: absolute;
    top: 6rem;
    left: 26.8rem;
} */

/* The Modal (background) */
/* This is the parent container. It must be full screen and set to flex. */
.modal {
    display: none;
    justify-content: center;
    /* Centers children horizontally */
    align-items: center;
    /* Centers children vertically */

    /* These properties make the modal full screen and on top of everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Other modal styles */
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000000000;
}

/* This is the child element that will be centered */
.modal-content {
    background-color: #000;
    color: white;
    padding: 2.5rem;
    border: 1px solid #7ec7aa;
    width: 80%;
    /* The width can be any value */
    line-height: 2rem;
}

/* The Close Button */
.close {
    color: #7ec7aa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#myBton {
    font-family: spectralRegular;
    font-style: italic;
    background-color: black;
    border: #7ec7aa 2px solid;
    padding: 0.7rem;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    top: 2rem;
    left: 55rem;
    cursor: pointer;
    visibility: hidden;
}


/* The infoModal (background) */
.infomodal {
    display: none;
    justify-content: center;
    /* Centers children horizontally */
    align-items: center;
    /* Centers children vertically */

    /* These properties make the modal full screen and on top of everything */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Other modal styles */
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000000000;
}

/* Modal Content/Box */
.info-modal-content {
    background-color: #000;
    color: white;
    padding: 2.5rem;
    border: 1px solid #7ec7aa;
    width: 80%;
    /* The width can be any value */
    line-height: 2rem;
}

/* The Close Button */
.exit {
    color: #7ec7aa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.exit:hover,
.exit:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#informationbtn {
    font-family: spectralRegular;
    font-style: italic;
    background-color: black;
    border: #7ec7aa 2px solid;
    padding: 0.7rem;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    top: 17rem;
    left: 47rem;
    cursor: pointer;
    z-index: 4444;
    visibility: hidden;
}