:root {
    --dark: #112;
    --dark-secondary: #223;
    --dark-accent: #447;
    --dark-overlay: #4474;
    --dark-overlay-secondary: #4471;
    --dark-link: cornflowerblue;
    --dark-link-visited: mediumslateblue;

    --light: #bcc;
    --light-secondary: #cdd;
    --light-accent: #559;
    --light-overlay: #4494;
    --light-overlay-secondary: #5592;
    --light-link: #00e;
    --light-link-visited: #518;

    --foreground: var(--dark);
    --foreground-secondary: var(--dark-secondary);
    --foreground-accent: var(--dark-accent);
    --foreground-overlay: var(--dark-overlay);
    --foreground-overlay-secondary: var(--dark-overlay-secondary);

    --background: var(--light);
    --background-secondary: var(--light-secondary);
    --background-accent: var(--light-accent);
    --background-overlay: var(--light-overlay);
    --background-overlay-secondary: var(--light-overlay-secondary);

    --link: var(--light-link);
    --link-visited: var(--light-link-visited);
    --icon-foreground: var(--foreground-accent);

    --border-width: 1px;
    --border-radius: 5px;
    --border-radius-secondary: 10px;
    --scrollbar-width: 10px;

    --animation-time: .3s;
}

html:has(#dark:checked) {
    --foreground: var(--light);
    --foreground-secondary: var(--light-secondary);
    --foreground-accent: var(--light-accent);
    --foreground-overlay: var(--light-overlay);
    --foreground-overlay-secondary: var(--light-overlay-secondary);

    --background: var(--dark);
    --background-secondary: var(--dark-secondary);
    --background-accent: var(--dark-accent);
    --background-overlay: var(--dark-overlay);
    --background-overlay-secondary: var(--dark-overlay-secondary);

    --link: var(--dark-link);
    --link-visited: var(--dark-link-visited);
}

@media (prefers-color-scheme: dark) {
    html:has(#device:checked) {
        --foreground: var(--light);
        --foreground-secondary: var(--light-secondary);
        --foreground-accent: var(--light-accent);
        --background: var(--dark);
        --background-secondary: var(--dark-secondary);
        --background-accent: var(--dark-accent);
        --link: var(--dark-link);
        --link-visited: var(--dark-link-visited);
        --background-overlay: var(--dark-overlay);
        --background-overlay-secondary: var(--dark-overlay-secondary);
        --foreground-overlay: var(--light-overlay);
        --foreground-overlay-secondary: var(--light-overlay-secondary);

    }
}

* {
    box-sizing: border-box;
}

html {
    height: 100dvh;
    overflow-x: hidden;

    background-color: var(--background-secondary);

    transition:
        --foreground var(--animation-time),
        --foreground_secondary var(--animation-time),
        --foreground_secondary var(--animation-time),
        --background var(--animation-time),
        --background-secondary var(--animation-time),
        --link var(--animation-time),
        --link-visited var(--animation-time),
        --background-overlay var(--animation-time),
        --background-overlay-secondary var(--animation-time),
        --foreground-overlay var(--animation-time),
        --foreground-overlay-secondary var(--animation-time);
}

body {
    height: inherit;
    overflow-x: inherit;
    scroll-behavior: smooth;

    margin: 0;
    padding-left: 1em;
    padding-right: 1em;

    background-size: cover;
    background-attachment: scroll;
    background: linear-gradient(135deg, var(--background) 50%, var(--background-secondary));
    color: var(--foreground-secondary);
}


#page {
    height: 101%;
    display: flex;
    flex-direction: column;

    width: 100%;
    margin: 0 auto;

}

#resizable {
    flex-grow: 1;
}

header {
    background: linear-gradient(var(--background) 66%, transparent);
    color: var(--foreground);

    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1em 0;
}

footer {
    flex-shrink: 0;
    align-self: center;
}

main,
footer {
    padding-bottom: 2em;
    min-width: 100%;
}

main {
    margin: 0 auto;
}

details {
    margin-top: 2em;
    border: 1px solid var(--foreground-overlay-secondary);
    border-radius: var(--border-radius-secondary);
}

details>* {
    margin: 1em;
}

