#mycanvas {
  position: absolute;
  width: 100%;
  z-index: 0;
}

#main-div {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* background: rgba(231, 229, 229, 0.34); */
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
}

#button-div {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#main-buttons {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  margin-top: 20px;
  margin-right: 40px;
  border-radius: 20px;
  /* width: 100%; */
}

button {
  padding: 10px 20px 10px 20px;
  text-align: center;
}


.unselected {
  color: white;
 
  background: rgb(24, 46, 145);
}

.unselected:hover {
  padding: 10px 20px 10px 20px;
  text-align: center;
  background: rgb(39, 72, 163);
}

.selected {
  color: rgb(24, 46, 145);
  background: white;
}

#water-cycle {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
#carbon-cycle {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

#descriptions-container {
  display: flex;
  /* justify-content: center; */
}

.description {
  display: flex;
  align-content: center;
  text-align: center;
  width: 250px;
  /* height: 200px; */
  border: 3px solid rgba(0, 0, 0, 0.589);
  border-radius: 5px;
  padding: 20px;
  background: rgba(231, 229, 229, 0.54);
  position: absolute;
  
  
}

.hidden {
  display: none;
}

#smoke {
  left: 25%;
  top: 20%;
  animation: sliderLeft 2s;
}


@keyframes sliderLeft{
  0% {
    left: -30%;
  }
  100% {
    left: 25%;
  }
}


#start-carbon {
  left: 30%;
  top: 20%;
  animation: sliderMiddle 2s;
}
#start-water {
  left: 30%;
  top: 20%;
  animation: sliderMiddle 2s;
}

@keyframes sliderMiddle{
  0% {
    top: -20%;
  }
  100% {
    top: 20%;
  }
}

#cow {
  /* position: relative; */
  left: 50%;
  top: 50%;
  /* bottom: 0; */
  animation: sliderBottom 2s;
}

@keyframes sliderBottom{
  0% {
    top: 120%;
  }
  100% {
    top: 50%;
  }
}

.learn-more {
  text-decoration: underline;
  color: rgb(2, 2, 172);
}

#tree {
  right: 10%;
  top: 40%;
  animation: sliderRight 2s;
}

@keyframes sliderRight{
  0% {
    right: -30%;
  }
  100% {
    right: 10%;
  }
}

.footer {
  display: flex;
  /* flex-direction: row; */
  /* align-items: flex-end; */
  justify-content: flex-start;
  top: 0;
  position: fixed;
  width: 20%;
  padding: 10px;
}

.footer-name {
  color: white;
  padding-right: 10px;
}

.github-logo {
  width: 30px;
}

.footer-person {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* padding: 0px 10px 0px 10px; */
}

.footer-icons {
  padding-top: 5px;
}