@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: oblique 0deg 10deg;
    src: url("../fonts/Inter.var.woff2?v=3.19") format("woff2");
}

html {
    min-height: 100%;
    margin: 0;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    /*font-family: 'Roboto Mono', monospace;*/
    font-family: 'Inter', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    min-height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #f1eff5;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    margin-bottom: 0;
}

main {
    display: flex;
    flex-flow: column;
    height: 100%;
    min-height: 100vh;

    background-color: #f1eff5;
}

h1 {
    font-weight: normal;
    margin: 1rem auto 0;
    font-size: 2rem;
}

div.game {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 450px) {
    h1 {
        margin: .5rem auto 0;
        font-size: 1.5rem;
    }

    div.game {
        margin-top: 1rem;
    }
}

@media (min-width: 600px) {
    body.bg {
        background-color: #e8e4ee;
        background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23d4c9e7' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    main {
        max-width: 600px;
        width: 600px;
        /*padding-left: 80px;*/
        /*padding-right: 80px;*/

        border-left: 2px solid #d4c9e7;
        border-right: 2px solid #d4c9e7;
    }

    h1 {
        margin: 2rem auto 0;
        font-size: 4rem;
    }
}

table.dashboard {
    background-color: #f8f8ff;
}

table.grid {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid black;

    /*box-shadow: 10px 10px 5px #888888;*/

    background-color: #fafafa;

    margin-bottom: 3rem;
    user-select: none;
}

table.grid.x3 {
    width: calc(3 * 72px);
}

table.grid.x4 {
    width: calc(4 * 72px);
}

table.grid.x5 {
    width: calc(5 * 72px);
}

table.grid.x6 {
    width: calc(6 * 72px);
}

table.grid.x7 {
    width: calc(7 * 50px);
}

table.grid.x8 {
    width: calc(8 * 50px);
}

table.grid.x9 {
    width: calc(9 * 50px);
}

table.grid td {
    width: 72px;
    height: 72px;
}

table.grid:is(.x7, .x8, .x9) td {
    width: 50px;
    height: 50px;

    font-size: 1.2rem;
}

@media (max-width: 450px) {
    table.grid.x3 {
        width: calc(3 * 72px);
    }

    table.grid.x4 {
        width: calc(4 * 72px);
    }

    table.grid.x5 {
        width: calc(5 * 60px);
    }

    table.grid.x6 {
        width: calc(6 * 50px);
    }

    table.grid.x7 {
        width: calc(7 * 50px);
    }

    table.grid.x8 {
        width: calc(8 * 40px);
    }

    table.grid.x9 {
        width: calc(9 * 38px);
    }

    table.grid td {
        width: 72px;
        height: 72px;
    }

    table.grid.x5 td {
        width: 60px;
        height: 60px;
    }

    table.grid:is(.x6, .x7) td {
        width: 50px;
        height: 50px;

        font-size: 1.2rem;
    }

    table.grid:is(.x8, .x9) td {
        width: 40px;
        height: 40px;

        font-size: 1rem;
    }
}

table.grid td {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    cursor: pointer;

    font-size: 1.5rem;

    position: relative;
    background-clip: padding-box; /* FF workaround */
}

table.grid td.selected, table.grid td.selected:hover {
    background-color: #fba92c;
}