summary {
    list-style: none;
    cursor: pointer;
    margin: 0;
    border-radius: var(--border-radius-secondary);
    background: linear-gradient(var(--background-overlay), transparent);

}

/*
summary:hover {
    background-color: var(--background-secondary);

}
*/

section {
    margin-top: 2em;
    padding: 1em;
    border: 1px solid var(--foreground-overlay-secondary);
    border-radius: var(--border-radius-secondary);
    background: linear-gradient(0deg, var(--background-overlay-secondary), transparent 33%);
}

.carousel {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1em calc(50% - 150px);
}

.carousel-card {
    flex-shrink: 0;
    overflow: hidden;
    scroll-snap-align: center;
}

img {
    display: block;
    margin: 1em auto;
    border-radius: var(--border-radius-secondary);
}

span {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--foreground);
    text-align: center;
    text-wrap: balance;
    margin: 0;
    padding: .5em;
}

p {
    margin: 0 auto;
    text-align: justify;
    text-indent: 4ch;
    hyphens: auto;
    line-height: 1.5em;
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

button {
    background-color: var(--background);
    color: var(--foreground-accent);
    border: 1px solid var(--foreground-accent);
    border-radius: var(--border-radius);
    padding: .5em;
    cursor: pointer;
}

/*
button:hover {
    background-color: var(--background-secondary);

}
*/

/* maybe left over??? to check
.details {
    hyphens: unset;
    text-align: left;
    padding: 1em 0;
    margin: 0;
    text-indent: unset;
}
    */

.focus {
    hyphens: unset;
    text-indent: unset;
    text-align: center;
    margin-bottom: 1.5em;
}

/*focus after h*/
h1+.focus,
h2+.focus,
h3+.focus {
    margin-top: -1em;
}

/*button focus*/
button.focus {
    display: block;
    margin-top: .5em;
    margin-left: auto;
    margin-right: auto;
}

hr {
    border-color: var(--foreground-overlay);
    margin: 0;
}

table {
    border-collapse: collapse;
    min-width: 100%;
    text-align: center;
}

td {
    padding: 10px;
    width: 50%;
    color: var(--foreground);
}

tr {
    border-bottom: solid var(--foreground-secondary);
}

tr:last-child {
    border-bottom: none;
}

td>* {
    margin: 0 auto;
}

.center-childs>* {
    margin: 0 auto;
}

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.gap {
    gap: 10px;
}

.min-size {
    flex: .3;
}

.strech {
    justify-content: space-evenly;
}

.spread {
    justify-content: space-between;
}

.fill {
    flex-grow: 1;
}

.center-text {
    text-align: center;
}

#page-path {
    margin: 0;
    color: var(--foreground-secondary);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-align: left;
    text-indent: unset;
    hyphens: none;
    word-break: break-all;
    line-height: 1em;

}

#page-path a {
    color: inherit !important;
    border-radius: var(--border-radius);
    padding: 2px 4px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--foreground-accent);
    text-decoration-thickness: 1px;
}

#page-path a:hover {
    color: inherit;
    background-color: var(--background-secondary);
    text-decoration: none;
}

#page-path a:visited {
    color: inherit !important;
}

#unity-canvas {
    width: calc(100vw - 2em - var(--scrollbar-width));
    aspect-ratio: 1;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}

input[type=text],
input[type=email],
textarea {
    background-color: var(--background);
    color: var(--foreground);
    border-color: var(--foreground-accent);
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
}

input:autofill {
    /*a week's worth of delay*/
    transition-delay: 604800s;
}

textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 40vh;
}

.success {
    color: green;
}

.error {
    color: red;
}

.icon-temp {
    /*stroke: var(--foreground-accent);*/
    fill: var(--foreground-accent);
    /*--background*/
}

/*
.icon-temp:hover {
    
    fill: var(--background-secondary);
}
*/

.icon {
    fill: var(--background-secondary);
    stroke: var(--foreground-accent);
}

#state-form {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1em;
    padding-top: 1em;
    margin: 0 auto;

    height: 60px;
    user-select: none;
}

.state label {
    padding: .25em;
    cursor: pointer;
    margin: 0;
    border-top: 1px solid var(--foreground-accent);
    border-bottom: 1px solid var(--foreground-accent);

    background-color: var(--background);
    color: var(--foreground-accent);
}

