svg#landscape {
    z-index: -1;
    max-height: 100vh;
}

svg#landscape rect#sky {
    fill-opacity: .6;
    fill: url(#skyGradient);
}
#skyGradient .stop1{
    stop-color: #577bcf;
}
#skyGradient .stop2{
    stop-color: #2a3592;
}
svg#landscape g#sun{
    transform: translateX(191px) translateY(259px) scale(1);
}
svg#landscape g#sun image#sunPath{
    transition: transform 1s ease-out;
    -webkit-transition: transform 1s ease-out;
}
.loading svg#landscape g#sun image#sunPath{
    transform: translate(0, 0);
}

svg path.trunk {
    fill: #4e270a;
}

svg path.leaves {
    fill: url('#treeGradient');
}
#treeGradient .stop2{
    stop-color: #24A148;
}
#treeGradient .stop1{
    stop-color: #0db43d;
}
#hill{
    transform: translate(0px, 270px);
    stroke: #000000;
    stroke-width: 2;
}
#hill rect {
    fill: url('#hillGradient');
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    stroke: #000000;
    stroke-width: 2;
}
#hillGradient .stop{
    transition: stop-color .5s ease-in-out;
}
.spring #hillGradient .stop2{
    stop-color: #a0f49c;
}
.spring #hillGradient .stop1{
    stop-color: #ccf5ca;
}
.fall #hillGradient .stop2{
    stop-color: #ffec96;
}
.fall #hillGradient .stop1{
    stop-color: #ccf5ca;
}
#dusk{
    height: calc(var(--height) * 1px);
    width: calc(var(--width) * 1px);
    fill: #002f5b;
    mix-blend-mode: multiply;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}
.loaded #dusk{
    opacity: 0;
}

body {
    background: #ececff;
    color: #4e270a;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    margin: 0px;
}

#container{
    aspect-ratio: var(--width, 5)/var(--height(4));
    max-height: 100vh;
    margin: 0 auto;
}

#energy-card {
    background: rgba(255,255,255,0.7);
    padding: 0.5rem;
    bottom: 3.5rem;
    position: relative;
    text-align: right;
    float: right;
    border-top-left-radius: 0.5rem;
}

.spring #to-spring {
    display: none;
}
.fall #to-fall {
    display: none;
}
#season-change{
    position: absolute;
    right: 0;
}
.leaves{
    transition: stroke .5s ease-in-out;
}
.fall .deciduous.leaves{
    stroke: red;
}

.cloud{
    fill: whitesmoke;
    opacity: 0.8;
}

.cloud.loading{
    animation: cloudLoader 30s linear;
}

@keyframes cloudLoader {
    0% {transform: translateX(200px)}
    100% { transform: translateX(1200px)}
}