html {
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  overflow: hidden;
}
#WebName {
  text-align: center;
  margin: 10px auto;
}
#essays {
  height: 650px;
  width: 825px;
  margin: auto;
  text-align: center;
  border: 5px solid rgba(103, 1, 103, 0.3);
  border-radius: 15px;
  background-color: rgba(192, 5, 192, 0.2);
  box-shadow: 5px 6px rgb(103, 1, 103, 0.2);
}
#essays .essay {
  font-weight: 250;
  height: 58.4px;
  width: 811.6px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  background-color: rgba(122, 119, 122, 0.1);
  transition: box-shadow 0.2s ease;
}
#essays .essay:active {
  box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}
#essays .essay:hover {
  background-color: rgba(122, 119, 122, 0.2);
}
#essays div h2 {
  font-weight: 300;
  margin: 0;
}
#essays .bt {
  padding-top: 12px;
}
#essays .bt .clickNum {
  margin: auto 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(122, 119, 122, 0.1);
  transition: box-shadow 0.2s ease;
}
#essays .bt .clickNum:active {
  box-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}
#essays .bt .arrow {
  margin: auto 3px;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(255, 255, 255, 0);
}