/*
.state label:hover {
    background-color: var(--background-secondary);
}
*/

#dark:checked~.state label[for="dark"],
#device:checked~.state label[for="device"],
#light:checked~.state label[for="light"],
#keys:checked~.state label[for="keys"],
#touch:checked~.state label[for="touch"],
#classic:checked~.state label[for="classic"],
#explorer:checked~.state label[for="explorer"],
#pt:checked~.state label[for="pt"],
#en:checked~.state label[for="en"] {
    background-color: var(--foreground-accent);
    color: var(--background);
}

.icon-temp {
    filter: drop-shadow(2px 3px 0 var(--background-overlay));
    transition: transform .2s ease;
}

.icon-temp:active {
    filter: drop-shadow(1px 2px 0 var(--background-overlay));
    transform: translateY(2px);
}

.state label,
summary,
button {
    box-shadow: 2px 3px 0 var(--background-overlay);
    transition: transform .2s ease;
}

button:active,
summary:active,
#dark:checked~.state label[for="dark"],
#device:checked~.state label[for="device"],
#light:checked~.state label[for="light"],
#keys:checked~.state label[for="keys"],
#touch:checked~.state label[for="touch"],
#classic:checked~.state label[for="classic"],
#explorer:checked~.state label[for="explorer"],
#pt:checked~.state label[for="pt"],
#en:checked~.state label[for="en"] {
    box-shadow: 1px 2px 0 var(--background-overlay);
    transform: translateY(2px);
}

.corners-left {
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    border-left: 1px solid var(--foreground-accent);
}

.corners-center {
    border-radius: 0;
}

.corners-right {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;

    border-right: 1px solid var(--foreground-accent);

}

.toogle-icon {
    height: 100%;
    aspect-ratio: 1;
    border-width: 1px;
    border-style: solid;
    border-radius: 100%;
    padding-top: 4px;
    border-color: var(--foreground-accent);

    display: flex;
    justify-content: center;

    &>* {
        height: 18px;
        width: 18px;
    }
}

.pt,
.en {
    display: none;
}

html[lang="pt"] .pt {
    display: inherit;
}

html[lang="en"] .en {
    display: inherit;
}

.touch-controls,
.keyboard-controls {
    width: fit-content;
    display: none;
}

html:has(#touch:checked) {
    .touch-controls {
        display: block;
    }
}

html:has(#keys:checked) {
    .keyboard-controls {
        display: block;
    }
}

.classic-mode,
.explorer-mode {
    width: fit-content;
    display: none;
}

html:has(#classic:checked) {
    .classic-mode {
        display: block;
    }

    tr.explorer-mode {
        border-bottom: none;
    }
}

html:has(#explorer:checked) {
    .explorer-mode {
        display: block;
    }

    tr.explorer-mode {
        display: table-row;

    }
}

@media (max-width: 400px) {
    .strech {
        flex-direction: column;
        gap: 10px;
    }
}

@media (min-width: 600px) {
    :root {
        --scrollbar-width: 15px;
    }

    #page {
        width: 100%;
    }



    main,
    footer {
        min-width: 70ch;
        width: 70ch;
        max-width: 70ch;
    }

    #unity-canvas {
        width: calc(min(96vh, 96vw) - 2em - var(--scrollbar-width));
        aspect-ratio: 1.6;
        position: relative;
        right: calc((min(100vh, 100vw) - 70ch) / 2 - 2em - var(--scrollbar-width));
    }
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
    background-color: transparent;
}

::-webkit-scrollbar-track {
    border-color: var(--foreground-overlay-secondary);
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
    margin: 50px;
    box-shadow: inset 0 0 4px var(--foreground-overlay);
}

::-webkit-scrollbar-thumb {
    background: var(--background);
    border-color: var(--foreground-accent);
    border-width: var(--border-width);
    border-style: solid;
    border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--background-secondary);
}


@property --foreground {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --foreground-secondary {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --foreground-accent {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --icon-foreground {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --background {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --background-secondary {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --background-accent {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --foreground-overlay {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --foreground-overlay-secondary {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --background-overlay {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --background-overlay-secondary {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --link {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}

@property --link-visited {
    syntax: '<color>';
    initial-value: #000;
    inherits: true;
}