/* HYPERION */
@font-face {
  font-family: "PexicoMicroRegular";
  src: url("/shrines/ai_art/style/PexicoMicroRegular/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/PexicoMicroRegular/font.woff") format("woff");
}
@font-face {
  font-family: "MultiTypeGamerGridDisplay";
  src: url("/shrines/ai_art/style/MultiTypeGamerGridDisplay/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/MultiTypeGamerGridDisplay/font.woff")
      format("woff");
}
@font-face {
  font-family: "QuarantypeSackrace";
  src: url("/shrines/ai_art/style/QuarantypeSackrace/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/QuarantypeSackrace/font.woff") format("woff");
}
@font-face {
  font-family: "AntapaniExtraBold";
  src: url("/shrines/ai_art/style/AntapaniExtraBold/font.woff2") format("woff2"),
    url("/shrines/ai_art/style/AntapaniExtraBold/font.woff") format("woff");
}
@font-face {
  font-family: "NowGrotesk";
  src: url("/shrines/ai_art/style/NowGrotesk/font.woff2") format("woff2"),
    url("/shrines/ai_art/style/NowGrotesk/font.woff") format("woff");
}

html {
  background-size: cover;
  background: linear-gradient(yellow 0%, yellow 40%, #c71585 100%);
}

body {
  display: flex;
  flex-direction: column;
  font-family: "AntapaniExtraBold";
  font-size: 17px;
}

nav ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}

a {
  color: #c71585;
  font-size: 24px;
}

a:hover {
  color: yellow;
  background-color: #c71585;
  font-size: 24px;
}

header,
main {
  display: flex;
}

header {
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: yellow;
}

header h1 {
  font-family: "QuarantypeSackrace";
  font-size: 120px;
}

header ul {
  text-align: right;
}

header a li {
  list-style-type: none;
}

main {
  border: 3px dotted #c71585;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #c71585;
  padding: 20px;
  justify-content: center;
}

.gallery p {
  width: 400px;
  text-align: left;
}

.gallery img {
  width: 200px;
  height: 200px;
}