body{
    background-image: url("https://img.freepik.com/free-photo/white-crumpled-paper-background-simple-diy-craft_53876-128183.jpg?size=626&ext=jpg");
    background-size:cover;
}

#title{
    height:13vh;
    margin:0;
    padding:0;
    text-align: center;
    font-family: 'Syne Mono', monospace;
}

.tile{
    border:1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:10vh;
    font-weight: 700;
}

.row{
    display: flex;
}
.tile:nth-child(1){
    border-left: none;
}
.tile:nth-last-child(1){
    border-right: none;
}
.toprow .tile{
    border-top: none;
}
.bottrow .tile{
    border-bottom: none;
}
#board{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.highlight{
    background-color: rgba(255, 0, 0, 0.557);
}
.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;
}

#share, #repeat{
    /* 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;
}

.hidden{
    visibility:hidden;
}

form{
    width:fit-content;
    display:inline;
}

#titleText{
    font-weight: 700;
}

#worlde{
    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:15vh;
    box-sizing: border-box;
    font-size:xx-large;
}

#closeModal{
    /* position:absolute; */
    border:none;
    background-color: white;
    text-align: right;
    font-size:xx-large;
    opacity:0.5;
}
body{
    margin:0;
    padding:0;
}
#closeModal:hover, #share:hover, #repeat:hover{
    opacity: 1;
    transform: scale(1.2);
    cursor:pointer;
    transition: transform 200ms;
}

#temp{
    text-align: right;
}

.topRow>.tile{
    border-top: none;
}

.bottRow>.tile{
    border-bottom: none;
}

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

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

#sizeLabel{
    font-size: 20px;
}

#inpSize{
    background-color: aliceblue;
    border:2px solid rgb(9, 9, 78);
    border-radius: 10px;
    font-size: large;
}