:root {
    /* Color Palettes */

    /* City Scenery */
    --window-sill: #596475;
    --sky-top: #ff879f;
    --sky-bottom: #ffe3e9;
    --stars-bright: #ffafc7;
    --stars-normal: #ffbbd4e1;
    --stars-variation: #ffffffb3;
    --buildings-row-one: #17002c;
    --buildings-row-two: #4f476d;
    --buildings-row-three: #92899e;
    --windows: #f3e16b;
    --windows-dimmed: #f3e16b4d;
    --train: #014f86;
    --train-track: #504957;
    --train-windows: #f3e16b;

    /* Work Desk */
    --desk-stroke: #10001f;
    --desk-fill: #8b8d9d;
    --desk-shadow: #535161;
    --desk-highlight: #b8b4bfe5;
    --laptop-line-primary: #e8c85e;
    --laptop-line-alternate: #5f77c7;
    --laptop-highlight: #EBE7E7;
    --book-color-second: #337b4d;
    --book-highlight: #559c6f;
    --book-highlight-second: #21699c;
    --cup-fill: #a79b9b;
    --cup-smoke: #aaa3a3;

    /* Wall Clock */
    --second: 1s;
    --minute: calc(var(--second) * 60);
    --hour: calc(var(--minute) * 60);
}

#animated-background {
    /* Make the container's height the same as the whole page,
       then specify desired height percentage in the animation container */
    height: 100%;
    display: flex;
}


/***********************
 City Windows Animation
************************/
.sky-container-left {
    position: relative;
    margin-top: 75px;
    margin-right: 5px;
    width: 20%;
    height: 40%;
    overflow: hidden;

    /* Window sill */
    outline: 2px solid var(--window-sill);
    -webkit-box-shadow: 0 15px 6px -6px #999;
    -moz-box-shadow: 0 15px 6px -6px #999;
    box-shadow: 0 15px 6px -6px #999;
    border-radius: 2px;

    /* Sky gradient */
    background-image: linear-gradient(to top,
            var(--sky-bottom) 0%,
            var(--sky-top) 100%);
}

.sky-container-left:after {
    content: "";
    position: absolute;
    background-color: var(--stars-normal);
    width: 2px;
    height: 2px;
    top: 5%;
    left: 5%;
    box-shadow:
        100px -5px var(--stars-variation),
        200px 10px var(--stars-normal),
        300px -5px var(--stars-variation),
        370px 0 var(--stars-normal),
        75px 40px var(--stars-bright),
        60px 5px var(--stars-normal),
        40px 30px var(--stars-variation),
        140px -5px var(--stars-bright),
        250px 4px var(--stars-variation);
    filter: drop-shadow(0 0 3px var(--stars-bright));
}

.sky-container-right {
    position: relative;
    width: 20%;
    height: 40%;
    margin-top: 75px;
    margin-right: 5px;
    overflow: hidden;

    /* Window sill */
    outline: 2px solid var(--window-sill);
    -webkit-box-shadow: 0 15px 6px -6px #999;
    -moz-box-shadow: 0 15px 6px -6px #999;
    box-shadow: 0 15px 6px -6px #999;
    border-radius: 2px;

    /* Sky gradient */
    background-image: linear-gradient(to top,
            var(--sky-bottom) 0%,
            var(--sky-top) 100%);
}

.sky-container-right:after {
    content: "";
    position: absolute;
    background-color: var(--stars-normal);
    width: 2px;
    height: 2px;
    top: 5%;
    left: 5%;
    box-shadow:
        95px -5px var(--stars-variation),
        205px 10px var(--stars-normal),
        313px -5px var(--stars-variation),
        370px 0 var(--stars-normal),
        70px 40px var(--stars-bright),
        80px 6px var(--stars-variation),
        40px 30px var(--stars-normal),
        142px -5px var(--stars-bright),
        245px 4px var(--stars-variation);
    filter: drop-shadow(0 0 3px var(--stars-bright));
}

.buildings-row-one {
    /* Set dimensions and position of first, most leftmost building */
    position: absolute;
    background-color: var(--buildings-row-one);
    width: 22%;
    height: 40%;
    bottom: 0%;

    /* Use box shadows to generate repeating city pattern layout */
    box-shadow:
        150px 0 var(--buildings-row-one),
        200px 0 var(--buildings-row-one),
        250px 0 var(--buildings-row-one);

    z-index: 7;
}

