html, body {
    margin:0px;
    padding:0px; 
    height:100vh;
    width:100%;
    min-width:630px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height:170%;
    font-size:110%;
    position:relative;
}
body {
    background-attachment:fixed !important;
    background: linear-gradient(90deg,rgba(138, 160, 217, 1) 0%, rgba(249, 227, 188, 1) 55%, rgba(254, 248, 250, 1) 100%);
}
p {
    margin-bottom:30px;
}
h2 {
    clear:both;
}

.endNav  {
    clear:both;
    margin-top:10px;
}
.navButton.next {
    float:right;
}
.navButton.prev {
    float:left;
}
.navButton {
	background-color:#1d4a35;
	border-radius:17px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:16px 31px;
	text-decoration:none;
}
h1 {
    line-height:100%;
}
h1 span {
    font-size:200%;
    display:block;
    width:auto;
    color:#1d4a35;
    margin-bottom:20px;
    margin-left:-250px;
    line-height:100%;
}
h1:has(> span) {
    padding-left:250px;
    margin-left:20px;
    width:auto;
}
.navButton:hover {
	background-color:#5cbf2a;
}
.navButton:active {
	position:relative;
	top:1px;
}
.section {
    display:block;
    position: absolute;
    width: 100%;
    min-width:630px;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

.clear {
    position: relative;
    clear: both;
    display: block;
    height:1px;
}
.section img {
    width:100%;
}
.full-width {
    background-size: 950px;
    background-position: bottom center;
    width: 100%;
    position: absolute;
}
.logo {
    padding: 30px 30px 0px 30px;
    width:200px;
    position: absolute;
    top: 0px; 
    left: 80px;
}
.logo,
.alogo {
    z-index:999999;
}
.logo img,
.alogo img {
    width: 100%;
}

.alogo {
    padding: 0px;
    width:250px;
    position: absolute;
    top: 30px; 
    right: 40px;
}
.header {
    margin:120px auto 0px auto;
    width:80%;
    padding:20px;
    max-width:1500px;
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.6),
        1px -1px 0 rgba(255,255,255,0.6),
        -1px 1px 0 rgba(255,255,255,0.6),
        1px 1px 0 rgba(255,255,255,0.6),
        -2px 0px 0 rgba(255,255,255,0.6),
        2px 0px 0 rgba(255,255,255,0.6),
        0px -2px 0 rgba(255,255,255,0.6),
        0px 2px 0 rgba(255,255,255,0.6);
}
body.index .header {
    background-image:url(images/train.png);
    background-repeat:no-repeat;
    background-size:auto 100%;
    background-position:right;
}
@media screen and (max-width: 1500px) {
body.index .header {
    background-size:auto 60%;
}
}
.content {
    background-color: rgba(255, 255, 255, 0.85);
    padding:20px;
    z-index: 0;
    border-radius: 10px;
    width:80%;
    margin:0px auto 400px auto;
    max-width:1500px;
}
.content .pullquote,
.content .image {
    position:relative;
    padding:3%;
    width:43%;
    border-radius:15px;
    background-color:rgba(255,255,255,0.85);
    margin-bottom:2%;
    border:1px solid #ccc;
    color:#1d4a35;
}
.content .yt_button {
    width:380px;
    cursor: pointer;
    font-size:0.8em;
    line-height:1em;
}

.content .yt_button .yt_title {
    font-weight:bold;
}
.content .yt_button h4 {
    font-size:1.5em;
    margin:5px 0px;
    padding:0px;
}
.content .yt_button img {
    float:left;
    width:100px;
    margin-right:15px;
}
.yt_embed .close {
    cursor: pointer;
    position:absolute;
    top:15px;
    right:15px;
    margin-bottom:-30px;
    font-size:30px;
}
.content .yt_embed {
    aspect-ratio: 20 / 13.3;
    border:1px solid #CCC;
    border-radius:15px;
    padding:55px;
    overflow:hidden;
}
@media (orientation: portrait) {
    .content .yt_embed {
        width:80vw;
    }
}
@media (orientation: landscape) {
    .content .yt_embed {
        height:60vh;
    }
}
.content .yt_embed::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}
.content .yt_embed iframe {
    aspect-ratio: 20 / 13.3;
}


.content .yt_button.left{
    float:left;
    margin-right:25px;
}

.content .yt_button.right{
    float:right;
    margin-left:25px;
}
.content .pullquote {
    font-size:125%;
    line-height:100%;
}
@media screen and (min-width: 1600px) {
    .content .pullquote {
        font-size:180%;
        line-height:160%;
    }
}

