html { overflow-x: hidden; overflow-y: hidden; }    

.body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: linear-gradient(rgb(27, 39, 210), rgb(148, 225, 255));
}

.islandcontainer {
    position: absolute;
    top: 25%;
    left: 35%;
    transform: translateX(-50%) translateY(-50%);
}

@keyframes islandwobble {
    0% {top: 300px;}
    50% {top: 200px;}
    100% {top: 300px;}
}

/* ################################################ UPPER ISLAND ####################################### */

.islanduppercontainer{
    position: absolute;
}

.islandupper-1 {
    position: absolute;
    background-color: rgb(0, 136, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(10% 27%, 0% 35%, 21% 41%);
}

.islandupper-2 {
    position: absolute;
    background-color: rgb(0, 188, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(23% 21%, 10% 27%, 21% 41%);
}

.islandupper-3 {
    position: absolute;
    background-color: rgb(0, 125, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(41% 20%, 23% 21%, 21% 41%);
}

.islandupper-4 {
    position: absolute;
    background-color: rgb(0, 155, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 41% 20%, 21% 41%);
}

.islandupper-5 {
    position: absolute;
    background-color: rgb(0, 167, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 79% 43%, 41% 20%);
}

.islandupper-6 {
    position: absolute;
    background-color: rgb(0, 203, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(79% 43%, 64% 13%, 41% 20%);
}

.islandupper-7 {
    position: absolute;
    background-color: rgb(0, 129, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(79% 43%, 81% 20%, 64% 13%);
}

.islandupper-8 {
    position: absolute;
    background-color: rgb(0, 163, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(79% 43%, 100% 35%, 81% 20%);
}

/* ################################################ LOWER ISLAND ####################################### */

.islandundercontainer{
    position: absolute;
}

.islandunder-1 {
    position: absolute;

    background-color: rgb(185, 58, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(11% 61%, 0% 35%, 21% 41%); 
}

.islandunder-2 {
    position: absolute;

    background-color: rgb(116, 37, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(31% 85%, 11% 61%, 21% 41%);
}

.islandunder-3 {
    position: absolute;

    background-color: rgb(134, 42, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 31% 85%, 21% 41%);
}

.islandunder-4 {
    position: absolute;

    background-color: rgb(102, 32, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 64% 80%, 31% 85%);
}

.islandunder-5 {
    position: absolute;

    background-color: rgb(82, 26, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(64% 80%, 50% 100%, 31% 85%);
}

.islandunder-6 {
    position: absolute;

    background-color: rgb(125, 39, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 85% 64%, 64% 80%);
}

.islandunder-7 {
    position: absolute;

    background-color: rgb(183, 58, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(50% 48%, 79% 43%, 85% 64%);
}

.islandunder-8 {
    position: absolute;

    background-color: rgb(152, 48, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(79% 43%, 100% 35%, 85% 64%);
}

/* ################################################ MOUNTAIN ####################################### */

.mountaincontainer {
    position: absolute;
}

.mountainhalf-1 {
    position: absolute;

    background-color: rgb(58, 58, 58);
    width: 500px;
    height: 500px;
    clip-path: polygon(43% 35%, 49.68% 15.09%, 49.68% 35%);
}

.mountainhalf-2 {
    position: absolute;

    background-color: rgb(154, 154, 154);
    width: 500px;
    height: 500px;
    clip-path: polygon(49.68% 15.09%, 56.37% 35%, 49.68% 35%);
}

/* ################################################ TREE ####################################### */

.treecontainer {
    position: absolute;
}

.treehalf-1 {
    position: absolute;

    background-color: rgb(3, 100, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(48.25% 14.25%, 51.75% 26.41%, 48.25% 26.41%);
}

.treehalf-2 {
    position: absolute;

    background-color: rgb(8, 81, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(48.25% 14.25%, 48.25% 26.41%, 44.75% 26.41%);
}

.treetrunk {
    position: absolute;
    left: 10px;
    top: -25px;
    background-color: rgb(81, 31, 0);
    width: 500px;
    height: 500px;
    clip-path: polygon(47.75% 35.1%, 47.75% 26.41%, 44.75% 26.41%, 44.75% 35.1%);
}

/* ################################################# CLOUD ########################################## */


.cloud {
    position: absolute;

    background-color: rgb(255, 255, 255);
    width: 500px;
    height: 500px;
    clip-path: polygon(70.45% 70.71%, 95.5% 70.71%, 93.47% 51.81%, 82.87% 42.94%, 69.25% 45.29%, 55.28% 37.2%, 39.13% 37.2%, 24.68% 49.57%, 13.12% 48.54%, 4.65% 56.48%, 0% 70.71%, 24.68% 70.71%, 47.57% 70.71%);
}

@keyframes cloudhorizontal {
    0% {transform: scale(0.35, 0.35) translateX(-5000px);}
    100% {transform: scale(0.35, 0.35) translateX(5000px);}
}

/* ################################################ SKYBOX ########################################### */

.skycontainer {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.suncontainer {
    position: absolute;
    top: 600px;
    left: 700px;
}

.sun-1 {
    position: relative;
    background-color: yellow;
    width: 125px;
    height: 125px;
    clip-path: polygon(50% 1.25%, 9.9% 20.56%, 0% 63.95%, 27.75% 98.75%, 72.25% 98.75%, 100% 63.95%, 90.1% 20.56%);
}

.sun-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: white;
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 1.25%, 9.9% 20.56%, 0% 63.95%, 27.75% 98.75%, 72.25% 98.75%, 100% 63.95%, 90.1% 20.56%);
}

.mooncontainer {
    rotate: 180deg;
    position: absolute;
    bottom: 600px;
    right: 700px;
}

.moon-1 {
    position: relative;
    background-color: rgb(194, 238, 255);
    width: 125px;
    height: 125px;
    clip-path: polygon(50% 1.25%, 9.9% 20.56%, 0% 63.95%, 27.75% 98.75%, 72.25% 98.75%, 100% 63.95%, 90.1% 20.56%);
}

.moon-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: white;
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 1.25%, 9.9% 20.56%, 0% 63.95%, 27.75% 98.75%, 72.25% 98.75%, 100% 63.95%, 90.1% 20.56%);
}

.skybox {
    background-color: black;
    border-radius: 50%;
    width: 2800px;
    height: 2800px;
    background: linear-gradient(0deg, rgba(0,0,17,1) 38%, rgba(224,94,0,1) 46%, rgba(222,62,30,1) 49%, rgba(255,255,255,1) 50%, rgba(134,221,248,1) 51%, rgba(148,225,255,1) 70%, rgba(27,39,210,1) 90%);
}

.skybutton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 125px;
    height: 125px;
    background: transparent;
    border: none !important;
    font-size:0;

}

@keyframes skyturnnight {
    0% {rotate: 0deg;}
    100% {rotate: 180deg;}
}

@keyframes skyturnday {
    0% {rotate: 180deg;}
    100% {rotate: 360deg;}
}