.buildings-row-one:before {
    /* Set dimensions and position of smaller building, based on the first one */
    content: "";
    position: absolute;
    background-color: var(--buildings-row-one);
    width: 50%;
    height: 58%;
    bottom: 0%;
    left: 100%;

    /* Repeat the pattern of small buildings in the cityscape */
    box-shadow:
        95px 0 var(--buildings-row-one),
        145px 0 var(--buildings-row-one),
        190px 0 var(--buildings-row-one),
        270px 0 var(--buildings-row-one);
}

.buildings-row-one:after {
    /* Based a medium-sized building based on the first one */
    content: "";
    position: absolute;
    background-color: var(--buildings-row-one);
    width: 75%;
    height: 75%;
    bottom: 0%;
    left: 155%;

    /* Make a pattern of medium buildings showing up in the cityscape */
    box-shadow:
        120px 0 var(--buildings-row-one),
        250px 0 var(--buildings-row-one),
        300px 0 var(--buildings-row-one);
}

.track {
    position: absolute;
    background-color: var(--buildings-row-one);
    width: 95px;
    height: 5px;
    left: 100%;
    bottom: 20%;
    z-index: 1;
}

.track:before {
    content: "";
    position: absolute;
    background-color: var(--train-track);
    width: 7px;
    height: 2.5px;
    top: 2px;
    box-shadow:
        10px 0 var(--train-track),
        20px 0 var(--train-track),
        30px 0 var(--train-track),
        40px 0 var(--train-track),
        50px 0 var(--train-track),
        60px 0 var(--train-track),
        70px 0 var(--train-track),
        80px 0 var(--train-track),
        90px 0 var(--train-track);
}

.train-container {
    z-index: 2;
    position: absolute;
    width: 95px;
    height: 100px;
    overflow: hidden;
    left: 100%;
}

.train {
    position: absolute;
    background-color: var(--train);
    width: 60px;
    height: 25px;
    bottom: 35%;
    left: -100px;
    box-shadow:
        65px 0 var(--train),
        130px 0 var(--train),
        195px 0 var(--train),
        260px 0 var(--train),
        -65px 0 var(--train);
    animation: move 10s linear infinite;
    animation-timing-function: ease-in-out;
}

.train:before {
    content: "";
    position: absolute;
    background-color: var(--train-windows);
    width: 15px;
    height: 10px;
    left: 40px;
    top: 5px;
    box-shadow:
        65px 0 var(--train-windows),
        -65px 0 var(--train-windows),
        130px 0 var(--train-windows),
        195px 0 var(--train-windows),
        260px 0 var(--train-windows);
}

.train:after {
    content: "";
    position: absolute;
    background-color: var(--train-windows);
    height: 5px;
    width: 5px;
    top: 5px;
    left: 7px;
    box-shadow:
        10px 0 var(--train-windows),
        75px 0 var(--train-windows),
        140px 0 var(--train-windows),
        20px 0 var(--train-windows),
        85px 0 var(--train-windows),
        150px 0 var(--train-windows),
        33px 12px var(--train-windows),
        98px 12px var(--train-windows),
        163px 12px var(--train-windows),
        43px 12px var(--train-windows),
        108px 12px var(--train-windows),
        173px 12px var(--train-windows),
        238px 12px var(--train-windows),
        303px 12px var(--train-windows),
        65px 0 var(--train-windows),
        130px 0 var(--train-windows),
        195px 0 var(--train-windows),
        260px 0 var(--train-windows),
        -65px 0 var(--train-windows),
        -55px 0 var(--train-windows),
        -45px 0 var(--train-windows),
        -32px 12px var(--train-windows),
        -22px 12px var(--train-windows),
        228px 12px var(--train-windows),
        293px 12px var(--train-windows),
        215px 0 var(--train-windows),
        280px 0 var(--train-windows),
        205px 0 var(--train-windows),
        270px 0 var(--train-windows);
}

@keyframes move {
    from {
        left: -150px;
    }

    to {
        left: 44px;
    }
}

.windows-row-one {
    position: absolute;
    z-index: 3;
    background-color: var(--buildings-row-one);
    width: 100%;
    height: 30px;
    top: 25%;
    box-shadow:
        150px 0 var(--buildings-row-one),
        200px 0 var(--buildings-row-one),
        250px 0 var(--buildings-row-one);
}

