/* ---- General ---- */

body {
    min-height: 11500px;
    max-height: 11500px;

    background-color: #00282e;

    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
}

.forest-background,
.lake-background,
.city-background,
.info-box,
.detail,
#ocean-background,
#foreground {
    white-space: nowrap;
    position: fixed;
}

.forest-background > div,
.lake-background > div,
.city-background > div,
.info-box > div,
.info-box > img,
.detail > div,
#ocean-background > div,
#foreground > div {
    overflow-x: hidden;
    position: relative;
    bottom: 0px;
    display: inline-block;
    float: bottom;
}


/* ---- Platforms ---- */

.grass {
    width: calc(100% - 256px);
    height: 100%;
    top: 0px;
    margin-left: 128px;
    background-image: url(../images/platform/grass.png);
}

.dirt {
    width: calc(100% - 256px);
    margin-left: 128px;
    background-image: url(../images/platform/dirt.png);
}

.grass-background {
    width: calc(100%);
    height: 128px;
    background-image: url(../images/platform/grass-background.png);
}

.dirt-background {
    width: calc(100%);
    background-image: url(../images/platform/dirt-background.png);
}

.cliff-tall {
    width: calc(100%);
    height: 384px;
}

.cliff-short {
    width: calc(100%);
    height: 256px;
}

.island {
    width: 256px;
    height: 142px;
    background-image: url(../images/platform/floating-island.png);
}

#cliff-right {
    width: calc(100%);
    background-image: url(../images/platform/grass-cliff-right.png);
}

#cliff-left {
    width: calc(100%);
    background-image: url(../images/platform/grass-cliff-left.png);
}

#grass-cliff-1 {
    z-index: 2;
    width: 128px;
    height: 384px;
}

#grass-cliff-2 {
    z-index: 2;
    width: 128px;
    height: 256px;
}

#grass-cliff-3 {
    z-index: 2;
    width: 128px;
    height: 256px;
}

#grass-floor-1 {
    width: 512px;
    height: 384px;

    z-index: 1;
}

#dirt-1 {
    height: 256px;
}

#grass-floor-2 {
    width: 758px;
    height: 256px;
}

#dirt-2 {
    height: 128px;
}

#grass-floor-3 {
    width: 2048px;
    height: 128px;
}

#dirt-3 {
    height: 0px;
}

#grass-floor-4 {
    width: 1024px;
    height: 256px;
}

#dirt-4 {
    height: 128px;
}

#grass-floor-5 {
    width: 8960px;
    height: 128px;
}

#dirt-5 {
    height: 0px;
}


/* ---- Backgrounds ---- */

.forest-div {
    width: 3000px;
    height: 1216px;
}

.lake-div {
    width: 8000px;
    height: 1216px;
}

.city-div {
    width: 3240px;
    height: 1088px;
}

.forest {
    width: calc(100%);
    height: 1216px;
}

.lake {
    width: calc(100%);
    height: 1216px;
}

.city {
    width: calc(100%);
    height: 1088px;
}

/* Forest */

#forest-layer-1 {
    background-image: url(../images/background/forest/forest-background-layer-1.png);
}

#forest-layer-2 {
    background-image: url(../images/background/forest/forest-background-layer-2.png);
}

#forest-layer-3 {
    background-image: url(../images/background/forest/forest-background-layer-3.png);
}

#forest-layer-4 {
    background-image: url(../images/background/forest/forest-background-layer-4.png);
}

#forest-end-light {
    width: 112px;
    height: 427px;
    background-image: url(../images/background/forest/forest-end-light.png);
}

#forest-end-dark {
    width: 109px;
    height: 447px;
    background-image: url(../images/background/forest/forest-end-dark.png);
}

/* Lake */

#lake-layer-1 {
    background-image: url(../images/background/lake/lake-background-layer-1.png);
}

#lake-layer-2 {
    background-image: url(../images/background/lake/lake-background-layer-2.png);
}

#lake-layer-3 {
    background-image: url(../images/background/lake/lake-background-layer-3.png);
}

#lake-layer-4 {
    background-image: url(../images/background/lake/lake-background-layer-4.png);
}

#lake-layer-5 {
    height: 328px;
    background-image: url(../images/background/lake/lake-background-layer-5.png);
}

/* City */

#city-1 {
    background-image: url(../images/background/city/city-background.png);
}


/* ----Character + Animations---- */

.character {
    position: fixed;
    left: 75px;
    width: 150px;
    height: 111px;
}

#char-idle-right {
    background-image: url(../images/character/character-anim-idle-right.png);
    animation: char-idle 0.8s steps(3) infinite;
}

#char-idle-left {
    background-image: url(../images/character/character-anim-idle-left.png);
    animation: char-idle 0.8s steps(3) infinite;
}

#char-run-right {
    background-image: url(../images/character/character-anim-run-right.png);
    animation: char-run 0.8s steps(6) infinite;
}

#char-run-left {
    background-image: url(../images/character/character-anim-run-left.png);
    animation: char-run 0.8s steps(6) infinite;
}

#char-jump-right {
    background-image: url(../images/character/character-anim-jump-right.png);
    animation: char-jump 0.55s steps(4) 1;
}

#char-jump-left {
    background-image: url(../images/character/character-anim-jump-left.png);
    animation: char-jump 0.55s steps(4) 1;
}

