@font-face {
    font-family: 'SVThin';
    src: url('/public/svthin.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
  height: 100%;
}

body {
    background-color: #0f2465;
    height: 100%;
    margin: 0;
}

body p {
    font-family: 'SVThin', serif;
    font-size: 28px;
    padding-left: 1px;
}

body h2 {
    font-family: 'SVThin', serif;
    font-size: 42px;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
}

.flexVertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexHorizontal {
    display: flex;
    align-items: center;
}

.noMargin {
    margin: 0;
}

.textCenter {
    text-align: center;
}

.okButton {
    display: flex;
    justify-content: end;
    padding-right: 6px;
    margin-bottom: 7px;
}

.okButton:active {
    filter: brightness(90%);
}

.uiContainer {
    border: solid 21px;
    border-image: url('/public/border.png');
    border-image-slice: 21;
}

.uiInnerContainer {
    background: linear-gradient(to top, #EBA867, #FFC677);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 5px;
}

.optionsContainer {
    box-sizing: content-box;
    height: calc(100% - 42px);
    width: 324px;
}

.optionsInnerContainer {
    overflow: scroll;
}

.scrollOption {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
}

.scrollOptionArrows img {
    cursor: pointer;
}

.scrollOptionMain {
    height: 77px;
    gap: 10px;
    user-select: none;
}

.scrollOptionIcon img {
    pointer-events: none;
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
}

.scrollOptionArrows {
    gap: 4px;
}

.scrollOptionLabel {
    width: 100%;
    height: 34px;
}

.sliderOption {
    width: calc(100% - 6px);
    height: 73px;
}

.sliderOptionAbove {
    padding-top: 7px;
    justify-content: space-between;
}

.sliderOptionLabel {
    padding-left: 5px;
    padding-right: 5px;
    user-select: none;
    justify-content: space-between;
    flex-grow: 1;
}

.resultScreenOuter {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.resultScreen {
    width: 400px;
}

.resultScreen h2 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: normal;
}

.resultScreen p {
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 0.3px;
}

.checkOption {
    display: flex;
    justify-content: left;
    gap: 5px;
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url('/public/unchecked.png');
}

input[type=checkbox]:checked {
    background-image: url('/public/checked.png');
}

.fishLabel {
    height: 43px;
    padding-top: 7px;
}

.fishLabel h2 {
    font-weight: normal;
    margin: 0;
}

.fishSelector {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 7px;
}

.fishEntry {
    width: 51px;
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fishSelected {
    background-color: #00000040;
}

.minigameClient {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    flex-grow: 1;
}

.minigameContainer {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.minigameFrame {
    position: relative;
}

.minigameClient img {
    image-rendering: pixelated;
    pointer-events: none;
    -webkit-user-drag: none;
}

.minigameFrame img {
    position: absolute;
}

input[type=image] {
    image-rendering: pixelated;
}

/* ------------------------------------- REVAMP RANGE STYLING ------------------------------------ */
/* This is all thanks to https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */

input[type=range] {
    appearance: none;
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -14px;
}

input[type=range]::-webkit-slider-thumb {
    border: none;
    height: 28px;
    width: 20px;
    background-image: url('public/slider_ball.png');
    background-color: transparent;
    cursor: pointer;
    image-rendering: pixelated;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 28px;
    width: 20px;
    background-image: url('public/slider_ball.png');
    background-color: transparent;
    cursor: pointer;
    image-rendering: pixelated;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: #af6129;
    box-sizing: border-box;
    border: solid 4px;
    border-image: url('/public/slider_border.png');
    border-image-slice: 4;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: #af6129;
    box-sizing: border-box;
    border: solid 4px;
    border-image: url('/public/slider_border.png');
    border-image-slice: 4;
}