html {
  height: 100%;
  width: 100%;
  text-align: center;

}

body {
  margin: 20px;
  padding: 20px;
  font-family: "Kantumruy Pro", sans-serif;
  font-size: 22px;
  color: black;
  background-color: #FFA07A;
}

div {
  width: 85%;
  height: 100%;
  padding: 20px;
  margin: auto;
  background-color: white;
  border: 2px solid black;
  text-align: center;
}


#matchBox {
    background-color: #DEB887;
}

#flashBox {
    background-color: #DEB887;
}

#flashcards{
  width: 150px;
  height: 100px;
  background-color: white;
}

/*buttons*/
.button {
  border: 2px solid black; 
  border-radius: 5px;
  color: black; 
  padding: 14px 28px; 
  cursor: pointer; 

}

.back {background-color: purple;}
.back:hover {background-color: orchid;}

.nature {background-color:  #2E8B57;} 
.nature:hover {background-color: green;}
.flash-nat{ background-color: green;}
.match-nat{ background-color: green; }


.cloth {background-color: #DC143C;}
.cloth:hover{background-color: red;}
.flash-cloth{ background-color: red;}
.match-cloth{ background-color: red;}

.body {background-color: bisque;}
.body:hover{background-color: beige;}
.flash-body{ background-color: bisque;}
.match-body{ background-color: bisque;}

.know:hover{background-color: gray;}
.dont-know:hover{background-color: gray;}

.enter{
  padding: 5px 10px; 
  background-color: rgb(142, 141, 141);
}
.enter:hover{background-color: rgb(174, 170, 170);}



/* Pictures*/