body {
  background-image: url("wiggledark.png");
  color: teal;
  font-size: 1rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

@font-face {
  font-family: head;
  src: url(Telegraphem.otf);
}
main {
  width: 60%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main h3 {
  font-family: head;
}
main h2 {
  text-align: center;
}
main h1 {
  font-size: 6rem;
  text-align: left;
  padding: 0px;
  margin: 0px;
}
main article {
  background-color: white;
  border: teal 2px dashed;
  border-radius: 10px;
  padding: 10px;
}
main article details summary {
  border-bottom: teal solid 1px;
  text-align: left;
}
main article details {
  text-align: right;
}

.box {
  display: flex;
  padding: 10px;
  align-items: center;
}
.box img {
  width: 100px;
}
.box img:hover {
  rotate: 8deg;
  margin-left: 10px;
}
.box h3 {
  color: rgb(219, 32, 125);
}
.box em {
  border-bottom: 1px solid rgb(255, 126, 33);
}
.box .description {
  border-right: rgb(219, 32, 125) dashed 4px;
  border-top: rgb(219, 32, 125) dashed 4px;
  border-bottom: rgb(219, 32, 125) dashed 4px;
  padding-left: 40px;
}

.rhys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  align-items: center;
}
.rhys .description h3 {
  background-color: teal;
  padding: 5px;
  color: white;
}
.rhys .face {
  grid-row: span 2/span 2;
}
.rhys .face h3 {
  font-size: 2.3rem;
  text-align: right;
}

.links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(219, 32, 125);
  padding: 10px;
}
.links a {
  color: black;
  background-color: white;
  -webkit-text-decoration: dotted;
          text-decoration: dotted;
  border: rgb(219, 32, 125) 1px dotted;
  padding: 5px;
}
.links a:hover {
  border: teal 3px solid;
}/*# sourceMappingURL=summer2026.css.map */