:root {
    --dark: #313c40;
    --light: #e3d3c1;
    --accent: #8bb0a6;

    --line-weight: 5px;
    --block-size: calc( var(--line-weight) * 4 );
    --block-main-offset: calc( var(--block-size) / -2 );
    --block-cross-offset: calc( var(--block-size) / -2 + var(--line-weight) / 2 );

    --sqrt-2: 1.41421356237;
    --layer-offset: calc( var(--line-weight) * var(--sqrt-2) );
}

/* Baked copies for easier animating */
:root {
    --line-weight: 5px;
    --block-size: 20px;
    --block-main-offset: -10px;
    --block-cross-offset: -7.5px;

    --sqrt-2: 1.41421356237px;
    --layer-offset: 7.07106781187px;
}

.shrunk {
    --block-size: calc( var(--line-weight) * var(--sqrt-2) / 2 );
    --block-main-offset: calc( var(--block-size) / -2 );
    --block-cross-offset: calc( var(--block-size) / -2 + var(--line-weight) / 2 );

    --layer-offset: 0;
}

body {
    position: relative;
}

.ground > *, .background > * {
    position: absolute;
    top: 0;
    left: 0;
}

.foreground > * {
    position: relative;
}

.foreground {
    position: relative;
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    
    min-height: 80vh;
    width: 100vw;

    z-index: 4;
}

.plants {
    display: flex;
    align-items: end;
    align-self: end;
    justify-content: space-between;
    width: 30vw;
    height: 14rem;
    flex-grow: 1;
    max-width: 20rem;
    padding: 0 3rem;
    margin-top: 3rem;
}

#bigplant {
    display: inline-block;
    position: relative;
}

#bigplant .stem {
    width: var(--line-weight);
    height: 196px;
    background: var(--accent);
}

#bigplant .leaf {
    position: absolute;

    left: var(--line-weight);
    height: var(--line-weight);
    width: 32px;

    background: var(--accent);
}

/* Block */
#bigplant .leaf:before {
    position: absolute;
    display: block;
    content: "";

    top: var(--block-cross-offset);
    right: var(--block-main-offset);
    width: var(--block-size);
    height: var(--block-size);
    transform: rotate(45deg);

    background: var(--accent);
}

/* Chevron */
#bigplant .leaf:after {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;

    top: var(--block-cross-offset);
    right: calc( var(--block-main-offset) - var(--layer-offset) * 2);
    width: var(--block-size);
    height: var(--block-size);
    transform: rotate(45deg);

    border-right: var(--line-weight) solid var(--accent);
    border-top: var(--line-weight) solid var(--accent);
}

.leaf.low {
    bottom: calc( 64px - var(--line-weight)/2);
}

.leaf.high {
    bottom: calc( 128px - var(--line-weight)/2);
}

.leaf.left {
    transform-origin: calc(var(--line-weight) / -2) center;
    transform: rotate(180deg);
}

.bulb.screw {
    position: absolute;
    box-sizing: border-box;

    width: var(--block-size);
    height: var(--block-size);
    top: calc(var(--line-weight) * 5);
    left: calc(var(--block-size) * 1 + var(--line-weight) * 1);

    border-right: var(--line-weight) solid var(--accent);
    border-bottom: var(--line-weight) solid var(--accent);
}

.bulb.screw:after {
    position: absolute;
    content: "";
    box-sizing: border-box;

    width: var(--block-size);
    height: var(--block-size);
    top: calc(var(--line-weight) * 2);
    left: calc(var(--block-size) * 1 + var(--line-weight) * -2);

    border-right: var(--line-weight) solid var(--accent);
    border-bottom: var(--line-weight) solid var(--accent);
}

/* Innermost square */
.bulb.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent);
    width: var(--block-size);
    height: var(--block-size);
    
    z-index: 10;
}

/* Outer top half */
.bulb.inner:before {
    position: absolute;
    content: "";
    
    width: calc(var(--block-size) * 2 + var(--line-weight)*2);
    height: calc(var(--block-size) * 2 + var(--line-weight)*2);
    top: calc(var(--line-weight) * -4);
    left: calc(var(--line-weight) * -4);

    border-left: var(--line-weight) solid var(--accent);
    border-top: var(--line-weight) solid var(--accent);
}

/* Inner half fill rect */
.bulb.inner:after {
    position: absolute;
    content: "";
    
    top: calc(var(--line-weight) * 2);
    left: calc(var(--line-weight) * -2);
    width: calc(var(--block-size) * 2);
    height: calc(var(--block-size) * 1);

    background: var(--accent);
}

/* Inner outline */
.bulb.outer {
    position: absolute;
    width: calc(var(--line-weight) * 6);
    height: calc(var(--line-weight) * 6);
    top: calc(var(--line-weight) * 8 / -2 - var(--layer-offset) * 9);
    left: calc(var(--line-weight) * 8 / -2 + var(--line-weight) / 2);
    transform: rotate(45deg);
    
    border: var(--line-weight) solid var(--accent);


    z-index: 11;
}

/* Right outer corner */
.bulb.outer:before {
    position: absolute;
    content: "";
    box-sizing: border-box;

    width: var(--block-size);
    height: var(--block-size);
    top: calc(var(--line-weight) * -3);
    left: calc(var(--block-size) * 1 + var(--line-weight) * 1);

    border-right: var(--line-weight) solid var(--accent);
    border-top: var(--line-weight) solid var(--accent);
}

