#board{
    display:flex;
    height: 85vh;
    justify-content: center;
}


.snakeHead{
    border:1px solid black;
    box-sizing: border-box;
}

.snakeBody{
    background-color: green;
}
.apple{
    color:red;
}
#title{
    height:10vh;
    display:flex;
    justify-content: center;
}
#titleText{
    margin:0;
    padding:0;
}
body{
    margin:0;
    padding:0;
    background-color: rgb(155, 189, 220);
}
.row:nth-child(2n){
    background-color: rgb(74, 187, 100);
}
.row:nth-child(2n+1){
    background-color: rgb(44, 150, 69);
}

.row{
    height:fit-content
}

.modal{
    position:absolute;
    min-height:100vh;
    margin:0;
    padding:0;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    display:flex;
    justify-content: center;
    align-items: center;
}

.modalBody{
    text-align:center;
    background-color: white;
    font-size:xx-large;
    width:50%;
    padding:1.7em;
    padding-top:1em;
    border-radius:6px;
    box-shadow:2px 2px 2px 2px;
}

#closeModal{
    /* position:absolute; */
    border:none;
    background-color: white;
    text-align: right;
    font-size:xx-large;
    opacity:0.5;
}

#closeModal:hover, #share:hover, #repeat:hover, #settings:hover, #save:hover{
    opacity: 1;
    transform: scale(1.2);
    cursor:pointer;
    transition: transform 200ms;
}

#temp{
    text-align: right;
}

.hidden{
    visibility:hidden;
}

#titleText{
    font-weight: 700;
    margin-left:20%;
    margin-right:20%;
}
#backBtn{
    border:1px solid rgb(145, 143, 143);
    border-radius:50%;
    font-size:x-large;
    width:1.5em;
    height:1.5em;
}
#info{
    border:1px solid rgb(110, 178, 220);
    background-color: rgb(160, 208, 238);
    border-radius:50%;
    font-size:x-large;
    width:1.5em;
    height:1.5em;
}
button:hover{
    cursor: pointer;
}
#title{
    display:flex;
    width:100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    justify-content: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    height:10vh;
    font-size:xx-large;
}

#share, #repeat, #settings, #save{
    /* width:30%; */
    font-size:x-large;
    padding:0.4em;
    margin-right:1em;
    display: inline;
    border-radius:12px;
}

#share{
    border:2px solid darkgreen;
    background-color: lightgreen;
}

#repeat{
    border:2px solid darkred;
    background-color: red;
}

#settings{
    border:2px solid rgb(82, 79, 79);
    background-color: rgb(170, 163, 163);
}

#save{
    border:2px solid rgb(31, 15, 104);
    background-color: rgb(140, 134, 221);
}

.formpair{
    display:flex;
    flex-direction: column;
}

#inputs{
    display:flex;
    justify-content: space-between;
}

.myInput{
    size:100%;
    font-size: 0.8em;
    width:100%;
    margin-right:1em;
}