body {
    background: linear-gradient(
        to left top, 
        rgba(26, 65, 237, 0.8), 
        rgba(26, 65, 237, 0.2),
        rgba(26, 65, 237, 0.8)
        );
    background-attachment: fixed;
    font-family:Arial, Helvetica, sans-serif;
    align-content: center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    min-height: 90%;
}

.gamecontainer {
    display: grid;
    grid-template-columns: auto min-content ;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "head  head"
        "free  game"
        "menu  info";
    justify-content: center;
    gap: 0;
    background-color: white;
    color: rgba(5, 62, 49, 0.782);
    border: black solid 0.01em;
    border-radius: 1em;
    box-shadow: 10px 5px 5px black;
    justify-content: center;
    padding: 3em;
    margin: 3em;
    min-height: 90%;
}

.menu {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    grid-area: menu;
    width: 100px;
    margin: 3em;
    margin-right: 0;
}

.info-container {
    flex-direction: column;
    justify-content: center;
    margin: 0em;
    padding: 0.2em 1.2em 0.2em 1.2em;
}

.info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    border: black solid 0.01em;
    border-radius: 1em;
    box-shadow: 10px 5px 5px black;
    justify-content: center;
    padding: 0;
    margin: 0em 3em 1em 3em;
}

@media only screen and (max-width: 980px) {
    .main {
        width: 100%;
        height: 100%
    }
    .gamecontainer {
        display: grid;
        grid-template-columns: min-content;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "head"
            "game"
            "menu"
            "info";
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: white;
        color: rgba(5, 62, 49, 0.782);
        border: none;
        border-radius: 0em;
        box-shadow: none;
        justify-content: center;
        padding: 0em;
        margin: 0em;
        min-height: 100%;
    }
    .menu {
        display: flex;
        justify-self: center;
        flex-direction: row;
        justify-content: space-around;
        grid-area: menu;
        margin: 3em;
        width: 50%;
    }

    .info {
        grid-area: info;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: white;
        border: none;
        border-radius: 0em;
        box-shadow: none;
        justify-content: center;
        padding: 0;
        margin: 0em 0em 0.5em 0.5em;
    }  
}


.game {
    grid-area: game;
    display: grid;
    grid-template-columns: repeat(9, 3em);
    grid-template-rows: repeat(9, 3em);
    grid-template-areas: 
        "c00 c10 c20 c30 c40 c50 c60 c70 c80"
        "c01 c11 c21 c31 c41 c51 c61 c71 c81"
        "c02 c12 c22 c32 c42 c52 c62 c72 c82"
        "c03 c13 c23 c33 c43 c53 c63 c73 c83"
        "c04 c14 c24 c34 c44 c54 c64 c74 c84"
        "c05 c15 c25 c35 c45 c55 c65 c75 c85"
        "c06 c16 c26 c36 c46 c56 c66 c76 c86"
        "c07 c17 c27 c37 c47 c57 c67 c77 c87"
        "c08 c18 c28 c38 c48 c58 c68 c78 c88";
    background-color: white;
    border: black solid 0.01em;
    border-radius: 1em;
    box-shadow: 10px 5px 5px black;
    justify-content: center;
    padding: 2em;
    margin: 3em;
    width: 30em;
}

.sl  { grid-area: sl; }
.head { 
    grid-area: head; 
    font-size: 2em;
    text-align: left;
    margin: 0;
}






.cell {
    color: black;
    width: 100%;
    height: 100%;
    font-size: 20px;
    padding: 1px;
    margin: 0;
    border: 1px solid black;
    text-align: center;
}

.cell-input {
    width: 100%;
    height: 100%;
    font-size: inherit;
    background: inherit !important;
    color: inherit !important;
    text-align: center;
    padding: 0;
    margin: 0;
    border: 0;
}

.cell-input:focus {
    outline: none;
}

.black-cell {
    width: 100%;
    height: 100%;
    font-size: inherit;
    background-color: black;
    color: white;
    text-align: center;
    padding: 0;
    margin: 0;
    border: 0;
}

.cell-possibilities {
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: repeat(3,auto);
    background-color: inherit;
    color: inherit;
    width: 99%;
    height: 99%;
    font-size: 30px;
    padding: 0.5px;
    margin: 0;
    border: 0;
    text-align: center;
}

.possibility {
    text-align: center;
    font-size: 8px;
}

.menu-button-generic {
    margin: 0.5em;
    padding: 0.25em;
    font-size: 80%;
    border-radius: 1em;
    border-style: none;
/*     border-style: 1px none; */
    color: rgba(5, 62, 49, 0.782);
    box-shadow: 0.5em 0.2em 0.2em rgba(0,0,0,0.1); 
    background-color: rgb(255, 255, 255);
}

.menu-button {
    /* nothing to say so far */
    background-color: white;
}

.menu-button-generic:hover {
/*     border-style: none; */
    background-color: rgb(240, 245, 248);
    transform: translateY(-0.25em);
    transition: 0.2s;
}

.menu-button-generic:active {
    box-shadow: 0 0 0;
    transform: translateY(0.25em);
    transition: 0.2s;
    border-style: none;
}


.button-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mode-display {
    font-size: 1em;
    color: rgba(5, 62, 49, 0.782);
    margin: 0.2em 0.2em 3em 0.2em;
    font-family: inherit;
    text-align: center;
}



.info-headline {
    background-color: inherit;
}



.calc-info-container {
    display: none;
}

.play-info-container {
    display: none;
}

.help-info-container {
    display: none;
}

.setup-info-container {
    display: none;
}

.info-item {
    margin-bottom: 2em;
    border-radius: 1em;
    box-shadow: 10px 5px 5px grey;
}

.info-item:hover {
    box-shadow: 15px 10px 5px grey;
    /* transform: translateY(-0.5em);
    transition: 0.2s; */
}

.info-item-headline {
    padding-left: 0.75em;
    margin-right: 1em;
}

.info-item-text {
    padding-left: 1em;
    margin-right: 1em;
    font-size: 0.8em;
}

.info-menu-button {
    float: right;
    font-size: 65%;
    margin: -0.2em 0 0 0;
}

.info-preset-button-row {
    display: flex;
    flex-direction: row;
    justify-content: left;
    margin: 1em 2em 0.5em 2em;
}

.info-preset-button {
    font-size: 65%;
    margin: 0 -1em 0 0;
    box-shadow: -10px 5px 5px lightgrey;
}