*{
    font-family: "Courrier New", Courrier, monospace;
}

body {
    /*background-color: purple;*/
    height: 96vh;
    width: 90vw;
    overflow: hidden;
    display: grid;
    grid-row-gap: 5vh;
    grid-template-columns:  10vw 10vw 55vw 15vw;
    grid-template-rows: 10vh 65vh 5vh;
    margin-bottom: 2vh;
    margin-top: 2vh;
    margin-left: 5vw;
    margin-right: 5vw;
}

.center-box {
    /*background-color: blue;*/
}

.logo {
    grid-column: 1 / 3;
    grid-row: 1 / 2;

    font-weight: bold;
}

.menu {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.game-modes {
    display: flex;
    flex-wrap: wrap;
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

a {
    color: black;
}

.center-box {
    grid-column: 2 / 4;
    grid-row: 2 / 3;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr 2fr;
    grid-row-gap: 3vh;
    align-items: center;
    justify-items: center;
}

.entry-bar {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
}

.entry-bar input {
    width: 100%;
}

.links {
    justify-self: center;
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.current-mode div {
    display: none;
}

.goal {
    font-size: 280%;
    font-weight: bold;
    text-align: center;
}

.logo :hover {
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.controls {
    display: flex;
}

.controls button {
    font-size: 170%;
}

button small {
    font-size: 50%;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}