body {
  background-image: url('../assets/jungle_tree.png');

}

.title {
  border-radius: 25px;
  background: #6d876da7;
  box-shadow: 0px 0px 14px 75px #6d876da6;

}

.modal-title {
  border-radius: 25px;
  background: #6d876da7;
  box-shadow: 0px 0px 14px 10px #6d876da6;

}


.div1 {

  display: flex;
  justify-content: center;
  margin-top: 5px;
}

#canvas{
  border: 1px solid grey;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  display: block;
  background-color: #F5F5F5;
  /* background-image: url('../assets/jungle3.jpeg'); */
  background-image: url('../assets/jungle5.jpg');
  /* background-position: bottom;
  background-size:100% 100%;
  background-repeat: no-repeat; */

}

#health{
  color:#d5ceb4;
  font-size: 30px;
  font-weight: bold;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}
#time{
  color:#d5ceb4;
  font-size: 30px;
  font-weight: bold;
  /* text-align: center; */
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}

#modal{
  /* color:white; */
  color:#d5ceb4;
  text-shadow: 2px 2px 4px #000000;
  font-size: 35px;
  /* font-weight: bold; */
  position:fixed;
  left:-15px;
  top:-15px;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  /* display: none; */
  /* padding:0px; */
  font-family:sans-serif;
  justify-content: center;
  align-items: center;
  width:110%;
  height: 110%;
  z-index: 1;

}

.modal-text{
  width:50%;
  background-color: #deb78747;
  border-radius: 35px;
  padding: 120px;
}

#loss-modal{
  color:#d5ceb4;
  text-shadow: 2px 2px 4px #000000;
  font-size: 50px;
  position:fixed;
  left:-15px;
  top:-15px;
  background-color: rgba(0, 0, 0, 0.7);
  /* display: flex; */
  display: none;
  font-family:sans-serif;
  justify-content: center;
  align-items: center;
  width:110%;
  height: 110%;
  z-index: 1;
}
#modal-time{
  color:#d5ceb4;
  text-shadow: 2px 2px 4px #000000;
  font-size: 50px;
  position:fixed;
  left:-15px;
  top:-15px;
  /* background-color: rgba(0, 0, 0, 0.7); */
  display: flex;
  /* display: none; */
  font-family:sans-serif;
  justify-content: center;
  align-items: center;
  width:110%;
  height: 110%;
  /* z-index: 1; */
}

.title {
  display: block;
  margin: auto;
  padding: 20px;
}

.links {
  list-style-type: none;
  font-size: 30px;
  display: flex;
  /* flex-wrap: wrap; */
  width: 300px;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  margin:auto;
  text-decoration: none;
  color: white;
  /* text-shadow: 4; */
  /* color: white; */
  text-shadow: 2px 2px 4px #000000;
  border-radius: 25px;
  box-shadow: 0px 0px 14px 5px #EEE;
}

a {
  text-decoration: none;
  color: #E0E0E0;
}

.links li {
  padding: 10px;
  border-radius: 50px;
}
.links li:hover {
  background-color: #b9bf98;
  /* transform: rotate(90deg); */
  /* transition: t */
}

.linkedin-link:hover {
  background-color: green;
}

.links li:active {
  background-color: white;
  border: 1px solid #6dccfb;
  padding: 9px;
  box-shadow: 0px 0px 3px 3px #6dccfb;
}

.instructions {
width: 200px;
float: right;
position: fixed;
right: 25px;
top:30px;
border: 3px solid #6d876da6;
box-shadow: 0px 0px 24px 20px #6d876d;
/* justify-content: center; */
text-shadow: 2px 2px 4px #000000;
padding:15px;
border-radius: 15px;
background-color: #6d876da6;
}

.instructions-title {
  color: white;
  text-shadow: 4;
  text-decoration: underline;
  font-size: 30px;
  font-family: sans-serif;
}

.instructions-body {
  color: white;
  text-shadow: 4;
  font-size: 30px;
  font-family: sans-serif;
  width:200px;
  text-shadow: 2px 2px 4px #000000;
}