body {
    background-color: oklab(0.321088 -0.000220731 -0.00934622);
    color: oklab(0.899401 -0.00192499 -0.00481987);
    padding-left: min(4vw, 40px);
    padding-top: 60px;
    margin: 0;
}

* {
    outline: none;
    font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

code {
    font-family: 'gg mono', 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
}

#modal_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#modal_bg {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    border: none;
    border-radius: 5px;
    background-color: oklab(0.999994 0.0000455678 0.0000200868);
}

#modal_img {
    width: 240px;
    background-image: url(assets/d2259d3ca22746e44d10.svg)
}

@media (max-width: 760px) {
    #modal {
        flex-direction: column;
    }

    #modal_img {
        display: none;
    }
}

#modal_content {
    height: 464px;
    width: min(408px, 90vw);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

#gcjalogo {
    margin-left: auto;
    margin-right: auto;
    height: 48px;
    width: 48px;
}

#modal_title {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 700;
    color: oklab(0.321088 -0.000220731 -0.00934622);
    text-align: center;
}

#modal_description {
    margin-top: 8px;
    margin-bottom: 24px;
    text-align: center;
    color: oklab(0.321088 -0.000220731 -0.00934622);
    font-size: 16px;
}

#modal fieldset {
    margin-bottom: 16px;
    border: none;
    padding-left: 0;
    padding-right: 0;
    padding: 0;
    position: relative;
}

#modal legend {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .24px;
    color: oklab(0.431937 0.00109309 -0.0132537);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}

#selection {
    background-color: oklab(0 0 0 / 0.08);
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid oklab(0 0 0 / 0.08);
    border-radius: 4px;
}

#label_container {
    position: relative;
}

#label {
    color: oklab(0.482487 0.00109145 -0.0130416);
    font-size: 16px;
    font-weight: 500;
    vertical-align: baseline;
    margin-left: 2px;
    position: absolute;
    top: 9.5px;
}

#image {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 8px;
}

#options {
    background-color: oklab(0.963963 -0.000228554 -0.00283051);
    border: 1px solid oklab(0.921146 -0.000888288 -0.00448269);
    border-radius: 4px;
    z-index: 1l;
    color: oklab(0.431937 0.00109309 -0.0132537);
    font-size: 16px;
    font-weight: 500;
    margin-top: -1px;
    margin-bottom: -1px;
    display: none;
    position: absolute;
    width: 100%;
    transform: translateY(-90px);
}

.options {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: oklab(0.431937 0.00109309 -0.0132537);
    font-size: 16px;
    font-weight: 500;
    padding: 12px;
}

.options:hover {
    background-color: oklab(0.612849 -0.000356704 -0.0157219 / 0.16);
}

#footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
}

#submit {
    background-color: rgb(88, 101, 242);
    color: white;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    font-stretch: 100%;
    height: 44px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: none;
    border-radius: 3px;
    transition: background-color .17s ease, color .17s ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#submit:hover {
    background-color: rgb(71, 82, 196);
}

#modal2 {
    padding: 32px;
    width: min(480px, 90vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 5px;
    background-color: oklab(0.321088 -0.000220731 -0.00934622);
    display: none;
}

#modal2 * {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#modal2 img {
    width: 252px;
    height: 168px;
    display: block;
    margin-bottom: 20px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
}

#modal2_title {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    color: oklab(0.963963 -0.000228554 -0.00283051);
}

#modal2_description {
    color: oklab(0.786807 -0.0025776 -0.0110238);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 24px;
}

#title {
    margin-bottom: 24px;
    font-size: 20px;
}

#info {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid oklab(0.431937 0.00109309 -0.0132537 / 0.48);
    width: min(90vw, 375px);
    margin-left: 0;
    margin-right: 0;
}

#value_container {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid oklab(0.431937 0.00109309 -0.0132537 / 0.48);
    width: min(90vw, 375px);
    margin-left: 0;
    margin-right: 0;
}

#value_label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
}

#value {
    width: 100%;
    resize: none;
    background-color: oklab(0.23892 0.000131361 -0.00592163);
    color: oklab(0.899401 -0.00192499 -0.00481987);
    border: none;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#frame_container {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid oklab(0.431937 0.00109309 -0.0132537 / 0.48);
    width: min(90vw, 375px);
    margin-left: 0;
    margin-right: 0;
}

#frame_label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
}

#frame {
    background-color: oklab(0.23892 0.000131361 -0.00592163);
    color: oklab(0.899401 -0.00192499 -0.00481987);
    border: none;
    border-radius: 3px;
    padding: 10px;
    width: 100%;
    text-align: left;
    font-size: 16px;
}

#error {
    color: #ed4245;
}

@font-face {
    font-family: "gg sans";
    font-style: normal;
    font-weight: 400;
    src: url(assets/c1b53be672aac192a996.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: italic;
    font-weight: 400;
    src: url(assets/8234e0a75aa9afb205bd.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: normal;
    font-weight: 500;
    src: url(assets/ecff74bf4394e6e58dd1.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: italic;
    font-weight: 500;
    src: url(assets/db0a7b5459a233f1f6c0.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: normal;
    font-weight: 600;
    src: url(assets/1222195a37d6dd10994e.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: italic;
    font-weight: 600;
    src: url(assets/0fb198ed8281d10bac11.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: normal;
    font-weight: 700;
    src: url(assets/b21c5111a12372139409.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: italic;
    font-weight: 700;
    src: url(assets/8bd8143eff37936894aa.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: normal;
    font-weight: 800;
    src: url(assets/6df261c61450af10af2f.woff2)format("woff2")
}

@font-face {
    font-family: "gg sans";
    font-style: italic;
    font-weight: 800;
    src: url(assets/ef2325329f07b2420f27.woff2)format("woff2")
}

@font-face {
    font-family: "gg mono";
    font-style: normal;
    font-weight: 400;
    src: url(assets/5757cfda6ca63444c894.woff2)format("woff2")
}

@font-face {
    font-family: "gg mono";
    font-style: normal;
    font-weight: 700;
    src: url(assets/13de5f52f815c6218355.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: url(assets/6daadfe6e5f14c9213b7.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    src: url(assets/452d7be36bf4b23241bd.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 500;
    src: url(assets/b8cfca9c9b10ffcc6e53.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 500;
    src: url(assets/b84ef5d4aa22d54ea96e.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 600;
    src: url(assets/914a97ac83e173c66dd7.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 600;
    src: url(assets/e5895f33d25eae65caf5.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    src: url(assets/48a594e29497835802fe.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 700;
    src: url(assets/f5b8aa3411dfc24ff2e6.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 800;
    src: url(assets/475016f7a9e3e75b3670.woff2)format("woff2")
}

@font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 800;
    src: url(assets/1622f3625fb3a6eac2f2.woff2)format("woff2")
}

@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    src: url(assets/050634333c5c80bb9a22.woff2)format("woff2")
}

@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 700;
    src: url(assets/9c62c8f043a8a6353df1.woff2)format("woff2")
}