/* CSS */
* {margin: 0; padding: 0;}

/*z-index: utilize "bg" as 1, fuji as 2, then move forward*/ 

/*All divs*/
div {
    border: solid black 5px;
}


/*background and mtn/sun divs*/

/*sunset div being used as upper portion, substitute with a gradiant in the future?*/
div#sunset {
    background-color: lightblue;
    border: solid darkgoldenrod 5px;
    height: 1050px;
    width: 1900px;
    z-index: 1;
}

/*water div being used as lower portion, substitute with a gradiant in the future?*/
div#water {
    background-color: blue;
    border: darkblue groove 5px;
    height: 215px;
    width: 1900px;
    z-index: 1;
}

/*Fuji series of divs here are being used as a triangle. 
1 = Mountain itself.
2 = This is the 'border'/ background of it.
3 = Small snow cap on the mountain
*/

div#fuji {
    height: 0;
    width: 0;
    border-left: 670px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 277px solid chocolate;
    border-top: transparent;
    border-radius: 0px 0px 0px 0px;
    

    position: absolute;
    top: 685px;
    left: 80px;
    z-index: 2;
}


div#fuji2 {
    height: 0;
    width: 0;
    border-left: 670px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 277px solid black;
    border-top: transparent;
    border-radius: 0px 0px 0px 0px;
    

    position: absolute;
    top: 682px;
    left: 80px;
    z-index: 1;
}

div#fuji3 {
    height: 0;
    width: 0;
    border-left: 72px solid transparent;
    border-right: 55px solid transparent;
    border-bottom: 30px solid white;
    border-top: transparent;
    border-radius: 0px 0px 0px 0px;
    

    position: absolute;
    top: 685px;
    left: 677px;
    z-index: 5;
}


/*Another circle in addition to ferris wheel, being used as a sun*/
div#sun {
    height: 235px;
    width: 235px;
    background-color: gold;
    text-align: center;

    position: absolute;
    top: 50px;
    left: 50px;
    border-radius: 50%;
    z-index: 6;
}

/*Building divs/Detail divs from this point.
Details will be under the corresponding Building div.

***Refer to picture diagram for building letter designation***

*/
div#bldgA {
    height: 349px;
    width: 181px;
    background-color: gray;

    position: absolute;
    top: 701px;
    left: 1673px;
    border-radius: 0px 195px 0px 0px;
    z-index: 4;

}

div#detailA1 {
    height: 20px;
    width: 20px;
    background-color: lightcoral;
    text-align: center;

    position: absolute;
    top: 709px;
    left: 1680px;
    border-radius: 50%;
    z-index: 6;
}

div#bldgB {
    height: 224px;
    width: 152px;
    background-color: lightslategray;

    position: absolute;
    top: 800px;
    left: 1524px;

    z-index: 4;

}

div#bldgC {
    height: 272px;
    width: 152px;
    background-color: dimgray;

    position: absolute;
    top: 755px;
    left: 1378px;

    z-index: 4;

}
/*Detail*/
div#detailC1 {
    height: 27px;
    width: 124px;
    background-color: white;
    border-radius: 0px 50px 0px 0px;
    position: absolute;
    top: 730px;
    left: 1378px;
    transform: skewX(35deg);
    z-index: 3;
}

div#bldgD {
    height: 341px;
    width: 142px;
    background-color: lightslategray;

    position: absolute;
    top: 686px;
    left: 1245px;

    z-index: 4;

}
/*Detail*/
div#detailD1 {
    height: 27px;
    width: 124px;
    background-color: white;
    border-radius: 0px 50px 0px 0px;
    position: absolute;
    top: 660px;
    left: 1245px;
    transform: skewX(35deg);
    z-index: 3;
}

div#bldgE {
    height: 568px;
    width: 163px;
    background-color: lightslategray;

    position: absolute;
    top: 426px;
    left: 968px;
    
    z-index: 4;

}
/*Detail light bars for Building E*/
div#detailE1 {
    height: 180px;
    width: 15px;
    background-color: yellow;

    position: absolute;
    top: 427px;
    left: 1040px;

    z-index: 5;
}
/*Detail light bars for Building E*/
div#detailE2 {
    height: 180px;
    width: 6px;
    background-color: yellow;

    position: absolute;
    top: 427px;
    left: 965px;

    z-index: 5;
}
/*Detail light bars for Building E*/
div#detailE3 {
    height: 180px;
    width: 8px;
    background-color: yellow;

    position: absolute;
    top: 427px;
    left: 1122px;

    z-index: 5;
}

div#bldgF {
    height: 221px;
    width: 115px;
    background-color: lightslategray;

    position: absolute;
    top: 774px;
    left: 854px;

    z-index: 4;

}

div#bldgG {
    height: 158px;
    width: 234px;
    background-color: lightslategray;

    position: absolute;
    top: 849px;
    left: 454px;

    z-index: 4;

}

div#bldgG2 {
    height: 106px;
    width: 84px;
    background-color: darkgrey;

    position: absolute;
    top: 899px;
    left: 687px;
    border-radius: 34px 34px 0px 0px;
    z-index: 4;

}

div#bldgH {
    height: 181px;
    width: 92px;
    background-color: lightslategray;

    position: absolute;
    top: 827px;
    left: 100px;
    border-radius: 75px 25px 25px 25px;
    z-index: 4;

}

div#bldgI {
    height: 124px;
    width: 452px;
    background-color: tan;

    position: absolute;
    top: 929px;
    left: 80px;

    z-index: 5;

}

div#bldgJ {
    height: 100px;
    width: 559px;
    background-color: gray;

    position: absolute;
    top: 951px;
    left: 454px;

    z-index: 5;

}

div#bldgK {
    height: 62px;
    width: 350px;
    background-color: darkslategrey;

    position: absolute;
    top: 991px;
    left: 985px;

    z-index: 5;

}

div#bldgL {
    height: 84px;
    width: 350px;
    background-color: slateblue;

    position: absolute;
    top: 970px;
    left: 1311px;
    z-index: 5;

}

div#bldgM {
    height: 107px;
    width: 318px;
    background-color: gray;

    position: absolute;
    top: 948px;
    left: 1583px;
    border-top-left-radius: 35px;
    z-index: 5;

}

/*This is a circle, supposed to be used for a ferris wheel, need to figure a better way to add more lines*/
div#wheel {
    height: 235px;
    width: 235px;
    background-color: white;
    text-align: center;

    position: absolute;
    top: 777px;
    left: 1042px;
    border-radius: 50%;
    z-index: 6;
}

div#wheel:hover {
    transform: rotate(360deg);
    transition: 5000ms;
}