table.grid td.td-title {
    background: linear-gradient(65deg, #a573c6, #8ec2f2);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-title-easy {
    background: linear-gradient(65deg, #89d6f4, #8ec2f2);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-title-medium {
    background: linear-gradient(65deg, #f2f28e, #f2b38e);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-title-hard {
    background: linear-gradient(65deg, #e5554b, #9c6bea);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game4 {
    background: linear-gradient(65deg, #89d6f4, #8ec2f2);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game5 {
    background: linear-gradient(65deg, #8ec2f2, #8edfb7);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game6 {
    background: linear-gradient(65deg, #8edfb7, #f2f28e);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game7 {
    background: linear-gradient(65deg, #f2f28e, #f2b38e);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game8 {
    background: linear-gradient(65deg, #f2b38e, #e5554b);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-game9 {
    background: linear-gradient(65deg, #e5554b, #9c6bea);
    background-size: 200% 200%;
    animation: AnimationName 10s ease infinite;
}

table.grid td.td-title-img span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

table.grid td.td-title-img img {
    width: 80%;
    height: 80%;
}

table.grid td.td-cell:not(.selected):hover {
    background-color: #eef3f8;
    transition: border-color 175ms 0ms ease-in, background-color 175ms 0ms ease-out, border-radius 250ms 0ms ease-in, box-shadow 250ms 0ms ease-in;
}

table.grid td.td-cell.cell-error span.cell {
    color: red;
}

table.grid td.td-cell.cage-error span.target {
    color: red;
}

table.grid td.td-cell.cell-ok span.cell {
    color: forestgreen;
    font-weight: bold;
}

table.grid span.cell {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 8px;
    margin-right: 8px;
}

table.grid span.cell.cell-edit {
    font-size: 1rem;
}

table.grid tr.toolbar {
    background-color: #f1eff5;
}

table.grid tr.toolbar td {
    border: 2px solid #f1eff5;
}

table.grid tr.toolbar span.digit {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #606060;
    border-radius: 15px;
    padding: 3px;
    color: #606060;

    font-size: 1.7rem;
    background-color: #f0f8ff;

    height: 80%;
}

table.grid td.td-digit:hover .digit {
    background-color: #fffcf0;
    transition: border-color 175ms 0ms ease-in, background-color 175ms 0ms ease-out, border-radius 250ms 0ms ease-in, box-shadow 250ms 0ms ease-in;
    color: #000;
}

table.grid tr.toolbar span.btn {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #606060;
    border-radius: 15px;
    padding: 3px;
    color: #606060;

    background-color: #e0e0e0;

    height: 80%;
}

table.grid td.td-btn:hover span.btn {
    background-color: #f0f0f0;
    transition: border-color 175ms 0ms ease-in, background-color 175ms 0ms ease-out, border-radius 250ms 0ms ease-in, box-shadow 250ms 0ms ease-in;
}

table.grid tr.toolbar td.td-btn img {
    width: 2.5rem;
    height: 2.5rem;
}

table.grid:is(.x7, .x8, .x9) tr.toolbar td.td-btn img {
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 450px) {
    table.grid:is(.x5) tr.toolbar td.td-btn img {
        width: 1.2rem;
        height: 1.2rem;
    }

    table.grid:is(.x6, .x7, .x8, .x9) tr.toolbar td.td-btn img {
        width: 1.3rem;
        height: 1.3rem;
    }
}

table.grid td.td-btn:hover .digit {
    background-color: #fcfcde;
    transition: border-color 175ms 0ms ease-in, background-color 175ms 0ms ease-out, border-radius 250ms 0ms ease-in, box-shadow 250ms 0ms ease-in;
    color: #000;
}

table.grid tr.toolbar td.td-empty {
    cursor: default;
}

table.grid .target {
    position: absolute;
    top: 0;
    margin-top: 3px;
    margin-left: 3px;

    font-size: .8rem;
    font-weight: 500;
}

table.grid:is(.x7, .x8, .x9) .target {
    margin-top: 2px;
    margin-left: 2px;
    font-size: .6rem;
}

table td.bl {
    border-left-width: 3px;
}

table td.br {
    border-right-width: 3px;
}

table td.bb {
    border-bottom-width: 3px;
}

table td.bt {
    border-top-width: 3px;
}

table.solved tr:not(.toolbar) {
    background: linear-gradient(65deg, #6495ED, #ADFF2F);
    background-size: 400% 400%;
    animation: AnimationName 10s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

/*Modal*/
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}

@media (max-width: 450px) {
    .modal-content {
        width: 100%;
    }
}

.close {
    position: relative;
    top: -20px;
    right: -20px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
}

.modal-header h2 {
    text-align: center;
}

.modal-body {
    padding: 2px 16px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.modal-body p {
    text-align: center;
}

.modal-footer {
    padding: 2px 16px;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.btn {
    align-items: center;
    appearance: button;
    background-color: #0276FF;
    border-radius: 8px;
    border-style: none;
    box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    /*font-family: "RM Neue", sans-serif;*/
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    padding: 10px 21px;
    text-align: center;
    text-transform: none;
    transition: color .13s ease-in-out, background .13s ease-in-out, opacity .13s ease-in-out, box-shadow .13s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.btn:active {
    background-color: #006AE8;
}

.btn:hover {
    background-color: #1C84FF;
}

.btn.danger {
    background-color: #e62143;
}

.btn.danger:active {
    background-color: #c82333;
}

.btn.danger:hover {
    background-color: #bd2130;
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}