*{
 padding:0;
 margin:0;
 box-sizing: border-box;
 color: lightgrey;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
  overflow: hidden;
}
.container{
  height:100vh;
  width:100vw;
  display:flex;
  justify-content: center;
  padding: 7%;
  background-color: rgb(1, 1, 54);
  overflow: hidden;
  background-image: url('../material/starBackground.jpg');
}

p span{
  background-color: black;
}

section{
  width:80%;
  height:80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 3.5em;
  padding: 3%;
  background-color: rgba(0, 0, 0, 0.507);
}
 h1, p, div{
  width: 100%;
  text-align: center;
}
p{
 font-size: 60%;
}

#Intro p{
 height: 14%;
}
#instructions{
 display:flex;
 flex-flow: row nowrap;
}

#instructions div button{
  margin-top: 60%;
  height: 17%;
  border-radius: 50%;
  width: 30%;
  height: 17%;
}
#instructions p{
  margin: 5% 0 5% 0;
}

button{
  border: black solid 1px;
  background-color: rgb(34, 148, 158);
  width: 25%;
  height: 35%;
  border-radius: 30px;
  
}

button:hover{
  border: rgb(248, 237, 172) solid 2px;
  background-color: rgb(93, 210, 221);
  width: 25%;
  height: 35%;
  border-radius: 30px;
  margin: 0 3%; 
}

button span{
  color: black;
  font-weight: bold;
  font-size: 2em;
  display:block;
  text-align: center;
  
}

button:hover span{
  color:rgb(248, 237, 172);
  font-weight: bold;
  font-size: 100%;
  display:block;
  text-align:center;
}

#buttonsIntro{
 display: flex;
 height: 30%;
 flex-direction: column;
}
#buttonsIntro button{
display: flex;
margin: 2% 37%;
text-align: center;
justify-content: center;
}


#canvas-wraper{
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-content: center;
  
}

#Death h1{
  margin-top: 15%;
}