h1 {
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

#main {
    width: 800px;
    margin-left: auto ;
    margin-right: auto ;
}

#canvas {
    border:8px solid #c3c3c3;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#gameArea {
    margin-top: 75px;
}

#left-pane {
    float: left;
}

#right-pane {
    width: 248px;
    float: left;
}

#right-pane div {
    margin: 10px;
}

.settingsClose {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.settingsClose:hover,
.settingsClose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.settingsModalContent {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.helpClose {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.helpClose:hover,
.helpClose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.helpModalContent {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatebot;
    animation-duration: 0.4s
}

@-webkit-keyframes animatebot {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@keyframes animatebot {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}