/* main css */
body{
    background-color: black;
    font-family: "Open Sans", sans-serif;
}

main,section,div,img,button {
    position: absolute; /*add height */
}

main{
    width: 1920px; 
    height: 1080px;
    background-color: #fff;

    /* helps center the screen when using a bigger screen */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

section {
    width: 100%;
    height: 100%;
    display: none;
}

#screen1{
    display: block;
}

button{
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    padding: 0;
}

#start-btn{
    width: 100%;
    height: 100%;
    font-size: 20px;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

.frame{
    /* centers image according to the design */
    left: 680px;
    top: 110px;
    display: none;
}

#frame1{
    display: block;
}

.intro-container{
    left: 750px;
    top: 206px;
    width: 480px;
    height: 650px;
    padding: 35px 25px;
    line-height: 1.7;
    
}

.intro-container div, 
.intro-container button{
    position: static;
}



.history-txt{
    position: absolute;
    left: 760px;
    top: 252px;
    z-index: 900;

}

.learn-more-text{
    font-size: 24px;
    font-weight: 800;
    color: #0075bf;
    margin-top: 40px;
}

/* .to-screens-btn{
    display: flex;
    width: 390px;
    height: 80px;
    border: solid 2px #0075bf;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.8);
    margin-top: 20px;
    overflow: hidden;
} */

/* .to-screens-btn div:first-child{
    padding: 10px 20px;
    font-size: 21px;
    font-weight: 600;
    color: #0075bf;
    line-height: 1.4;
}

.to-screens-btn div:last-child{
    width: 50px;
    height: 80px;
    background-color: #0075bf;
    color: #fff;
    font-size: 52px;
    opacity: 0.75;
    display: flex;
    justify-content: center;
    line-height: 1.3;
} */

.click-through{
    pointer-events: none;
}

.screen > img{
    left:680px;
    top:110px;
}

.screen > p{
    position: absolute;
    left: 910px;
    top: 300px;
    font-size: 35px;
    font-weight: 800;
    color: #0075bf;
}

/* back button */
#back-btn{
    width: 60px;
    height: 100px;
    background-color: #0075bf;
    border-radius: 0 4px 4px 0;
    color: #fff;
    font-size: 74px;
    opacity: 0.75;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-content: center;
    line-height: 1;
}




/* SCREEN 2 STYLES */

.logo{
    margin-left: 21%;
    margin-top: 2.5%;
    /* border: 1px solid red; */
}

#screen2 h1{
    position: absolute;
    left: 1050px;
    top: 105px;
    font-size: 42px;
    font-weight: 700;
    color: #0075bf;
    transform: translate(-50%, -50%);
    line-height: 1;
    width: 700px;
    padding: 32px 34px 32px 34px;
}

/* hidden element */
#cancel{
    position: absolute;
    left: 643px;
    top: 678px;
    z-index: 2101;
    display: none;
}


#table {
    position: absolute;
    left: 378px;
    top: 229px;
    z-index: 2003;
    display: none;
}

/* pop up background */
#eventsitter{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1100;
    background-color: rgba(101, 101, 101, 0.802);
    display: none;
    
}
/* hidden element closed */

/* point one for first screen */
#algonquinbird{
    position: absolute;
    left: 56px;
    top: 51px;
    z-index: 1000;
}
#alogpoint1{
    position: absolute;
    left: 210px;
    top: 101px;
    z-index: 900;
}
#alogpoint2{
    position: absolute;
    left: 378px;
    top: 214px;
    z-index: 902;
}
#year1{
    position: absolute;
    left: 280px;
    top: 324px;
    z-index: 902;
    mix-blend-mode: soft-light;
}
/* point one for first screen ends */


/* point two for first screen */
#expansionbird{
    position: absolute;
    left: 1071px;
    top: 709px;
    z-index: 1000;
}
#expansioninfo{
    position: absolute;
    left: 959px;
    top: 775px;
    z-index: 900;
}
#expansioninfo2{
    position: absolute;
    left: 1049px;
    top: 901px;
    z-index: 900;
}
#year3{
    position: absolute;
    left: 1669px;
    top: 910px;
    z-index: 800;
    mix-blend-mode: soft-light;
}
/* point two for first screen ends */


/* point three for first screen */
#rapidgrowthbird{
    position: absolute;
    left: 208px;
    top: 273px;
    z-index: 1000;
}

#rapidgrowtinfo{
    position: absolute;
    left: 506px;
    top: 503px;
    z-index: 900;
}

#year2{
    position: absolute;
    left: 107px;
    top: 708px;
    z-index: 1000;
    mix-blend-mode: soft-light;
}
/* point three for first screen ends */


/* point four for first screen */
#milestonesbird{
    position: absolute;
    left: 945px;
    top: 178px;
    z-index: 1000;
}
#milestonesinfo{
    position: absolute;
    left: 1004px;
    top: 226px;
    z-index: 900;
}
#year4{
    position: absolute;
    left: 1214px;
    top: 517px;
    z-index: 800;
    mix-blend-mode: soft-light;
}
/* point four for first screen ends */


/* point fourth button */
#homeicon{
    position: absolute;
    left: 1665px;
    top: 516px;
    z-index: 900;
}

/* SCREEN 3 STYLES */

.logotwo {
    margin-left: 21%;
    margin-top: 2.5%;
    /* border: 1px solid red; */
}

