﻿body, button {
    background-color:beige;
    font-family:Helvetica, Arial, sans-serif;
}
#container {
    margin-left:30vw;
}
#level {
    margin-bottom:10px;
    font-weight:bold;
}
#level::before {
    content: 'level ';
}
#game {
    position:absolute;
    background-color:lightgray;
    border-radius:20px;
    margin-left:-5vw;
    width:45vw;
    height:45vw;
}
#cell-container {
    width:40vw;
    height:40vw;
    margin:2.5vw;
    background-color:azure;
    border-radius:10px;
}
#cell-container td {
    position:absolute;
}
#buttons {
    margin-top:50vw;
}
button {
    width:12vw;
    height:60px;
    text-align:center;
    background-color:brown;
    border-radius:3px;
    border-color:transparent;
    font-size:25px;
    cursor:pointer;
}
button:hover{
    background-color:coral;
}
button:focus {
    outline:0 !important;
    background-color:lightcoral;
}
#rules {
    margin-top:10vw;
}
#player {
    background-color:green;
    margin:1vw;
    width:2vw;
    height:2vw;
    transition:top 0.3s, left 0.3s;
    border-radius:2px;
    position:absolute;
}
.wall {
    background-color:gray;
    width:4vw;
    height:4vw;
}
.bottom-left{
    border-bottom-left-radius:9px;
}
.bottom-right {
    border-bottom-right-radius:9px;
}
.top-left {
    border-top-left-radius: 9px;
}
.top-right {
    border-top-right-radius:9px;
}
#goal {
    background-color:red;
    border-radius:3px;
    width:3vw;
    height:3vw;
}
#mask {
    position:absolute;
    border-radius:20px;
    margin-left:-5vw;
    width:45vw;
    height:45vw;
    transition:opacity 0.5s;
    opacity:0;
    z-index:2;
    font-size:3em;
    padding:2.5vw;
    text-align:center;
    background-color:lightyellow;
}
a {
    color: black;
    text-decoration: none;
}
a:visited{
    color:none;
}