body{
    min-height: 100vh;
    font-family: 'GameOverRegular'; 
    background-color: #73ce81;
}

section.wrapper{
    text-align: center;
}

#the_canvas {
    display: inline;
    outline: 3px solid rgb(54, 132, 65);
    max-height: 70vh;
    max-width: 100vw;
}

#name-form {
    margin-left: 35%;
}

#start-game {
    background-color: rgb(27, 165, 87);
    border-color: rgb(227, 233, 227);
    border-radius: 20px;
    color: white;
}

#starting-page {
    text-align: center;
    margin-top: 20px;
}

#starting-page button {
    color: rgb(255, 255, 255);
    font-size: 24px;
    padding: 10px 20px;
    border-color: white;
    border-style: outset;
    border-radius: 15px;
    font-family: 'Italic'; 
}

#starting-page button:hover {
    background-color: #4daa45;
}


.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}

.instructions-content {
    background-color: rgb(38, 133, 89);
    padding: 20px;
    padding-top: 1px;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin-left: 25%;
   
}

button {
    background-color: #43af5a;
    color: white;
    font-size: 19px;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

button:hover {
    background-color: #45a049;
}

#main-header{
    padding: 5px;
    text-align: center;
    font-style: italic;
    color: green;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.button {
    background-color: rgb(93, 153, 93); 
    border: none;
    box-shadow: 0 9px#41724d;
    padding: 30px;
    text-align: center;
    font-size: 28px;
    }
    
 .button:hover {
 background-color: #3ea374;
 }
    
.button:active {
 box-shadow: 0 5px #3D3D3D;
 transform: translateY(5px);
}
    
 .pressed{
 box-shadow: 0 5px #3D3D3D;
 transform: translateY(5px);    
}
    
 .red, .green, .blue, .yellow {
color: black;
}
    
 .round {
 border-radius: 50%;
 }

#game-over {
   text-align: center;
   padding-top: 50px;
   font-size: 50px;
   color: white;
}

#ending-start {
    text-align: center;
}

#win {
    color: white;
    text-align: center;
    padding-top: 10%;
}

#final-score {
    color: white;
    text-align: center;
}

#end-score {
    color: white;
    text-align: center;
}