.windows-row-one:before {
    content: "";
    position: absolute;
    background-color: var(--windows);
    width: 10px;
    height: 10px;
    top: 5px;
    left: 5px;
    box-shadow:
        15px 0 var(--windows-dimmed),
        150px 0 var(--windows),
        200px 0 var(--windows-dimmed),
        250px 0 var(--windows-dimmed);
    animation: light 11s linear infinite 2s;
}

@keyframes light {
    0% {
        filter: brightness(.5);
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(0.3);
    }
}

.buildings-row-two {
    position: absolute;
    background-color: var(--buildings-row-two);
    width: 30%;
    height: 55%;
    bottom: 0%;
    z-index: 4;
    box-shadow:
        55px 20px var(--buildings-row-two),
        120px 10px var(--buildings-row-two),
        165px 20px var(--buildings-row-two),
        210px 0 var(--buildings-row-two),
        240px 15px var(--buildings-row-two);
}

.buildings-row-two:before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background-color: rgba(204, 201, 0, .3);
    top: 5px;
    left: 50%;
    box-shadow:
        12px 0 rgba(204, 201, 0, .1),
        70px 30px rgba(204, 201, 0, .3),
        60px 40px rgba(204, 201, 0, .1),
        100px 50px rgba(204, 201, 0, .1),
        100px 20px rgba(204, 201, 0, .1),
        115px 20px rgba(204, 201, 0, .3),
        100px 10px rgba(204, 201, 0, .2),
        130px 10px rgba(204, 201, 0, .1),
        170px 40px rgba(204, 201, 0, .1),
        174px 40px rgba(204, 201, 0, .1),
        220px 10px rgba(204, 201, 0, .1),
        245px 30px rgba(204, 201, 0, .1);
}

.banner {
    position: absolute;
    width: 35px;
    height: 20px;
    background-color: #5ea3f7;
    left: 57px;
    top: 22px;
    box-shadow: inset 0 -6px #d90429, inset 0 6px #55a630;
    overflow: hidden;
    opacity: .3;
    animation: change 15s linear infinite;
}

@keyframes change {
    0% {
        filter: brightness(1.2) hue-rotate(0) saturate(7);
    }

    50% {
        filter: brightness(2) hue-rotate(360deg) saturate(7);
    }

    100% {
        filter: brightness(1.2) hue-rotate(0) saturate(7);
    }
}

.windows-row-two {
    position: absolute;
    background-color: rgba(255, 214, 10, .4);
    width: 8px;
    height: 8px;
    top: 10px;
    left: 10px;
    box-shadow:
        90px 50px rgba(255, 214, 10, .4),
        160px 55px rgba(255, 214, 10, .4),
        225px 55px rgba(255, 214, 10, .2),
        330px 35px rgba(255, 214, 10, .2),
        380px 40px rgba(255, 214, 10, .4);
    animation: light 9s linear infinite 3.2s;
}

.buildings-row-three {
    position: absolute;
    background-color: var(--buildings-row-three);
    width: 18%;
    height: 70%;
    bottom: 0%;
    z-index: 3;
    box-shadow:
        30px -15px var(--buildings-row-three),
        65px 30px var(--buildings-row-three),
        110px 0 var(--buildings-row-three),
        135px -20px var(--buildings-row-three),
        160px -10px var(--buildings-row-three);
}

.buildings-row-three:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: rgba(255, 214, 10, .1);
    top: 5px;
    left: 30px;
    box-shadow:
        12px 0 rgba(255, 214, 10, .1),
        12px 10px rgba(255, 214, 10, .1),
        115px -15px rgba(255, 214, 10, .1),
        140px -15px rgba(255, 214, 10, .1),
        230px -5px rgba(255, 214, 10, .1);
}

/***********************
 Work Desk Animation
************************/
.desk-container {
    position: absolute;
    width: 50%;
    height: 50%;
    border-bottom: 5px solid var(--desk-stroke);
    bottom: 1%;
    left: 25%;
    z-index: 15;
}

.desk {
    position: absolute;
    width: 90%;
    height: 60%;
    bottom: 0%;
    left: 5%;
    z-index: 15;
}

.tabletop {
    position: absolute;
    width: 100%;
    height: 13%;
    top: 0%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-fill);
    box-shadow:
        inset 0 4px var(--desk-highlight);
}

