@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
html, body {
    padding: 0;
    margin: 0;
    background: #264653;
    color: #dae2e5;
    transition: font-size 0.3s ease;
    font-family: 'Domine', sans-serif;
    overscroll-behavior-y: contain;
}

body > *:not(script) {
    margin: 2rem auto 0 auto;
    display: table;
}

p {
    font-size: 24px;
    font-weight: 900;
}

tbody:not(#mazebody) {
    display: none;
}

p#explanation {
    max-width: 20em;
    text-align: center;
    transition: opacity 1s ease, transform 2s ease;
}

p#explanation.invisible {
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.5s ease, transform 1s ease;
}

#maze {
    border-spacing: 0;
}

#maze tr:nth-child(even) td:nth-child(even) {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.1s ease;
}

#maze tr:nth-child(odd) td {
    height: calc(2px + 0.05rem);
    transition: background 0.15s ease-in;
}

#maze td:nth-child(odd) {
    width: calc(2px + 0.05rem);
    transition: background 0.15s ease-in;
}

#maze tr:nth-child(odd) td:nth-child(even):not(.path), #maze tr:nth-child(odd) td:nth-child(odd), #maze tr:nth-child(even) td:nth-child(odd):not(.path) {
    background: #dae2e5;
}

/* #maze.done tr:nth-child(odd) td:nth-child(even), #maze.done tr:nth-child(even) td:nth-child(odd) {
    background: #dae2e5;
} */

#maze td.start {
    clip-path: circle(32%);
    background: #e9c46a;
}

.startcolor {
    padding: 0 0.2em;
    color: #264653;
    background: #e9c46a;
    border-radius: 3em;
}

#maze tr:not(:first-child) td.start.top {
    transform: translateY(calc(-100% - 4px));
    transition: none;
}

#maze td.start.right:not(:last-child)  {
    transform: translateX(calc(100% + 4px));
    transition: none;
}

#maze tr:not(:last-child)  td.start.bottom {
    transform: translateY(calc(100% + 4px));
    transition: none;
}

#maze td.start.left:not(:first-child)  {
    transform: translateX(calc(-100% - 4px));
    transition: none;
}

#maze td.end {
    clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
    background: #e76f51;
}

.endcolor {
    padding: 0 0.1em;
    color: #264653;
    background: #e76f51;
}

* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}