/* CSS RESET */
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        /* stops text selection */
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE/Edge */
        user-select: none;
    }

    /* stop browser outline from displaying on button clicks */
    *:active {
        outline: 0;
    }
    /* GENERAL STYLES */
    html, body .css-selector {
        /* stop page from scrolling */
        height: 100%;
        overflow: hidden;
        font-family: "Arial", sans-serif;
        /* Replace the background color with your .css-selector */
        background: linear-gradient(270deg, #181818, #146476, #761414);
        background-size: 600% 600%;
    
        -webkit-animation: AnimationName 30s ease infinite;
        -moz-animation: AnimationName 30s ease infinite;
        -o-animation: AnimationName 30s ease infinite;
        animation: AnimationName 30s ease infinite;
    }
    
    @-webkit-keyframes AnimationName {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }
    
    @-moz-keyframes AnimationName {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }
    
    @-o-keyframes AnimationName {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }
    
    @keyframes AnimationName {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }
    
    
    .css-selector {
        background: linear-gradient(270deg, #181818, #146476, #761414);
        background-size: 600% 600%;
    
        -webkit-animation: AnimationName 30s ease infinite;
        -moz-animation: AnimationName 30s ease infinite;
        -o-animation: AnimationName 30s ease infinite;
        animation: AnimationName 30s ease infinite;
    }
    
    @-webkit-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @-moz-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @-o-keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    div,main,section,img {
        position: absolute;
        
    }

    main {
        display: none;
        -webkit-filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
        filter:         drop-shadow(5px 5px 5pxrgb(10, 64, 111));
    }

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

    #loading {
        width: 3rem;
        height: 3rem;
    }

    #btnContainer {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    #begin {
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
        display: inline-block;
        background-color:#980b38;
        color: #fff;

        border-radius: 20px;
        padding: 10px 20px;
        transition: all 0.5s;
        font-family: oswald;
        font-size: 70px;
        -webkit-filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
        filter:         drop-shadow(5px 5px 5pxrgb(10, 64, 111));

    }

    #ele8 {
        background-color: #980b38;
        width: 3rem;
        height: 3rem;
        border-radius: 100%;
        font-size: 2rem;
        color: #FFF;
        text-align: center;
        line-height: 50px;
        position: absolute;
        bottom: 2rem;
        left: 33.5rem;
        z-index: 999;

        font-family: oswald;
    }
    #ele7 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        left: 2rem;
        top: 18rem;
        left: 9.5rem;
        position: absolute;
    }
    #ele6 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 999;
        font-size: 2rem;
        top: 14rem;
        left: 19.5rem;
        position: absolute;
    }
    #ele5 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        left: 8rem;
        top: 22rem;
        left: 25.5rem;
        position: absolute;
        
    }
    #ele4 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        left: 2rem;
        top: 26rem;
        left: 17.5rem;
        position: absolute;
    }

    .ele img {
        z-index: 9999;
        left: -25rem;
    }

    #ele10 {
        background-color:#980b38;
        width: 3rem;
        height: 3rem;
        border-radius: 100%;
        font-size: 2rem;
        color: #FFF;
        text-align: center;
        line-height: 50px;
        position: absolute;
        bottom: 2rem;
        left: 23.5rem;
        z-index: 999;

        font-family: oswald;
    }

    .ele10 img{
        z-index: 99999;
        top: 38rem;
        width: 20rem;
        right:-60rem;
    }

    #ele11 {
        left: 32rem;
        top: 4rem;
    }

    #ele11 p {
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #980b38;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;

        top: 3rem;
        left: -2.5rem;
        position: absolute;
    }

    #ele11 img {
        width: 8rem;
        right:-8rem;
        bottom: -8rem;

    }
    .ele11 img {
        left: -20rem;
        width:20rem;

    }
    #ele12 {
        left: 32rem;
        top: 20rem;
    }

    #ele12 p {
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #980b38;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        top: 3rem;
        left: -2.5rem;
        position: absolute;
    }

    span {
        color:#ff8686;
    }
    .ele12 img {
        left: 22rem;
        bottom: 77rem;
        z-index: 199;
        width: 10rem;
    }

    #ele13 {
        left: 4rem;
        top: 10rem;
    }

    #ele13 p {
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #980b38;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;

        top: 3rem;
        left: -2.5rem;
        position: absolute;
    }

    #ele13 img {
        width: 8rem;
        right:-8rem;
        bottom: -8rem;
        z-index: 99;

    }
    .ele13 img {
        left: 29rem;
        bottom: 76rem;
        z-index: 199;
        width: 10rem;

    }

    .love h1 {
        position: absolute;
        color: white;

    }

    .hearts { 
        width: 14rem;
        left: 10rem;
        top: 9rem;
        z-index: 999;
        opacity: 0;
        transition: opacity 0.5s ease;

    }

    .sads { 
        width: 14rem;
        left: 19rem;
        top: 26em;
        z-index: 999;
        opacity: 0;
        transition: opacity 0.5s ease;

    }




    .ele1 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        top: 30rem;
        left: 12.5rem;
        position: absolute;
    }

    .ele2 {
        
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        top: 30rem;
        left: 12.5rem;
        position: absolute;
    }

    h3 {
        position: absolute;
        z-index: 999;
        font-family: oswald;
        font-size: 1.5rem;
        margin-bottom: 9rem;
        text-align: left;
        padding: 2rem;
        color: white;
        top: 3rem;
        width:20rem;
        border-radius: 10%;
        box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }

    .titleimage  {
        width: 2200px;
    }

    .title3 {
        z-index: 999;
        padding: 2rem;
        width: 30rem;
    }

    .titleimage2  {
        top: 800px;
        width: 2200px;
    }

    #begin:hover {
        cursor: pointer;
        background-color: #64bbdd;
        color:  #16527f;;
        border: solid 1px #000;
    }    

    main {
        width: 960px;
        height: 600px;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    section {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #38afde;
    }


    .robot1 {
        position: absolute;
        z-index: 99;
        width:28rem;
    }


    .tri1 {
        position: absolute;
        z-index: 999;
        bottom: 0;
        left: 30rem;
        width: 10rem;
    }
    .tri2 {
        position: absolute;
        z-index: 999;
        width: 10rem;
        bottom: 0;
        left: 20rem;
    }
    .tri3 {
        position: absolute;
        z-index: 999;
        width: 10rem;
        bottom: 0;
        
        left: 40rem;
    }

    .hoverlegend {
        z-index: 99;
        top: 10rem;
        right:3rem;
        position: absolute;
        width: 10rem;
    }
    .hoverlegend2 {
        z-index: 99;
        top: 5rem;
        right:2rem;
        position: absolute;
        width: 10rem;
    }
    .hoverlegend3 {
        z-index: 99;
        top: 5rem;
        left: 48rem;
        position: absolute;
        width: 10rem;
    }
    .hoverlegend4 {
        z-index: 99;
        top: 2rem;
        right:2rem;
        position: absolute;
        width: 10rem;
    }
    .hoverlegend5 {
        z-index: 99;
        top: 2rem;
        right:2rem;
        position: absolute;
        width: 10rem;
    }
    .hoverlegend6 {
        z-index: 99;
        top: 2rem;
        right:2rem;
        position: absolute;
        width: 10rem;
    }

    .memory {
        z-index: 88;
        right: 2rem;
        position: absolute;
        top: 2rem;
    }

    .h1 {
        z-index: 9088;
        bottom: 2rem;
        left: 23.5rem;
        position: absolute;
    }

    .h2 {
        z-index: 9088;
        bottom: 2rem;
        left: 33.5rem;
        position: absolute;
    }

    .c1 {
        z-index: 9999;
        bottom: 2rem;
        left: 43.5rem;
        position: absolute;
    }


    #next, #prev {
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 50px;
        padding-bottom: 5rem;
        bottom: 10px;
        font-size: 50px;
        font-weight: bold;
        transition: background 0.5s;
    }