.tableleg {
    position: absolute;
    width: 7%;
    height: 87%;
    top: 13%;
    left: 3%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-fill);
    box-shadow:
        inset 0 6px var(--desk-shadow);
}

.drawer-left {
    position: absolute;
    width: 35%;
    height: 17%;
    top: 13%;
    left: 10%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-fill);
    box-shadow:
        inset 0 6px var(--desk-shadow);
}

.drawer-left:before {
    content: "";
    position: absolute;
    width: 25%;
    height: 4px;
    background-color: var(--desk-stroke);
    left: 37.5%;
    top: 33%;
}

.drawer-right {
    position: absolute;
    width: 35%;
    height: 17%;
    top: 13%;
    left: 45%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-fill);
    box-shadow:
        inset 0 6px var(--desk-shadow);
}

.drawer-right:before {
    content: "";
    position: absolute;
    width: 25%;
    height: 4px;
    background-color: var(--desk-stroke);
    left: 37.5%;
    top: 33%;
}

.cabinet {
    position: absolute;
    width: 19%;
    height: 87%;
    top: 13%;
    left: 80%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-fill);
    box-shadow:
        inset 0 6px var(--desk-shadow);
}

.cabinet:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    top: 25%;
    background-color: var(--desk-stroke);
    box-shadow:
        0 35px var(--desk-stroke),
        0 70px var(--desk-stroke);
}

.cabinet:before {
    content: "";
    position: absolute;
    width: 25%;
    height: 4px;
    background-color: var(--desk-stroke);
    left: 37.5%;
    top: 12.5%;
    box-shadow:
        0 35px var(--desk-stroke),
        0 70px var(--desk-stroke),
        0 100px var(--desk-stroke);
}

.work-items {
    position: absolute;
    width: 90%;
    height: 30%;
    bottom: 60%;
    left: 5%;
    z-index: 15;
}

.books {
    position: absolute;
    width: 20%;
    height: 80%;
    left: 1%;
    bottom: 0%;
}

.book-1 {
    position: absolute;
    width: 90%;
    height: 25%;
    border: 3px solid var(--desk-stroke);
    background-color: var(--book-color-second);
    bottom: 0%;
    left: 0%;
    box-shadow:
        inset 0 3px var(--book-highlight);
}

.book-1:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    border: 3px solid var(--desk-stroke);
    background-color: var(--train-track);
    bottom: 100%;
    left: 20%;
    box-shadow: inset 0 3px var(--window-sill);
}

.book-2 {
    position: absolute;
    width: 90%;
    height: 25%;
    border: 3px solid var(--desk-stroke);
    background-color: var(--book-color-second);
    bottom: 45%;
    left: 3%;
    box-shadow:
        inset 0 3px var(--book-highlight);
}

.book-2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    border: 3px solid var(--desk-stroke);
    background-color: var(--train);
    bottom: 100%;
    left: 10%;
    box-shadow: inset 0 3px var(--book-highlight-second);
}

.screen {
    position: absolute;
    width: 30%;
    height: 90%;
    left: 23%;
    bottom: 10%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-shadow);
}

.screen:after {
    content: "";
    position: absolute;
    width: 35%;
    height: 20%;
    left: 32.5%;
    top: 100%;
    background-color: var(--desk-stroke);
}

.screen:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 10%;
    left: 25%;
    top: 110%;
    background-color: var(--desk-stroke);
}

.screen-lines-primary {
    position: absolute;
    width: 75%;
    height: 4px;
    top: 15%;
    left: 12.5%;
    background-color: var(--laptop-line-primary);
    box-shadow:
        0 20px var(--laptop-line-primary),
        0 40px var(--laptop-line-primary);
}

.screen-lines-alt {
    position: absolute;
    width: 75%;
    height: 4px;
    top: 30%;
    left: 12.5%;
    background-color: var(--laptop-line-alternate);
    box-shadow:
        0 20px var(--laptop-line-alternate);
}

.laptop {
    position: absolute;
    width: 28%;
    height: 75%;
    left: 55%;
    bottom: 10%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--desk-shadow);
}

.laptop:after {
    content: "";
    position: absolute;
    width: 120%;
    height: 25%;
    top: 100%;
    left: -10%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--laptop-highlight);
}

