.island {
    position: absolute;
    z-index: -10;
}

.island .grass {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,  #09540b 0%, #228b22 100%);
    border-radius: 50%;
    z-index: 10;
}

    .sunset .island .grass {
        background: linear-gradient(to bottom,  #544f09 0%,#228b22 100%);
    }

    .night .island .grass {
        background: linear-gradient(to bottom,  #021814 0%, #0e3119 100%);
    }

.island .kliff {
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 5;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 0 none;
    border-top: 1px solid #8B4513;
}

    .island .kliff.n1 {
        left: 8%;
        width: 84%;
        border-top-color: #773b0f;
    }

    .island .kliff.n2 {
        left: 16%;
        width: 68%;
        border-top-color: #662e0d;
    }

    .island .kliff.n3 {
        left: 24%;
        width: 52%;
        border-top-color: #551f0b;
    }

    .island .kliff.n4 {
        left: 32%;
        width: 36%;
        border-top-color: #441708;
    }

.night .island .kliff {
    border-top-color: #3e1f0c;
}
    .night .island .kliff.n1 {
        border-top-color: #35210a;
    }
    .night .island .kliff.n2 {
        border-top-color: #2c1908;
    }
    .night .island .kliff.n3 {
        border-top-color: #231206;
    }
    .night .island .kliff.n4 {
        border-top-color: #1a0b04;
    }

.island .pond {
    position: absolute;
    background: radial-gradient(ellipse at 50% 100%,  #055154 0%, #5cacf2 100%);
    border-radius: 50%;
    border: 1px solid #b39b4f;
    border-top-width: 0px;
    border-bottom-width: 0px;
    z-index: 15;
}
    .sunset .island .pond {
        background: radial-gradient(ellipse at 50% 100%,  #055154 0%, #5c77f2 100%);
    }
    .night .island .pond {
        background: radial-gradient(ellipse at 50% 100%,  #012f30 0%, #003f5c 100%);
        border-color: #44434a;
    }

.island .pond .lilypad {
    position: absolute;
    background: radial-gradient(ellipse at 50% 100%,  #0b610b 0%, #27ae60 100%);
    border-radius: 50%;
}

.night .island .pond .lilypad {
    background: radial-gradient(ellipse at 50% 100%,  #044204 0%, #0e5e2e 100%);
}

.island .pond .lilypad.flower::before {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 30%;
    width: 40%;
    height: 120%;
    background: radial-gradient(ellipse at 50% 100%,  #ffb6c1 0%, #ff69b4 100%);
    border-radius: 50%;
}

.night .island .pond .lilypad.flower::before {
    background: radial-gradient(ellipse at 50% 100%,  #ffdac5 0%, #ffa184 100%);
    box-shadow: 0 0 10px 2px #ffa184;
    /* box-shadow radius animation to make it flicker fast like a candle*/
    animation: flowerGlow 1s infinite alternate;
}
@keyframes flowerGlow {
    0% {
        box-shadow: 0 0 5px 1px #ffa184;
    }
    100% {
        box-shadow: 0 0 15px 3px #ffa184;
    }
}

.island .tree {
    position: absolute;
    bottom: 50%;
    z-index: 20;
}
    .island .tree .stem {
        position: absolute;
        background: linear-gradient(to right,  #74390f 0%, #421f06 100%);
    }

    .island .tree .leaf {
        position: absolute;
        background: linear-gradient(to bottom,  #004700 0%, #006400 100%);
    }


.night .island .tree .stem {
    background: linear-gradient(to right,  #2c1505 0%, #250213 100%);
}

.night .island .tree .leaf {
    background: linear-gradient(to bottom,  #002325 0%, #002c1c 100%);
}