canvas {
    border: black 2px solid;
    max-width: 100%;
}

.arrow-button {
	background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
	background-color: #77d42a;
	border-radius: 16px;
	border: 2px solid #000000;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
    padding: 10px 24px;
	text-shadow: 0px 1px 0px #aade7c;
}

.arrow-button:hover {
	background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
	background-color: #5cb811;
}

.arrow-button.arrow-horizontal {
	padding: 10px 17px;
}

.game-button {
    background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    background-color: #77d42a;
    border-radius: 28px;
    border: 2px solid #000000;
    cursor: pointer;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    padding: 7px 34px;
    text-shadow: 0px 1px 0px #aade7c;
}

@media (min-width: 501px) and (max-width: 600px) {
    .game-button {
        border-radius: 20px;
        font-size: 20px;
        padding: 5px 24px;
    }
}

@media (max-width: 500px) {
    .game-button {
        border-radius: 16px;
        font-size: 16px;
        padding: 4px 19px;
    }
}

.game-button:hover {
    background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
}

#again {
    display: none;
}

#arrowDown {
    margin: auto 10px auto 10px;
}

#arrowUp {
    margin: 14px auto 14px auto;
}

#instructions {
    text-shadow: 5px 5px 10px black;
    width: 100%;
}

@media (min-width: 820px) {
    #instructions {
        font-size: 1.8em;    
    }
}

@media (min-width: 768px) and (max-width: 819px) {
    #instructions {
        font-size: 1.7em;
    }
}

@media (min-width: 620px) and (max-width: 767px) {
    #instructions {
        font-size: 1.65em;
    }
}

@media (min-width: 565px) and (max-width: 619px) {
    #instructions {
        font-size: 1.5em;
    }
}

@media (min-width: 485px) and (max-width: 564px) {
    #instructions {
        font-size: 1.3em;
    }
}

@media (min-width: 445px) and (max-width: 484px) {
    #instructions {
        font-size: 1.2em;
    }
}

@media (min-width: 401px) and (max-width: 444px) {
    #instructions {
        font-size: 1.1em;
    }
}

@media (min-width: 375px) and (max-width: 400px) {
    #instructions {
        font-size: 1em;
    }
}

@media (max-width: 374px) {
    #instructions {
        font-size: 0.9em;
        width: 80%;
    }
}