/*Center and stlying for main menu*/
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

body {
  background:orange;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*Removal of default link effects*/
a:link{
  color: orange;
  text-decoration: none;
}

a:visited{
  color: orange;
  text-decoration: none;
}

a:hover {
  color: white;
}

#logo {
  display: block;
  position:relative;
  bottom:760px;
  right:300px;
  width:300px;

}

#menu {
  width:0px;
  height:0px;
  border-left: 300px solid transparent;
  border-right:300px solid transparent;
  border-top: 300px solid transparent;
  position:relative;
  margin:auto;
  top:5px;
  left:2px;
}

#newGame {
  position:relative;
  bottom:930px;
  right:300px;
  height:50px;
  width:600px;
  background:#006680;
  text-align:center;
  font-size:30px;
  background-size: 1px 300%;
 -webkit-transition:0.5s;
  transition:0.5s;
  color:orange;
  font-family:shadows into light;
  cursor:pointer;
}


#newGame:hover {
  background:black;
  color:white;
  -webkit-transform:rotate(-1deg);
  transform:rotate(-2deg);
}

#newGame p {
  position:relative;
  top:2px;
  right:4px;
}

#rules {
  height:50px;
  width:500px;
  background:#006680;
  position:relative;
  bottom:925px;
  right:240px;
  text-align:center;
  font-size:30px;
  font-family:shadows into light;
  color:orange;
  -webkit-transition:0.5s;
  transition:0.5s;
  cursor:pointer;
}

/*mouse over effect for menu*/
#rules:hover {
  background:black;
  color:white;
  -webkit-transform:rotate(-2deg);
  transform:rotate(-2deg);
}

#rules p {
  position:relative;
  top:0px;
  right:9px;
}

#mainMenu {
  height:50px;
  width:500px;
  background:#006680;
  position:relative;
  bottom:925px;
  right:240px;
  text-align:center;
  font-size:30px;
  font-family:shadows into light;
  color:orange;
  -webkit-transition:0.5s;
  transition:0.5s;
  cursor:pointer;
}

/*mouse over effect for menu*/
#mainMenu:hover {
  background:black;
  color:white;
  -webkit-transform:rotate(-2deg);
  transform:rotate(-2deg);
}

#mainMenu p {
  position:relative;
  top:0px;
  right:9px;
}

#howTo {
  height:50px;
  width:500px;
  position:relative;
  bottom:925px;
  right:240px;
  text-align:center;
  font-size:40px;
  font-family:shadows into light;
}

/*Responsive canvas for main game*/
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#collisionCanvas{
  opacity: 0;
}