body {
    background: url(../image/background.jpg) no-repeat top center fixed #000 !important;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;

    font-size: 14px;
    color: #ffffff;
    font-family: 'Questrial', sans-serif;
    user-select: none;
}

h1 {
    margin: 0.2em;
    font-size: 48px;
    text-align: center;
    color: rgba(255,255,255,0.8)
}

h2 {
    font-size: 16px;
    text-align: center;

    background-color: rgba(0,0,0,0.30);
    border: 4px solid rgba(0,0,0,0.10);
    border-radius: 20%;
    margin: auto;
    width: 600px;
    margin-top: 16px;

    padding: 8px 16px;
    height: 38px;
}

h3 {
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

span.step {
    font-weight: bold;
    font-size: 18px;
    margin-right: 1em;
}

div.slideImage {
    margin: auto;
    background: no-repeat #000;
    border: 4px solid black;
    border-radius: 5%;
    width: 600px;
    height: 600px
}

div#prompt {
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    font-size: 32px;
}

div.overlay {
    background-color: rgba(0,0,0,0.75);
    border: 4px solid black;
    border-radius: 20%;
    margin: auto;
    width: 600px;
    margin-top: 16px;
}

div#skip {
    margin-left: 370px;
    margin-top: 14px;
    border-radius: 50%;
    border: 16px solid white;
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    left: 50%;
    cursor: pointer;
}

div#previous {
    margin-left: -360px;
    margin-top: 14px;
    border-radius: 50%;
    border: 16px solid white;
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    left: 50%;
    cursor: pointer;
}

div#next {
    margin-left: 310px;
    margin-top: 14px;
    border-radius: 50%;
    border: 16px solid white;
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    left: 50%;
    cursor: pointer;
}

div.slideContainer {
    margin: auto;
    width: 600px;
    margin-top: 20px;
    background: rgba(0,0,0,0.9);
    padding: 10px;
}

div#screenshot {
    display: inline-block;
}

div#lantern {
    background-image: url(../image/lantern.png);
    position: absolute;
    left: 50%;
    width: 200px;
    height: 622px;
    margin-left: -100px;
    top: 200px;
    z-index: 10;
    pointer-events: none;
}

div#size {
    background: rgba(0,0,0,0.75);
    color: white;
    font-weight: bold;
    position: absolute;
    left: 50%;
    margin-left:140px;
    padding: 5px;
    z-index: 100;
}

div#slider {
    height: 162px;
}

div#sliderContainer {
    position: absolute;
    left: 50%;
    top: 321px;
    margin-left: 120px;
    z-index: 100;
}

div#sliderLine {
    border-top: 1px solid rgba(255,0,0,0.8);
    height: 1px;
    width: 500px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    z-index: 20;
}

div#sliderPanel {
    position: absolute;
    left: 50%;
    top: 200px;
    margin-left: 200px;
    border: 1px solid rgba(0,0,0,0.75);
    background: rgba(0,0,0,0.2);
    padding: 16px;
    z-index: 95;
}

.panelLabel {
    width: 200px;
}

span.discord {
    font-weight: bold;
    color: #00AAFF;
}

.ui-resizable-handle {
    width: 0;
    height: 0;
    border: 16px solid rgba(0, 200, 255, 0.5);
    background-image: url(../image/blank.png) !important;
}

a.discordLink {
    color: #00AAFF;
    text-decoration: none;
}

div#smallestScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -310px;
    top: 202px;
    z-index: 5;
    pointer-events: none;
}

div#smallestScreenshot img {
    opacity: 80%;
    width: 132%;
}

div#tallestScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -455px;
    top: 200px;
    z-index: 3;
    pointer-events: none;
}

div#tallestScreenshot img {
    opacity: 80%;
    width: 75%;
}

div#hugeScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -356px;
    top: 45px;
    z-index: 2;
    pointer-events: none;
}

div#hugeScreenshot img {
    opacity: 80%;
    width: 115%;
}

div#tinyScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -254px;
    top: 111px;
    z-index: 7;
    pointer-events: none;
}

div#tinyScreenshot img {
    opacity: 80%;
    width: 81%;
}

div#childScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -270px;
    top: 153px;
    z-index: 7;
    pointer-events: none;
}

div#childScreenshot img {
    opacity: 80%;
    width: 59%;
}

div#growScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -310px;
    top: 108px;
    z-index: 7;
    pointer-events: none;
}

div#growScreenshot img {
    opacity: 80%;
    width: 51.5%;
}

div#shrinkScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -254px;
    top: 133px;
    z-index: 7;
    pointer-events: none;
}

div#shrinkScreenshot img {
    opacity: 80%;
    width: 67%;
}

div#slideshow {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 190px;
    z-index: 1000;
    pointer-events: none;
}

div#slideshow img {
    opacity: 100%;
    width: 63%;
}

div#officialChart {
    position: absolute;
    left: 50%;
    margin-left: -424px;
    top: 122px;
    z-index: 1;
    pointer-events: none;
}

div#officialChart img {
    opacity: 80%;
    width: 135%;
}

div#oldChart {
    position: absolute;
    left: 50%;
    margin-left: -446px;
    top: 75px;
    z-index: 1;
    pointer-events: none;
}

div#oldChart img {
    opacity: 80%;
    width: 112%;
}

div#knownScreenshot {
    position: absolute;
    left: 50%;
    margin-left: -445px;
    top: 204px;
    z-index: 8;
    pointer-events: none;
}

div#knownScreenshot img {
    opacity: 80%;
    width: 73%;
}

div.tips {
    z-index: 12;
}

div#screenshotContainer {
    min-height: 650px;
}

button.panelLabel {
    width: 230px;
}

span#stats_percentile {
    font-weight: bold;
}

.ui-slider .ui-slider-handle {
    height: 30px;
    width: 30px;
    margin-left: -7px;
}

#loadingScreen {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(0, 0, 0, 0.8)
                url('///i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}

.emphasis {
    font-weight: bold;
    font-style: italic;
}

div#secretButton {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 16px;
    height: 16px;
}

div.imperialScale {
    color: #AAA;
}

div.rawScale {
    color: #888;
}

div.oldScale {
    color: #666;
}

div#disclaimer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
}

div#disclaimerInner {
    background: white;
    color: black;
    padding: 2em;
}

div#disclaimerBody {
    margin-top: 2em;
}

.heading {
    font-weight: bold;
    text-decoration: underline;
    font-size: 2em;
}

#disclaimerButtons {
    display: flex;
}

.buttonPadding {
    flex: 1;
}