@media screen and (max-width: 800px) {
    body.index .header {
        background-size:auto 40%;
        background-position:100% 25%;
    }
    .content .image.slider,
    .content .image.left,
    .content .image.right,
    .content .image.right.narrow {
        width:110%;
    }
    .navButton {
        width:calc(100% - 62px);
        margin:10px 0px;
    }
}
.content .pullquote.left,
.content .image.left {
    float:left;
    margin-right:-6%;
    left:-8%;
}
.content .pullquote.right,
.content .image.right {
    float:right;
    margin-left:-6%;
    right:-8%;
    text-align:left;
}
.content .image.narrow {
    width:35%;
}
.content .image.canva {
    aspect-ratio: 1;
}
.content .image.chart {
    min-width:435px;
}
.section .cloud {
    width:700px;
    position: fixed;
    z-index: -100;
    top: 250px; 
}

.section .cloud:nth-child(2) {
    position: fixed;
    top: -130px;
    right: 100px;
}
.section .cloud:nth-child(3) {
    width:600px;
    position: fixed;
    left:300px;
    top: 50px;
}
.section .cloud:nth-child(4) {
    width:900px;
    position: fixed;
    right: 0px;
    top: 0px;
}
.section .sun {
    width:150px;
    height:1000px;
    position: fixed;
    z-index: -200;
    top: 90px; 
    right: 100px;
}

/* Section 1 Specific Styles */
#section1 .mountain {
    position: fixed;
    background-image: url(images/mountainsl.svg);
    background-repeat:repeat-x;
    background-size: 1500px;
    height: 225px;
    z-index: -5;
    bottom: 150px;
}


#section1 .trees {
    background-image: url(images/treesl.svg);
    background-size: 3300px;
    background-repeat: repeat-x;
    height: 520px;
    position: fixed;
    z-index: -3;
    bottom: -140px;
}

#section1 .hill-road {
    background-image: url(images/roadl.svg);
    background-size: 1600px;
    background-repeat: repeat-x;
    position: fixed;
    height: 230px;
    z-index: 1000;
    bottom: -10px;
}

#section1 .sign {
    width:170px;
    position: fixed;
    z-index: 1010;
    bottom: 20px; 
    right: 20px;
}

#section1 .car {
    width:250px;
    position: fixed;
    z-index: 1002;
    bottom: 65px; 
    left: -260px;
}
#section1 .grass {
    background-image: url(images/flowersl.svg);
    background-size: 2000px;
    background-repeat: repeat-x;
    position:fixed;
    height: 150px;
    z-index: 1005;
    bottom: -35px;
}

#section3 .bird {
    width:100px;
    height:1005px;
    position: fixed;
    z-index: -10;
    top: 550px; 
    left: -100px;
}

#section2 .mountainI {
    position: fixed;
    background-image: url(images/mountaini.svg);
    background-size: 1500px;
    background-repeat: repeat-x;
    height: 420px;
    z-index: -10;
    bottom: -50px;
}
#section2 .gravel {
    position: fixed;
    background-image: url(images/gravel.svg);
    background-repeat: repeat-x;
    background-size: 1000px;
    height: 70px;
    z-index: 990;
    bottom: 20px;
}
#section2 .trainl {
    position:fixed;
    width:450px;
    z-index:999;
    bottom:25px;
    right:-460px;
}
#section2 .bridge {
    width:400px;
    position: fixed;
    z-index: 1000;
    bottom: 0px; 
    left: 100px;
}

#section2 .dirt {
    position: fixed;
    background-image: url(images/dirti.svg);
    background-repeat: repeat-x;
    background-size: 2000px;
    height: 180px;
    z-index: 1010;
    bottom:-100px;
}

#section3 .trees {
    position: fixed;
    background-image: url(images/treesb.svg);
    background-repeat: repeat-x;
    background-size: 1200px;
    height: 350px;
    z-index: -5;
    bottom: -80px;
}
#section3 .playground {
    width: 500px;
    position: fixed;
    z-index: -4;
    bottom: -10px; 
    left:180px;
}
#section3 .signB {
    width: 900px;
    position: fixed;
    z-index: -4;
    bottom: 90px; 
    right:-250px;
}
#section3 .flowersB {
    position: fixed;
    background-image: url(images/flowersb.svg);
    background-size: 1100px;
    height: 140px;
    z-index: 5;
    bottom: -35px;
}

#section4 .treesC {
    position: fixed;
    background-image: url(images/treesc.svg);
    background-size: 1500px;
    height: 450px;
    z-index: -30;
    bottom: -80px;
    background-position:bottom right;
    background-repeat: no-repeat;
}
#section4 .tower{
    width:350px;
    position: fixed;
    z-index: -4;
    bottom:-150px; 
    left: -80px;
}
#section4 .library {
    width:1000px;
    position: fixed;
    z-index: -20;
    bottom:-80px; 
    left: 200px;
}
#section4 .mountainI {
    position: fixed;
    background-image: url(images/mountaini.svg);
    background-size: 1500px;
    background-repeat: repeat-x;
    height: 420px;
    z-index: -50;
    bottom: -50px;
}