* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow: hidden;
}

.maisema {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh;
}

.duner {
	padding:0px;
	position: absolute;
	left: 50%; 
	transform: translateX(-50%); 
	z-index: 10;
	bottom: -10px;
}


.duner img { width: 240px; height: auto; animation: kavely 1s infinite ease-in-out; }

@keyframes kavely {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
}



.taivas {
    background-color: #FFDBAA; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.aurinko {
    background-color: #FFF4E6;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.maisema.aamu .taivas { background-color: #FFDBAA; }
.maisema.aamu .aurinko { background-color: #FFF4E6; }
.maisema.aamu .t5 { background-color: #FABC43; }
.maisema.aamu .t4 { background-color: #F6A41D; }
.maisema.aamu .t3 { background-color: #C98D2D; }
.maisema.aamu .t2 { background-color: #A86D27; }
.maisema.aamu .t1 { background-color: #885015; }

.maisema.paiva .taivas { background-color: #FFC83F; }
.maisema.paiva .aurinko { background-color: #FFE88E; }
.maisema.paiva .t5 { background-color: #F95C2F; }
.maisema.paiva .t4 { background-color: #D73520; }
.maisema.paiva .t3 { background-color: #B2191C; }
.maisema.paiva .t2 { background-color: #87161A; }
.maisema.paiva .t1 { background-color: #400605; }

.maisema.yo .taivas { background-color: #9CCEFF; }
.maisema.yo .aurinko { background-color: #C2E6FF; }
.maisema.yo .t5 { background-color: #70A5F3; }
.maisema.yo .t4 { background-color: #3F67BF; }
.maisema.yo .t3 { background-color: #374DA0; }
.maisema.yo .t2 { background-color: #2D377E; }
.maisema.yo .t1 { background-color: #18235B; }


.t5, .t4, .t3, .t2, .t1 {
    position: absolute;
    bottom: 0;
    width: 1920px; 
    height: 500px;
    background-repeat: repeat-x;
    margin: 0;
}


.t5 {
    bottom: 25%;
    background-color: #FABC43;
    animation: animatedBackground5 60s linear infinite;
clip-path: polygon(0% 41.91%, 7.55% 29.93%, 10.91% 30.37%, 15.36% 41.91%, 20.53% 47.56%, 24.58% 60.95%, 29.88% 63.73%, 33.62% 50.22%, 40.28% 46.27%, 44.66% 50.91%, 48.56% 50.69%, 53.41% 57.62%, 59.76% 49.29%, 67.24% 22.27%, 70.36% 16.25%, 73.02% 18.14%, 74.79% 29.07%, 77.65% 34.23%, 80.29% 32.01%, 82.42% 17.72%, 85.62% 15.37%, 87.42% 7.85%, 89.74% 0%, 93.79% 0%, 100% 41.91%, 100% 100%, 0% 100%);
    animation: animatedBackground5 160s linear infinite;
    z-index: 2;
}

.t4 {
    bottom: 15%;
    background-color: #F6A41D;
clip-path: polygon(0% 54.89%, 3.65% 49.56%, 4.65% 38.54%, 6.62% 38.64%, 9.53% 51.43%, 12.4% 58.42%, 16.39% 65.98%, 20.62% 77.86%, 25.24% 72.56%, 28.71% 67.11%, 32.19% 67.88%, 35.22% 74.46%, 48.72% 67.94%, 62.12% 76.82%, 67.21% 67.88%, 70.44% 62.19%, 72.87% 57.67%, 75.42% 49.45%, 78.2% 42.35%, 81.16% 39.23%, 82.98% 34.35%, 84.46% 31.89%, 86.53% 28.2%, 88.96% 29.33%, 100% 54.89%, 100% 100%, 0% 100%);
    animation: animatedBackground4 110s linear infinite;
    z-index: 3;
}

.t3 {
    bottom: 0;
    background-color: #C98D2D;
clip-path: polygon(0% 60%, 25% 45%, 50% 55%, 75% 50%, 74.86% 40.12%, 73.78% 40.12%, 73.78% 30.63%, 74.28% 31.95%, 74.25% 38.06%, 74.86% 38.11%, 74.89% 33.55%, 75.27% 33.59%, 75.24% 38.9%, 76.05% 38.98%, 76.1% 31.51%, 76.76% 31.57%, 76.62% 41.26%, 75.61% 41.05%, 75.48% 50.95%, 100% 60%, 100% 100%, 0% 100%);
    animation: animatedBackground3 80s linear infinite;
    z-index: 4;
}

.t2 {
    bottom: 0;
    background-color: #A86D27;
clip-path: polygon(0% 75%, 20% 55%, 28.79% 57.2%, 28.79% 58.28%, 28.79% 46.21%, 27.49% 45.69%, 27.49% 28.94%, 28.27% 29.26%, 28.14% 43.07%, 28.79% 43.16%, 28.9% 31.21%, 29.51% 31.29%, 29.38% 44.32%, 30% 44.41%, 30.14% 29.33%, 30.77% 29.42%, 30.61% 46.95%, 29.29% 46.76%, 29.19% 57.2%, 50% 65%, 80% 50%, 100% 75%, 100% 100%, 0% 100%);
    animation: animatedBackground2 50s linear infinite;
    z-index: 5;
}

.t1 {
    bottom: 0;
    background-color: #885015;
clip-path: polygon(0% 80%, 12.49% 94.62%, 26.32% 89.51%, 25.83% 87.04%, 25.32% 84.23%, 26.74% 89.04%, 26.9% 87.74%, 26.74% 85.06%, 27.42% 88.44%, 27.39% 85.95%, 27.26% 83.46%, 27.94% 88.66%, 31.66% 88.55%, 33.62% 86.89%, 51.36% 91.77%, 63.32% 77.49%, 65.57% 78.24%, 65.37% 65.96%, 63.21% 63.35%, 63.06% 57.18%, 62.84% 48.32%, 62.18% 7.74%, 63.06% 7.98%, 64.21% 61.57%, 65.11% 61.16%, 64.06% 12.61%, 65% 12.26%, 65.89% 54.05%, 65.77% 59.67%, 67.01% 58.98%, 65.77% 7.19%, 66.72% 7.74%, 67.59% 64.77%, 66.04% 65.17%, 66.28% 78.69%, 74.92% 69.72%, 89.91% 79.68%, 100% 79.68%, 100% 100%, 0% 100%);
    animation: animatedBackground1 30s linear infinite;
    z-index: 6;
}

@keyframes animatedBackground5 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1920px); }
}

@keyframes animatedBackground4 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1920px); }
}

@keyframes animatedBackground3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1920px); }
}

@keyframes animatedBackground2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1920px); }
}

@keyframes animatedBackground1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1920px); }
}