/* --- Import Fonts --- */

/* --- Variables ---*/
:root {
    --numScenes: 5;

    --viewport-height: 100vh;
    --viewport-width: 100vw;
    --standard-height: 1080px;
    --standard-width: 1920px;

    --modified-width: calc(var(--standard-width) - 0.6 * (var(--standard-width) - var(--viewport-width)));
    --modified-height: calc(1080 / 1920 * var(--modified-width));
}

/* --- General Style --- */

* { 
    margin: 0;
    padding: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Background --- */
body {
    background-color: rgba(153, 225, 220, 0.945);
}

/* --- Random --- */
.scroll-element {
    width: 100%;
    height: 20000px;
}

/* --- Scene 1 --- */
/* Hills & Farm & Clouds */
.s1-bulk {
    position: fixed;
    width: var(--modified-width);
    height: var(--modified-height);
}

.s1-bulk img {
    position: absolute;
    width: 100%;
    height: auto;
    left: calc(-0.2 * (var(--standard-width) - var(--viewport-width))); /* Centres Horizontally */
    top: calc(var(--viewport-height) - var(--modified-height)); /* Positions at the Bottom of the Screen */
}

/* Clouds */
.s1-c1 {
    transform: translateX(-30vw);
}

.s1-c2 {
    transform: translateX(20vw);
}

/* Sign */
.s1-sign {
    position: fixed;
    width: 100%;
    height: auto;
}

.s1-sign img {
    width: calc(0.15 * (var(--viewport-height) + var(--viewport-width)));
    height: auto;
    position: absolute;
    top: calc(var(--viewport-height) - 0.12 * (var(--viewport-height) + var(--viewport-width)));
    right: 4vw;
    transform: rotate(6.5deg);
}

/* --- Scene 2 --- */
/* Notes : 
    The Hills Will Remain in the Same Place
*/

/* Clouds */
.s2-clouds {
    position: fixed;
    width: var(--modified-width);
    height: var(--modified-height);
    z-index: 3;
}

.s2-clouds img {
    position: absolute;
    width: 100%;
    height: auto;
    left: calc(-0.2 * (var(--standard-width) - var(--viewport-width))); /* Centres Horizontally */
    top: -70vh; /* Positions Above the Screen */
}

/* Rain */
.s2-rain {
    position: fixed;
    width: 100%;
    height: 100vh;
}

.rain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.rain.back-row {
    display: none;
    z-index: 1;
    bottom: 60px;
    opacity: 0.5;
}

.drop {
    position: absolute;
    bottom: 100%;
    width: 30px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}

@keyframes drop {
    0% {
    transform: translateY(0vh);
    }
    75% {
    transform: translateY(90vh);
    }
    100% {
    transform: translateY(90vh);
    }
}

.stem {
    width: 3px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
    animation: stem 0.5s linear infinite;
}

@keyframes stem {
    0% {
    opacity: 1;
    }
    65% {
    opacity: 1;
    }
    75% {
    opacity: 0;
    }
    100% {
    opacity: 0;
    }
}

/* Newspaper */
.newspaper {
    width: 5vh;
    height: auto;
    position: fixed;
    z-index: 4;
}

.newspaper img {
    position: absolute;
    width: 100%;
    height: auto;
    left: -100%;
    top: 60vh;
}

/* --- Scene 3 & 4 --- */
@media (max-aspect-ratio: 1920 / 1080) {
    .s3-farm, .s4-farm {
        position: fixed;
        height: 100vh;
        width: auto;
        z-index: 2;
    }

    .s3-farm img, .s4-farm img {
        position: absolute;
        height: 100vh;
        width: auto;
        margin: auto;
        opacity: 0;
    }
}

@media (min-aspect-ratio: 1920 / 1080) {
    .s3-farm, .s4-farm {
        position: fixed;
        width: 100%;
        height: auto;
        z-index: 2;
    }

    .s3-farm img, .s4-farm img {
        position: absolute;
        width: 100%;
        height: auto;
        margin: auto;
        opacity: 0;
    }
}



.s5-bulk {
    position: fixed;
    width: var(--modified-width);
    height: var(--modified-height);
    z-index: 1;
}

.s5-bulk img {
    position: absolute;
    width: 100%;
    height: auto;
    left: calc(-0.2 * (var(--standard-width) - var(--viewport-width))); /* Centres Horizontally */
    top: calc(var(--viewport-height) - var(--modified-height)); /* Positions at the Bottom of the Screen */
    opacity: 0;
}

.home-footer {
    position: fixed;
    height: 102vh;
    width: 100%;
    z-index: 3;
}

.home-footer-background {
    width: 100%;
    background-color: #1b1b38;
    transform: translateY(100vh);
}