@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap");
body {
  background-color: #212224;
  color: #fff;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.title {
  /* font-family: 'Amatic SC', cursive; */
  font-family: "Fredericka the Great", cursive;
  font-size: 60px;
  user-select: none;
}

.toggle {
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
}
#light:hover {
  color: yellow;
}

.catty-name {
  color: #fff;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.catty-name:hover {
  color: #fff;
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
  font-size: 70px;
}
.main {
  margin-bottom: 15px;
  margin-top: 20px;
}
.card-title {
  font-family: "Sacramento", cursive;
  font-size: 60px;
}
.card-list {
  /* font-family: 'Sacramento', cursive; */
  font-size: 30px;
  list-style: none;
}
.card-list li:before {
  content: "😸";
  margin-left: -10px;
  margin-right: 10px;
}

.catty {
  max-height: 200px;
  object-fit: contain;
  /* transform: rotate(20deg); */
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
}
.catty:hover {
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
  -webkit-transform: rotate(350deg);
  -moz-transform: rotate(350deg);
  -o-transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  transform: rotate(360deg);
}
.catty {
  max-height: 200px;
  object-fit: contain;
  /* transform: rotate(20deg); */
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
}
.info {
  text-align: justify;
  line-height: 2em;
  max-width: 900px;
  font-size: 18px;
}

.btn {
  border-radius: 50px;
  width: 150px;
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
}
.btn:hover {
  width: 200px;
  transition: 0.7s;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -ms-transition: 0.7s;
  -o-transition: 0.7s;
}