h1 {
    bottom: 4.7rem;
    left: 30rem;
    z-index: 999;
    position: absolute;
    color: rgb(182, 182, 182);
    font-family: 'Oswald', sans-serif;
}

    #next {

        transition: background 0.5s;
        right: 25px;
    
    }

    #prev {
        left: 20px;
    }
    #next:hover,#prev:hover {
        cursor: pointer;
        color: rgb(177, 34, 34);

    }


    /* SHARED SCREEN STYLES */
    /* for demo only */



    /* SCREEN 1 STYLES */
    #screen1 {
        width:100%;
        position: absolute;
    }

    .title1 {
        position: absolute;
        width: 900px;
        top: 50px;
        position: absolute;
        left: 30px;
        -webkit-filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
        filter:         drop-shadow(5px 5px 5px rgb(17, 78, 131)); 
    }


    .brain {
        top: 3.9rem;
        width: 20rem;
        z-index: 99;
        position: absolute;
    }
    .human {
        width: 30rem;
        top: 3.9rem;
        right: 3rem;
        position: absolute;
        z-index: 99;
    }
    .cap {
        position: absolute;
        top: 9.9rem;
        right: 3rem;
        z-index: 99;
    }

    .bg {
        position: absolute;
        z-index: 1;
    }

    /* SCREEN 2 STYLES */
    #screen2 {
        position: absolute;
        background-color: #38afde;
    }

    .title2 {
        position: absolute;
        top: 20px;
        left: 20px;
        position: absolute;
        width: 270px;
        -webkit-filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
        filter:         drop-shadow(5px 5px 5pxrgb(10, 64, 111)); 
    }

    /* SCREEN 3 STYLES */
    #screen3 {
        background-color: #38afde;
        position: absolute;
    }

    #ele9{
        width: 3rem;
        height: 3rem;
        color: white;
        font-family: oswald;
        background-color: #18d3d9;
        border-radius: 3rem;
        text-align: center;
        padding-top: .1rem;
        z-index: 9999;
        font-size: 2rem;
        left: 2rem;
        bottom: 2rem;
        left: 43.5rem;
        position: absolute;
    }

    .bars {
        height: 5px;
        width: 40px;
        background: #18d3d9;
        bottom: 0;
        position: absolute;
    }

    #bar1 {
        border-radius: 10%;
    top: -16rem;
    font-size: 1rem;
    position: absolute;
    color: black;
    }

    #bar2 {
        border-radius: 10%;
    left: 6rem;
    font-size: 1rem;
    color: black;
    top: -16rem;
    position: absolute;
    }

    .number {
        border-radius: 10%;
        background-color: #980b38;
        left: 33rem;
        padding: 1rem;
        top: 15rem;
        position: absolute;
        width: 7rem;
    }

    .short {
        top: 13rem;
        left: 42rem;
        position: absolute;
    }
    .short {
        top: 13rem;
        left: 49rem;
        position: absolute;
    }
    .long {
        top: 13rem;
        left: 42rem;
        position: absolute;
    }
    .rect {
        z-index: 9999;
    top: 15.5rem;
    right: 5.5rem;
    position: absolute;
    }


    /* SCREEN 4 STYLES */
    #screen4 {
        background-color: #38afde;
    }

    .bot3 {
        z-index: 999;
        width: 28rem;
        right:0;
        top: 5rem;
    }

    .brain1 {
        z-index: 990;
        left: 7rem;
        top: 11rem;
    }
    .brain2 {
        left: 13.7rem;
        top: 10.1rem;
        z-index: 990;
    }
    .brain3 {
        top: 15.3rem;
        left: 22rem;
        z-index: 990;
    }
    .brain4 {
        left:9rem;
        top: 21.4rem;
        z-index: 990;
    }

    .happy {
        top: 9.9rem;
        left: 2rem;
        z-index: 109;
    }
    .sad {
        top: 23.9rem;
        left: 28rem;
        z-index: 99;
    }
    .fear {
        top: 23.9rem;
        left: 10rem;
        z-index: 99;
    }
    .anger {
        top: 9.9rem;
        left: 25rem;
        z-index: 99;
    }

    .emotions-container {
        position: absolute;

    }

    .brain1, .brain2, .brain3, .brain4 {

        position: absolute;
        cursor: pointer;
    }

    .fear, .anger, .sad, .happy {
        opacity: 0;
        transition: opacity 0.5s ease;
    }


    .mainbrain {
        z-index: 20;
        left: 7rem;
        top: 10rem;
    }

    /* SCREEN 5 STYLES */
    #screen5 {
        background-color: #38afde;
    }

    .title4 {
        right: 0;
        top: 3rem;
        margin-top: 2rem;
        padding: 2rem;
        z-index: 999;
    }

    .bot4 {
        z-index: 999;
        top: 13rem;
        width: 35rem;
        left: 0;
    }

    .bot5 {
        z-index: 99;
        width: 30rem;
        top: 5rem;
    }

    .title5 {
        z-index: 999;
        top: 2rem;
        left:2rem;
        width: 30rem;
    }

    .quote {
        z-index: 99;
        top: 17rem;
        right: 8rem;
    padding-right: 2rem;
    width: 20rem;
    }

    .floater2 {
        z-index: 99;
        LEFT: 28rem;
        top: 9rem;
        width: 40%;

    }
    .floater3 {
        z-index: 99;
        LEFT: 32rem;
        top: 19rem;
        width: 40%;

    }

    .tris {
        z-index: 999;
        bottom: 0;
        width: 24rem;
        left: 28rem;
    }


    .bg4 {
        width:112%;
        right: 0rem;
        position: absolute;
        z-index: 99;
    }


    .sometimes {
        z-index: 888;
        top: 3rem;
        left: 3rem;
        position: absolute;
    }
    .itfeels {
        z-index: 888;
        top: 8rem;
        left: 3rem;
        position: absolute;
    }
    .likeour {
        top: 12rem;
        left: 3rem;
        z-index: 888;
        position: absolute;
    }

    .explode {
        top: 11rem;
        left: 23rem;
        z-index: 888;
        position: absolute;
    }

    .cant {
        top: 24rem;
        left: 3rem;
        z-index: 888;
        position: absolute;
    }

    .just {
        top: 23.4rem;
        left: 22rem;
        z-index: 888;
        width: 10rem;
        position: absolute;
    }
    .breathe {
        top: 23rem;
        left: 34rem;
        z-index: 888;
        position: absolute;
    }





    /* SCREEN 6 STYLES */
    #screen7 {
        width: 100%;
        position: absolute;
        }



h6 {
    left: 4rem;
    color:#ff8686;
    position: absolute;
    z-index: 99;
    top: 3rem;
    font-size: 3rem;
    font-family: oswald;
}

ul {
    top:8rem;
    left: 3rem;
    position: absolute;
    z-index: 99;
    color: white;
}

li {
    font-size: 12px;
    margin: 2rem;
    width: 20rem;
    font-family: oswald;
}

#finalbot {
    z-index: 999;
    width: 24rem;
    right: 0;
}