html {
    font-size: 100%; 
    transition: font-size 0.1s ease;
}

body {    
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #000, #191327, #2B2048);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.flex-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}

#taivas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(to bottom, #000, #191327, #2B2048);
}

.vuori {
    position: absolute;
    bottom: 12.5rem; /* 200px -> rem */
    width: 100%;
    height: 10.625rem; /* 170px -> rem */
    background: url('vuori.png') no-repeat;
    background-position: 320px 0;
    background-size: auto 100%; 
}

.tie {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 12.5rem; /* 200px -> rem */
    background: 
        url('kivet.png') repeat-x,  
        #3443B0 url('tie.png') repeat-x; 
    background-position: center bottom, center bottom; 
    background-size: auto 4.6875rem, auto 100%; /* 75px -> rem */
}

.homie {
    width: 38.25rem; /* 612px -> rem */
    height: 23.125rem; /* 370px -> rem */
    background: url('homie.png') no-repeat;
    background-size: contain; 
    background-position: bottom right;
}

.tähti {
    position: absolute;
    border-radius: 50%;
    background-color: white;
    opacity: 0.8;
    animation: twinkle 2s infinite alternate;
}