/* Left outer corner */
.bulb.outer:after {
    position: absolute;
    content: "";
    box-sizing: border-box;

    width: var(--block-size);
    height: var(--block-size);
    top: calc(var(--block-size) * 1 + var(--line-weight) * 1);
    left: calc(var(--line-weight) * -3);

    border-left: var(--line-weight) solid var(--accent);
    border-bottom: var(--line-weight) solid var(--accent);
}

.spark {
    position: absolute;
    box-sizing: border-box;

    width: 32px;
    height: var(--line-weight);
    top: calc(var(--line-weight) * 1 / -2 - var(--layer-offset) * 9);
    left: calc(var(--block-size) * 3);
    transform-origin: calc(var(--block-size) * -3) center;

    background-color: var(--accent);

    z-index: 100;
}

.spark + .spark {
    transform: rotate(-45deg);
}

.spark + .spark + .spark {
    transform: rotate(-90deg);
}

.spark + .spark + .spark + .spark {
    transform: rotate(-135deg);
}

.spark + .spark + .spark + .spark + .spark {
    transform: rotate(-180deg);
}

.plant {
    --jump-offset: 0px;
    position: relative;

    width: var(--line-weight);
    height: 64px;
}

.plant:before {
    position: absoltue;
    display: block;
    content: "";

    width: var(--line-weight);
    height: 64px;

    background: var(--accent);
}

.plant:after {
    position: absolute;
    display: block;
    content: "";

    top: calc( var(--block-main-offset) - var(--jump-offset) );
    left: var(--block-cross-offset);
    width: var(--block-size);
    height: var(--block-size);
    transform: rotate(45deg);

    background: var(--accent);
}

.plant.shorter {
    height: 48px;
}

.plant.shorter:before {
    height: 48px;
}

.info {
    padding: 3rem;
    padding-bottom: 8rem;
    align-self: center;
}

.info h1 {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--dark);
    font-size: min(4.5rem, 14vw); /* Fix text wrapping on narrow screens */
    margin: 0;
    line-height: 1;
}

.info hr {
    height: var(--line-weight);
    width: 24.85rem;
    max-width: 90vw;
    margin: 0;
    border: none;
    background: var(--dark);

    margin-bottom: 0.4rem;
}

.info h2 {
    width: 24.85rem;
    max-width: 90vw;
    padding: 0;
    margin: 0;
    font-size: 2em;
    font-weight: 450;
    color: vaR(--dark);
}

.info ul {
    width: 24.85rem;
    max-width: 90vw;
    padding: 0;
    margin: 0;
    margin-top: 1em;
    list-style: none;
    font-size: 1.5em;
    font-weight: 450;
}

.info li a {
    color: var(--dark);
    text-decoration: none;
    border-bottom: 3px solid var(--dark);
    line-height: 1.4;
}

.ground {
    position: relative;
    height: 20vh;
    width: 100vw;
    overflow: clip;
    bottom: 0;
    left: 0;

    border-top: 6px solid var(--accent);
    background: var(--dark);

    z-index: 5;
}

.ground .shadow {
    width: 100vw;
    height: 40vh;

    box-shadow: 0 0 max(7vw, 7vh) var(--accent) inset; 
    opacity: 0.4;
}

.background {
    pointer-events: none;
    user-select: none;

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: var(--light);
    overflow: clip;
}

.background .shadow {
    right: 0;
    bottom: 0;

    box-shadow: 0 0 max(7vw, 7vh) var(--dark) inset;
    opacity: 0.25;

    z-index: 3;
}

.outlines {
    text-shadow: 0 0 1px var(--accent), 0 0 1px var(--accent), 0 0 1px var(--accent), 0 0 1px var(--accent);
    color: var(--light);
    opacity: 0.225;

    z-index: 1;
}

.fills {
    transform: translate(.75vw, .75vw);
    color: var(--accent);
    opacity: 0.065;

    z-index: 2;
}

.background p {
    line-height: 1;
    margin: 0;
    text-align: center;

    text-transform: uppercase;
    font-weight: 900;
    white-space: nowrap;
}

.body1 {font-size: 6.3vw}
.body2 {font-size: 6.2vw}
.midnight1 {font-size: 7.6vw}
.midnight2 {font-size: 6.2vw}
.moving1 {font-size: 8.35vw}
.moving2 {font-size: 6.35vw}
.moving3 {font-size: 6.05vw}
.moving4 {font-size: 5.35vw}
.platform1 {font-size: 9.0vw}
.platform2 {font-size: 7.5vw}
.platform3 {font-size: 10.0vw}
.platform4 {font-size: 7.65vw}
.one1 {font-size: 7.25vw}
.one2 {font-size: 10.95vw}
.one3 {font-size: 7.35vw}
.paradise1 {font-size: 6.55vw}
.paradise2 {font-size: 10.6vw}
.paradise3 {font-size: 9.9vw}
.paradise4 {font-size: 9.25vw}
.paradise5 {font-size: 6.95vw}
.paradise6 {font-size: 6.4vw}
.friends1 {font-size: 8.5vw}
.friends2 {font-size: 6.15vw}
.sos1 {font-size: 8.35vw}
.sos2 {font-size: 6.6vw}