body {
    font-family: 'Public Sans';
    font-weight: 300;
    font-style: normal;
    background-color: #364989;
    padding: 0;
    margin: 0;
}

.homebutton {
    position: fixed;
    top: -1em;
    left: 2em;
}

.homebutton canvas {
    height: 30em;
    image-rendering: pixelated;
}

.established {
    position: fixed;
    top: 0.8em;
    left: 25vw;
    color: white;
    font-size: 0.85em;
}

.handle {
    position: fixed;
    top: 0.8em;
    right: 25vw;
    color: white;
    font-size: 0.85em;
}

.credit {
    position: fixed;
    color: white;
    bottom: 0.85em;
    left: 50vw;
    font-size: 0.85em;
}

.globe {
    position: fixed;
    top: 0.9em;
    right: 1.1em;
}

.globe img {
    height: 2.9em;
}

.maintitle {
    margin-top: 2em;
    color: #f7cf6e;
    width: 100%;
    font-size: 4em;
    font-weight: 900;
    z-index: 999;
}

.maintitle div {
    width: 4em;
    margin-left: calc(50vw - 2em);
}

.mt1 {
    text-align: left;
    height: 0.8em;
}

.mt1 span {
    color: white;
}

.mt2 {
    text-align: right;
    height: 1em;
    font-family: 'Pixelify Sans';
}

.mt3 {
    text-align: left;
}

.mainnav {
    color: white;
    margin-top: 1em;
}

.mainnav div {
    margin-left: calc(50vw - 6em);
    width: 12em;
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 0.85em;
}

.mainnav span {
    margin-left: 8px;
    cursor: pointer;
}

.mainnav a {
    text-decoration: none;
    color: inherit;
}

.mainnav a:visited {
    color: inherit;
}

.moon {
    position: fixed;
    bottom: -10em;
    left: -5em;
    background-color: #ECECEC;
    border-radius: 50%;
    width: 30em;
    height: 30em;
    box-shadow: 0 0 15px rgba(205, 235, 255, 0.765),
                        0 0 30px rgba(52, 152, 219, 0.5),
                        0 0 45px rgba(52, 152, 219, 0.5),
                        0 0 60px rgba(52, 152, 219, 0.5);
}

.moon div {
    position: fixed;
    background-color: #D8D5D8;
    border-radius: 50%;
}

.crater1 {
    bottom: 6em;
    left: -1.0em;
    width: 5em;
    height: 5em;
}

.crater2 {
    bottom: 12em;
    left: 2.0em;
    width: 1em;
    height: 1em;
}

.crater3 {
    bottom: -0.1em;
    left: 13em;
    width: 1.1em;
    height: 1.1em;
}

.crater4 {
    bottom: 5em;
    left: 13em;
    width: 0.9em;
    height: 0.9em;
}

.crater5 {
    bottom: 1.8em;
    left: 14em;
    width: 2.3em;
    height: 2.3em;
}

.crater5 {
    bottom: 1.8em;
    left: 14em;
    width: 2.3em;
    height: 2.3em;
}

.crater6 {
    bottom: 16.7em;
    left: 13em;
    width: 1.7em;
    height: 1.7em;
}

.crater7 {
    bottom: 17em;
    left: 16em;
    width: 0.9em;
    height: 0.9em;
}

.crater8 {
    bottom: 3em;
    left: 23.3em;
    width: 2.3em;
    height: 2.3em;
}

.crater9 {
    bottom: 2em;
    left: 22em;
    width: 0.8em;
    height: 0.8em;
}

.crater10 {
    bottom: 0.8em;
    left: 23em;
    width: 0.4em;
    height: 0.4em;
}

.bunnypixel {
    bottom: 8.9em;
    right: 0.0;
    width: 25em;
    height: 13em;
    position: fixed;
    transform: rotate(-12deg);
}

.bunnypixel canvas {
    height: 90em;
    image-rendering: pixelated;
}

.badmiffy {
    position: fixed;
    width: 13em;
    right: 0.0;
    bottom: 0.9em;
    transform: rotate(11deg);
}

.badmiffy canvas {
    height: 15em;
    image-rendering: pixelated;
}

.star1 {
    position: fixed;
    right: 10em;
    bottom: 18em;
}

.star1 img {
    width: 2em;
}

.star2 {
    position: fixed;
    left: 15em;
    bottom: 24em;
    transform: rotate(20deg);
}

.star2 img {
    width: 3.5em;
}

.dots div {
    position: fixed;
    border-radius: 50%;
}

.dot1 {
    background-color: #FF6036;
    bottom: 22em;
    left: 5.0em;
    width: 0.8em;
    height: 0.8em;
}

.dot2 {
    background-color: #F3BE4E;
    top: 10em;
    left: 8.0em;
    width: 0.8em;
    height: 0.8em;
}

.dot3 {
    background-color: #EFE6D2;
    bottom: 28em;
    left: 13.0em;
    width: 0.6em;
    height: 0.6em;
}

.dot4 {
    background-color: #4893f9;
    top: 28em;
    left: 26.0em;
    width: 0.9em;
    height: 0.9em;
}

.dot5 {
    background-color: #F3BE4E;
    bottom: 2em;
    left: 28.0em;
    width: 0.9em;
    height: 0.9em;
}

.dot6 {
    background-color: #FF6036;
    bottom: 4em;
    left: 30.0em;
    width: 0.6em;
    height: 0.6em;
}

.dot7 {
    background-color: #FF6036;
    top: 8em;
    right: 25.0em;
    width: 0.9em;
    height: 0.9em;
}

.dot8 {
    background-color: #EFE6D2;
    top: 18em;
    right: 28.0em;
    width: 0.5em;
    height: 0.5em;
}

.dot9 {
    background-color: #FF6036;
    top: 24em;
    right: 3.0em;
    width: 0.8em;
    height: 0.8em;
}

.dot10 {
    background-color: #4893f9;
    bottom: 24em;
    right: 13.0em;
    width: 0.9em;
    height: 0.9em;
}

.dot11 {
    background-color: #EFE6D2;
    bottom: 23em;
    right: 9.0em;
    width: 0.6em;
    height: 0.6em;
}

@media (max-width: 60em) {
    .dot10 {
        display: none;
    }
    .dot7 {
        display: none;
    }
    .dot4 {
        display: none;
    }
    .dot8 {
        display: none;
    }
    .dot9 {
        display: none;
    }
    .dot2 {
        display: none;
    }
    .credit {
        display: none;
    }
    .badmiffy {
        display: none;
    }
    .bunnypixel {
        display: none;
    }
    .homebutton {
        left: 1em;
    }
    .globe {
        right: 1em;
    }
    .globe img {
        height: 2.0em;
    }
}

@media (max-height: 60em) {
    .moon {
        display: none;
    }
    .dot1 {
        display: none;
    }
    .dot3 {
        display: none;
    }
    .dot5 {
        display: none;
    }
    .dot6 {
        display: none;
    }
    .dot11 {
        display: none;
    }
    .star1 {
        display: none;
    }
    .star2 {
        display: none;
    }
}