@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Grandstander';
    src: url('./fonts/Grandstander-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Space Mono';
    src: url('./fonts/SpaceMono-Bold.ttf');
    font-weight: bold;
}

html {
    font-size: 14px;
}

body {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    min-width: 980px;
}

h1, h2 {
    font-family: 'Grandstander', cursive;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.6rem;
}

#title {
    font-size: 35px;
    text-align: center;
    margin: 40px;
}

#flex-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#description {
    width: 300px;
    min-width: 200px;
    margin: 0 25px;
}

#game-info {
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}

#game-info h1 {
    font-size: 45px;
    margin: 10px 0;
}

#timer {
    font-family: 'Space Mono', monospace;
    font-weight: bold;
}

#scores {
    text-align: left;
    width: 300px;
    min-width: 200px;
    margin: 75px 25px;
}

#scores h2 {
    font-size: 30px;
}

#toggle-sound {
    cursor: pointer;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    background-color: rgb(190, 190, 190);
    font-weight: bold;
    color: black;
    
    /* no highlighting */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
}

.controls p {
    font-size: 1.5rem;
}

.field-grid {
    display: grid;
    gap: 0 0;
    margin: 0 25px;;
}

.grass {
    background-color: green;
}

.hole {
    background-color: black;
}

.path {
    background-color: rgb(0, 80, 0);
}

.player {
    background-color: cyan;
}

.thing {
    background-color: green;
}