.laptop-lines-primary {
    position: absolute;
    width: 75%;
    height: 4px;
    top: 20%;
    left: 12.5%;
    background-color: var(--sky-top);
    box-shadow:
        0 20px var(--sky-top);
    animation: writing 5s 0s linear infinite;
    animation-timing-function: ease-in-out;
}

.laptop-lines-alt {
    position: absolute;
    width: 0%;
    height: 4px;
    top: 40%;
    left: 12.5%;
    background-color: var(--sky-top);
    box-shadow:
        0 20px var(--sky-top);
    animation: writing 5s 0.1s linear infinite;
    animation-timing-function: ease-in-out;
}

@keyframes writing {
    0% {
        width: 0%;
        opacity: 1;
    }

    70% {
        width: 75%;
        opacity: 1;
    }

    100% {
        width: 75%;
        opacity: 1;
    }
}

.cup {
    position: absolute;
    width: 7%;
    height: 40%;
    right: 3%;
    bottom: 0%;
    border: 4px solid var(--desk-stroke);
    background-color: var(--cup-fill);
}

.cup:after {
    content: "";
    position: absolute;
    width: 80%;
    height: 100%;
    left: 100%;
    border: 5px solid var(--desk-stroke);
    border-radius: 10px;
}

.cup:before {
    content: "";
    position: absolute;
    width: 3px;
    height: 15px;
    bottom: 130%;
    left: 5%;
    border-radius: 10px;
    background-color: var(--cup-smoke);
    box-shadow:
        6px -5px var(--cup-smoke),
        12px 0 var(--cup-smoke);
    animation: cooling 7s linear infinite;
    animation-timing-function: ease-in;
}

@keyframes cooling {
    0% {
        height: 15px;
        opacity: 1;
    }

    80% {
        height: 15px;
        opacity: 0;
    }

    100% {
        height: 15px;
        opacity: 1;
    }
}

/***********************
 Wall Clock Animation
************************/
.clock-container {
    position: absolute;
    width: 70px;
    height: 70px;
    outline: 1px solid var(--buildings-row-one);
    top: 0%;
    left: 45%;
    z-index: 15;
    border-radius: 50%;
    background-color: var(--desk-highlight);
    background-image: url(images/clock-face.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 10px 6px -6px #999;
    -moz-box-shadow: 0 10px 6px -6px #999;
    box-shadow: 0 10px 6px -6px #999;
}

.hand {
    width: 50%;
    right: 50%;
    height: 4px;
    background: var(--sky-top);
    position: absolute;
    top: 50%;
    border-radius: 6px;
    transform-origin: 100%;
    transform: rotate(90deg);
    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hour-hand {
    width: 30%;
    z-index: 3;
}

.min-hand {
    height: 3px;
    z-index: 10;
    width: 40%;
}

.second-hand {
    background: var(--buildings-row-two);
    width: 45%;
    height: 2px;
}


/***********************
 Sun Rays Animation
************************/
.sunrays-container-left {
    position: absolute;
    width: 20%;
    height: 50%;
    left: 5%;
    bottom: 15%;
    z-index: 17;
}

.sunrays-container-right {
    position: absolute;
    width: 20%;
    height: 50%;
    right: 5%;
    bottom: 15%;
    z-index: 17;
}

.ray {
    position: absolute;
    background-image: linear-gradient(to top, #ffffff00 0%, var(--stars-variation) 50%, #ffffff00 100%);
    width: 25px;
    height: 200px;
    opacity: 0.5;
    transform: rotate(20deg);
    left: 30%;
    top: 5%;
    z-index: 17;
    animation: shining 30s linear infinite;
}

.ray:before {
    content: "";
    position: absolute;
    background-image: linear-gradient(to top, #ffffff00 0%, var(--stars-variation) 50%, #ffffff00 100%);
    width: 20px;
    height: 150px;
    opacity: 0.5;
    right: 50px;
    z-index: 17;
    animation: shining 60s linear infinite;
}

.ray:after {
    content: "";
    position: absolute;
    background-image: linear-gradient(to top, #ffffff00 0%, var(--stars-variation) 50%, #ffffff00 100%);
    width: 20px;
    height: 150px;
    opacity: 0.5;
    left: 50px;
    z-index: 17;
    animation: shining 45s linear infinite;
}

@keyframes shining {
    0% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        opacity: 0.5;
    }
}