#char-fall-right {
    background-image: url(../images/character/character-anim-fall-right.png);
    animation: char-fall 0.2s steps(2) infinite;
}

#char-fall-left {
    background-image: url(../images/character/character-anim-fall-left.png);
    animation: char-fall 0.2s steps(2) infinite;
}

@keyframes char-idle {
    100% {
        background-position: -450px;
    }
}

@keyframes char-run {
    100% {
        background-position: -900px;
    }
}

@keyframes char-jump {
    100% {
        background-position: -600px;
    }
}

@keyframes char-fall {
    100% {
        background-position: -300px;
    }
}


/* ----Info Boxes---- */

#info-title {
    width: 660px;
    height: 247px;
    background-image: url(../images/info/info-title.png);
}

#info-passion {
    width: 660px;
    height: 389px;
    background-image: url(../images/info/info-passion.png);
}

#info-skills {
    width: 689px;
    height: 389px;
    background-image: url(../images/info/info-skills.png);
}

#info-project-sign {
    width: 354px;
    height: 110px;
    background-image: url(../images/info/info-project-sign.png);
}

#info-experience-sign {
    width: 319px;
    height: 110px;
    background-image: url(../images/info/info-experience-sign.png);
}

#info-panel-1 {
    width: 1024px;
    height: 256px;
    background-image: url(../images/info/info-panel-1.png);
}

#info-panel-2 {
    width: 1465px;
    height: 534px;
    /*  449  */
    background-image: url(../images/info/info-panel-2.png);
}

#info-panel-3 {
    width: 744px;
    height: 198px;
    background-image: url(../images/info/info-panel-3.png);
}

#info-panel-4 {
    width: 614px;
    height: 197px;
    background-image: url(../images/info/info-panel-4.png);
}

#info-panel-5 {
    width: 644px;
    height: 224px;
    background-image: url(../images/info/info-panel-5.png);
}

#info-love {
    width: 847px;
    height: 740px;
    background-image: url(../images/info/info-love.png);
}

#info-contact {
    width: 540px;
    height: 250px;
}


/* ---- Plant Textures ---- */

#tree-1 {
    width: 736px;
    height: 960px;
    background-image: url(../images/detail/tree-large-1.png);
}

#tree-2 {
    width: 736px;
    height: 1088px;
    background-image: url(../images/detail/tree-large-2.png);
}

#tree-3 {
    width: 736px;
    height: 1088px;
    background-image: url(../images/detail/tree-large-1.png);
}

#tree-4 {
    width: 268px;
    height: 488px;
    background-image: url(../images/detail/tree-medium-2.png);
}

#tree-5 {
    width: 222px;
    height: 414px;
    background-image: url(../images/detail/tree-small-4.png);
}

.lawn {
    height: 24px;
    background-image: url(../images/detail/lawn.png);
}

#lawn-1 {
    width: 384px;
}

#lawn-2 {
    width: 664px;
}

#lawn-3 {
    width: 1980px;
}

#lawn-4 {
    width: 1014px;
}

#lawn-5 {
    width: 10000px;
}

#lawn-6 {
    width: 240px;
}


/* ----Bushes---- */

.bush-1 {
    width: 246px;
    height: 134px;
    background-image: url(../images/detail/bush-1.png);
}

.bush-2 {
    width: 264px;
    height: 150px;
    background-image: url(../images/detail/bush-2.png);
}

.bush-3 {
    width: 184px;
    height: 130px;
    background-image: url(../images/detail/bush-3.png)
}


/* ----Shrubbery---- */

.shrub-1 {
    width: 374px;
    height: 70px;
    background-image: url(../images/detail/shrub-1.png);
}

.shrub-2 {
    width: 440px;
    height: 52px;
    background-image: url(../images/detail/shrub-2.png);
}

.shrub-3 {
    width: 694px;
    height: 98px;
    background-image: url(../images/detail/shrub-3.png);
}


/* ----Saplings---- */

.sapling-light-1 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-light-1.png);
}

.sapling-light-2 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-light-2.png);
}

.sapling-light-3 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-light-3.png);
}

.sapling-light-4 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-light-4.png);
}

.sapling-medium-1 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-medium-1.png);
}

.sapling-medium-2 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-medium-2.png);
}

.sapling-medium-3 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-medium-3.png);
}

.sapling-medium-4 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-medium-4.png);
}

.sapling-dark-1 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-dark-1.png);
}

.sapling-dark-2 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-dark-2.png);
}

.sapling-dark-3 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-dark-3.png);
}

.sapling-dark-4 {
    width: 26px;
    height: 64px;
    background-image: url(../images/detail/sapling-dark-4.png);
}


/* ----Twigs---- */

.twig-large-1 {
    width: 50px;
    height: 216px;
    background-image: url(../images/detail/twig-large-1.png);
}

.twig-large-2 {
    width: 50px;
    height: 216px;
    background-image: url(../images/detail/twig-large-2.png);
}

.twig-small-1 {
    width: 38px;
    height: 104px;
    background-image: url(../images/detail/twig-small-1.png);
}

.twig-small-2 {
    width: 38px;
    height: 104px;
    background-image: url(../images/detail/twig-small-2.png);
}