:root {
    color-scheme: dark;
}

body {
    max-width: 50em;
    margin: 0 auto;
    background-image: url("../img/cat.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 100vh;
}

textarea {
    resize: vertical;
    width: 100%;
    height: 35em;
}

img, canvas {
    width: 100%;
    /*! height: max-content; */
}

pre {
    overflow-y: auto;
}

:invalid {
    border: 2px solid red;
}

.step {
    border: dashed;
    border-radius: 1em;
    background-color: #0000007F;
    backdrop-filter: blur(2em);
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.step.collapsed * {
    display: none;
}

.step > :first-child { /* Heading */
    margin-top: 0;
    display: initial;
}

.status:empty {
    display: none;
}

.meta {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.meta-col {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.meta-col > p {
    margin: 0;
}

.meta-col input {
    margin-bottom: auto;
    width: 100%;
    max-width: 20em;
}

#meta-icon {
    width: 5em;
    margin-right: 0.5em;
    background: #91919180;
    margin-bottom: auto;
    padding: 0.3em;
    border-radius: 0.5em;
    display: flex;
    height: 5em;
    flex-shrink: 0;
}

#meta-icon:hover {
    background: #007afbe0;
}

.meta-icon-list {
    display: flex;
    flex-direction: column;
    min-width: 15em;
    background: #AAA5A5;
    color: black;
    backdrop-filter: blur(2em);
    border-radius: 1em;
    margin-top: auto;
}

.meta-icon-list > div {
    display: flex;
    border-radius: 0;
    align-items: center;
    padding: 0.5em 1em;
}

.meta-icon-list > :first-child {
    border-radius: 1em 1em 0 0;
}

.meta-icon-list > :last-child {
    border-radius: 0 0 1em 1em;
}

.meta-icon-list > div:hover {
    background: rebeccapurple;
    color: white;
}

.meta-icon-list img {
    width: 3em;
    margin-right: 0.5em;
}

.meta-icon-picker {
    display: flex;
    width: max-content;
    position: absolute;
    bottom: .5em;
    z-index: 1;
}

@media screen and (width <= 37rem) {
    .meta-icon-picker {
        flex-direction: column;
    }
    
    .meta-custom-icon {
        margin-top: 0.2em !important;
    }
}

.meta-icon-picker div.active {
    background: cornflowerblue;
    color: white;
}

.meta-custom-icon {
    padding: .5em;
    border-left: solid #00000055 .1em;
    color: black;
    background: #AAA5A5;
    border-radius: 1em;
    margin-left: 0.2em;
    margin-top: auto;
}

.hidden {
    display: none;
}

code {
    background: #2D2C2C;    
    padding: 0.1em 0.3em;
    border-radius: 0.5em;
}

details {
    background: #2D2C2C;  
    padding: 0.5em;
    border-radius: 1em;
}

details > :last-child {
    margin-bottom: 0.5em;
}

details[open] > summary {
    padding-bottom: 0.7em;
    border-bottom: solid .1em;
}

details {
    margin-bottom: 1em;
}

body:not(.game-balatro) .balatro-only {
    display: none;
}

body:not(.platform-android) .android-only {
    display: none;
}

body:not(.platform-ios) .ios-only {
    display: none;
}

.platform-ios #meta-icon img,
.platform-ios .meta-icon-list img {
    border-radius: 15.6%;
}

footer p {
    margin: 0;
    margin-bottom: .5em;
}

footer {
    padding: 1em;
    padding-bottom: .5em;
    border-radius: 1em;
    border: solid #C2AD09 0.1em;
    background-color: #0000007F;
    backdrop-filter: blur(2em);
    margin-bottom: 1em
}