/* CRONOS and HOME PAGE */

body {
  background-color: black;
  color: black;
  font-size: 18px;
}

h1 {
  font-family: "MultiTypeGamerGridDisplay";
}

header h1 {
  position: absolute;
  z-index: 4;
  text-transform: uppercase;
}

#automatic {
  position: absolute;
  left: 186px;
  top: 292px;
  transform: rotate(2deg);
}

#internet {
  position: absolute;
  left: 195px;
  top: 355px;
  transform: rotate(-1deg);
}

#portfolio {
  position: absolute;
  left: 177px;
  top: 416px;
  transform: rotate(-3deg);
}

.rectangle {
  height: 350px;
  width: 350px;
  border: 0px;
}

#yellow {
  background-color: yellow;
  position: absolute;
  left: 150px;
  top: 250px;
  z-index: 3;
}

#red {
  background-color: red;
  transform: rotate(70deg);
  position: absolute;
  left: 350px;
  top: 280px;
}

#blue {
  background-color: blue;
  transform: rotate(14deg);
  position: absolute;
  left: 300px;
  top: 100px;
}

#hyperion a img {
  height: 260px;
  position: absolute;
  left: 332px;
  top: 130px;
}

#hyperion a img:hover {
  box-shadow: 15px 15px 15px black;
  translate: -7px -14px;
}

#oceanus a img {
  height: 170px;
  position: absolute;
  left: 100px;
  top: 100px;
}

#oceanus a img:hover {
  box-shadow: 15px 15px 15px red;
  translate: -7px -14px;
}

#cronos a img {
  height: 660px;
  position: absolute;
  left: 500px;
  top: 100px;
  z-index: -1;
}

#cronos a img:hover {
  box-shadow: 14px 25px 13px yellow;
  translate: 21px 22px;
}

#rhea a img {
  height: 260px;
  position: absolute;
  left: 380px;
  top: 500px;
}

#rhea a img:hover {
  box-shadow: 14px 25px 13px blue;
  translate: 21px 22px;
}

#dalle {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

#dalle a img {
  height: 170px;
  cursor: crosshair;
}

#dalle a span {
  position: absolute;
  right: 50px;
  bottom: 100px;
  z-index: 100;
  text-transform: uppercase;
  font-family: "RubikBrokenFax";
  font-size: 32px;
  color: yellow;
}

#dalle a span:hover {
  filter: drop-shadow(4px 4px white);
  cursor: pointer;
}

#skiplink {
  display: none;
}

#skiplink:focus {
  display: block;
}

@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");
}

@font-face {
  font-family: "VelodromaBasicWide";
  src: url("/shrines/ai_art/style/VelodromaBasicWide/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/VelodromaBasicWide/font.woff") format("woff");
}

@font-face {
  font-family: "VelodromaBasicWide";
  src: url("/shrines/ai_art/style/VelodromaBasicWide/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/VelodromaBasicWide/font.woff") format("woff");
}

@font-face {
  font-family: "RubikBrokenFax";
  src: url("/shrines/ai_art/style/RubikBrokenFax-Regular.ttf");
}