@background:      #57506a;
@page-background: #968eb5;
@accent:          #ec6d7d;
@text:            #464256;
@ok:              #caec6d;

* {
    box-sizing: border-box;
    color: @text;
    margin: 0 auto 0.5em auto;
    text-align: center;
}

html, body {
    background-color: @background;
    font-size: 3vmin;
    margin: 0;
    padding: 0;
}

button {
    padding: 1em;
    white-space: nowrap;
    width: 100%;
    
    &.pagination:not(.normal) {
        position: absolute;
        bottom: 5vmin;
        width: auto;
        
        &.prev {
            left: 5vmin;
        }
        
        &.next, &.start {
            right: 5vmin;
        }
    }
}

header * {
    color: @accent;
}

h1 {
    margin: 0;
}

h3 {
    font-size: 0.9em;
}

input {
    width: 100%;
    text-align: left;
    
    &[type="checkbox"] {
        width: auto;
        margin-right: 1em;
        position: relative;
        top: 0.25em;
        left: 0.25em;
    }
}

img {
    max-width: 100%;
    margin: 0;
}

p {
    font-size: 0.8em;
    margin: 0 auto 1em auto;
}

label {
    font-size: 0.75em;
    font-weight: bold;
}

select {
    width: 100%;
}

textarea {
    height: 15em;
    padding: 0.5em;
    text-align: left;
    width: 100%;
}

.background {
    background-color: @background;
    padding: 0.5em;
    border-radius: 0.5em;
}

.checkboxes label {
    margin-right: 1em;
}

.cropper-tools {
    margin-top: 0;
}

.half {
    display: inline-block;
    text-align: left;
    width: 50%;
}

.image-container {
    height: 46vh;
    text-align: left;
}

.page {
    height: 80vmin;
    width:  80vmin;
    
    background-color: @page-background;
    color: @text;
    border-radius: 5vmin;
    box-shadow: @accent 1vmin 1vmin;
    padding: 5vmin;
    position: relative;
}

#preview {
    width: 256px;
    height: 256px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.message {
    background-color: @ok;
    padding: 1em;
    text-align: left;
    
    &#game-data-errors {
        background-color: @accent;
    }
}