/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #00040B;
  background-size: cover;
  color: black;
  font-family: Verdana;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p, h1, h2, h3, h4, ol, ul, li {
  color: white;
  text-align: center;
}

.introtext {
  text-align: center;
}

.fih {
  text-align: center;
  letter-spacing: 15px;
  color: white;
}

.alolaarc {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alolaarc:hover {
  transform: scale(1.2);
}

.alolabanner {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alolaicon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 25%;
}

.horace {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
}

.horace:hover {
  transform: scale(1.2);
}

.spinelle {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.spinelle:hover {
  transform: scale(1.2);
}

.ryuki {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
}

.ryuki:hover {
  transform: scale(1.2);
}

.horacepage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  height: 350px;
}

.row {
  display: flex;
}

.column {
  flex: 20%;
  padding: 3px;
  margin-left: auto;
  margin-right: auto;
}

.horacescyther {
  width: 75%;
  height: 75%;
}

.horacelokix {
  width: 75%;
  height: 75%;
}

.horaceyanma {
  width: 75%;
  height: 75%;
}

.horacescyther:hover {
  transform: scale(1.2);
}

.horacelokix:hover {
 transform: scale(1.2);
}

.horaceyanma:hover {
 transform: scale(1.2);
}

.spinellepage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  height: 350px;
}

.spinellesableye {
  width: 75%;
  height: 75%;
}

.spinellegreavard {
  width: 75%;
  height: 75%;
}

.spinellefurfrou {
  width: 75%;
  height: 75%;
}

.spinellesableye:hover {
  transform: scale(1.2);
}

.spinellegreavard:hover {
 transform: scale(1.2);
}

.spinellefurfrou:hover {
 transform: scale(1.2);
}

.ryukipage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  height: 350px;
}

.ryukipawmot {
  width: 75%;
  height: 75%;
}

.ryukizigzagoon {
  width: 70%;
  height: 70%;
}

.ryukitandemaus {
  width: 75%;
  height: 75%;
}

.ryukipawmot:hover {
  transform: scale(1.2);
}

.ryukizigzagoon:hover {
 transform: scale(1.2);
}

.ryukitandemaus:hover {
 transform: scale(1.2);
}