#screen3 h1 {
    position: absolute;
    left: 1050px;
    top: 105px;
    font-size: 42px;
    font-weight: 700;
    color: #0075bf;
    transform: translate(-50%, -50%);
    line-height: 1;
    width: 700px;
    padding: 32px 34px 32px 34px;
}

/* activities for second screen */
#activities{
    position: absolute;
    left: 83px;
    top: 341px;
    z-index: 100;
}

#insect{
    position: absolute;
    left: 59px;
    top: 210px;
    z-index: 101;
}
/* activities for second screen end */

/* hidden element */
#moreinfo4{
    position: absolute;
    top: 649px;
    left: 159px;
    z-index: 103;
}
/* hidden element closed */


/* point two for second screen */
#nature{
    position: absolute;
    left: 505px;
    top: 95px;
    z-index: 101;
}

#naturebody{
    position: absolute;
    left: 652px;
    top: 271px;
    z-index: 101;
    mix-blend-mode: soft-light;
}
/* point two for second screen */


/* point three for second screen */
#environment{
    position: absolute;
    left: 134px;
    top: 710px;
    z-index: 101;
}

#environmentbody{
    position: absolute;
    left: 394px;
    top: 753px;
    z-index: 101;
    
}

#environmenttopic{
    position: absolute;
    left: 473px;
    top: 925px;
    z-index: 101;
    mix-blend-mode: soft-light;
}
/* point three for second screen end */


/* point four for second screen */
#recreation{
    position: absolute;
    left: 706px;
    top: 464px;
    z-index: 101;
}

#recreationbody{ 
    position: absolute;
    left: 886px;
    top: 336px;
    z-index: 90;
}

#recreationtopic{
    position: absolute;
    left: 888px;
    top: 719px;
    z-index: 90;
    mix-blend-mode: soft-light;
}
/* point four for second screen end */


/* point five for second screen */
#wilderness{
    position: absolute;
    left: 1600px;
    top: 698px;
    z-index: 190;
}

#wildernessbody{
    position: absolute;
    left: 1451px;
    top: 717px;
    z-index: 100;
}

#wildernesstopic{
    position: absolute;
    left: 1353px;
    top: 899px;
    z-index: 100;
    mix-blend-mode: soft-light;
}
/* point five for second screen end*/


/* point six for second screen */
#cultural{
    position: absolute;
    left: 1578px;
    top: 225px;
    z-index: 190;
}

#culturaltopic{
    position: absolute;
    left: 1475px;
    top: 411px;
    z-index: 100;
    mix-blend-mode: soft-light;
}

/* pop-up element  */
#actpark {
    position: absolute;
    left: 378px;
    top: 229px;
    z-index: 1003;
    display: none;
}

#cancel3{
    position: absolute;
    left: 643px;
    top: 678px;
    z-index: 1101;
    display: none;
}

/* pop up background */
#eventsitter3{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1000;
    background-color: rgba(101, 101, 101, 0.802);
    display: none;
    top: 0%;
}
/* pop-up element ends */

/* SCREEN 4 STYLES */

.logothree {
    margin-left: 21%;
    margin-top: 2.5%;
    /* border: 1px solid red; */
}

#screen4 h1 {
    position: absolute;
    left: 1050px;
    top: 105px;
    font-size: 42px;
    font-weight: 700;
    color: #0075bf;
    transform: translate(-50%, -50%);
    line-height: 1;
    width: 692px;
    padding: 32px 34px 32px 34px;
}

/* sub-heading for third screen */
#subheading{
    position: absolute;
    left: 87px;
    top: 904px;
    z-index: 100;
    mix-blend-mode: soft-light;
}
/* sub-heading for third screen end */


/* point one for third screen */
#warbler{
    position: absolute;
    left: 87px;
    top: 48px;
    z-index: 100;
}

#warblerbody{
    position: absolute;
    left: 118px;
    top: 510px;
    z-index: 101;
}
/* point one for third screen end */

/* point two for third screen */
#flycatcher{
    position: absolute;
    left: 244px;
    top: 503px;
    z-index: 103;
}

#flycatcherbody{
    position: absolute;
    left: 736px;
    top: 582px;
    z-index: 101;
}
/* point two for third screen end */


/* point three for third screen */
#boreall{
    position: absolute;
    left: 793px;
    top: 121px;
    z-index: 103;
}
/* point three for third screen end */


/* point four for third screen */
#sparrow{
    position: absolute;
    left: 1099px;
    top: 692px;
    z-index: 103;
}

#sparrowbody{
    position: absolute;
    left: 1059px;
    top: 800px;
    z-index: 101;
}
/* point four for third screen end */


/* point five for third screen */
#migrating{
    position: absolute;
    left: 1456px;
    top: 187px;
    z-index: 103;
}

/* point five for third screen end */

/* button for third screen */
#migration{
    position: absolute;
    left: 1566px;
    top: 582px;
    z-index: 103;
}
/* button for third screen end*/


/* pop-up element  */
#pattern {
    position: absolute;
    left: 378px;
    top: 229px;
    z-index: 1003;
    display: none;
}

#cancel2{
    position: absolute;
    left: 643px;
    top: 678px;
    z-index: 1101;
    display: none;
}


/* pop up background */
#eventsitter2{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 900;
    background-color: rgba(101, 101, 101, 0.802);
    display: none;
    top: 0%;
}

/* pop-up element ends */