

.season-background {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: rgb(0, 0, 0);
    width: 100vw;
    height: 100vh;
    background-position: right;
    position: absolute;
    right:0px;
}


#poem {
    color: rgb(172, 216, 240);
    text-shadow: rgb(0, 60, 255) 1px 0 10px;
    
    text-align: center;
    line-height: 1em;
    font-size: xx-large;
    position: relative;

    background-size:cover;
    background-repeat: no-repeat;
    
    width: 63%;
    height:200px;
    min-height: 417px;
    padding-right: 10px;
    
    margin-top:10%;
	transform-origin: center right;
    transform: perspective(100px) rotateY(-10deg) rotateY(4deg) rotateX(0deg) translate(24%, -41px);

    overflow: auto;


    scrollbar-color: rgb(172, 216, 240) rgba(0, 60, 255, 0.116);
    scrollbar-width:auto;
}


#poem p {
    width:100%
}


#poem ::after {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: aqua;
}

.poem-spacer {
    padding-top: 200px;
    max-height: 10vh;
}

.manual {
    
    background-size:cover;
    background-repeat: no-repeat;
    height: 50vh;
    width: 100%;
    cursor: pointer;
    min-height: 540px;
    position: relative;
    
}

#door {

    background-image: url("assets/sample.png");
    filter: brightness(0);
    background-position: right;
    background-size:cover;
    position: absolute;
    background-repeat: no-repeat;
    height: 100vh;
    min-height: 1080px;
    min-width: 893px;

    right: 0px;
    padding: 0px;
    width: calc(100vh * 0.826851852);
    overflow: hidden;
}


@keyframes load-in {
    0% {filter: brightness(0%);}
    10% { filter: brightness(0%);}
    100% {filter: brightness(100%);}
    
  }

.schmorplorp {
    background-image: url("assets/schmorplorp.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.winter {
    background-image: url("assets/winter.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.spring {
    background-image: url("assets/spring.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.pollination {
    background-image: url("assets/pollination.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.fall {
    background-image: url("assets/fall.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.burning {
    background-image: url("assets/burning.png");
    filter: brightness(1);
    animation: load-in 1s;
}

.ash {
    background-image: url("assets/ash.png");
    filter: brightness(1);
    animation: load-in 1s;
}




.schmorplorp #door{
    background-image: url("assets/schmorplorp_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;
}

.winter #door {
    background-image: url("assets/winter_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;
}

.spring #door {
    background-image: url("assets/spring_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;
}

.pollination #door {
    background-image: url("assets/pollination_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;
    color: yellow  !important;
}

.fall #door {
    background-image: url("assets/fall_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;
}


.burning #door {
    background-image: url("assets/burning_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;

}

.ash #door {
    background-image: url("assets/ash_door.png");
    filter: brightness(1);
    animation: load-in 0.5s;

}


.schmorplorp #poem {
    color:rgb(56, 241, 0);
    text-shadow: rgb(221, 218, 11) 1px 0 50px;
}

.winter #poem {
    color:rgb(84, 248, 226);
    text-shadow: rgb(75, 37, 211) 1px 0 50px;
}

.spring #poem {
    color:rgb(117, 238, 106);
}

.pollination #poem {
    color:rgb(251, 255, 0);
    text-shadow: rgb(255, 51, 0) 1px 0 50px;
}

.fall #poem {
    text-shadow: rgb(0, 38, 255) 1px 0 50px;
}


.burning #poem {
    color:rgb(255, 206, 206);
    text-shadow: rgb(0, 0, 0) 1px 0 50px;

}

.ash #poem {
    color:rgb(255, 255, 255);
    text-shadow: rgb(255, 98, 59) 1px 0 50px;

}
