:root {
  --background: hsl(264deg, 11%, 9%);
  --text3: hsl(297deg, 43%, 65%);
  --text2: hsl(306deg, 55%, 59%);
  --text: hsl(310deg, 60%, 98%);
  font-family: sans-serif;
}

body {
  background: var(--background);
  color: var(--text);
}
h2,
h1 {
  color: var(--text3);
}
a {
  color: var(--text2);
  text-decoration: underline;
}
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.webrings {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main {
  margin-top: 5rem;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
  max-width: 800px;
  min-width: 300px;
}
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.buttons > a {
  height: 31px;
}
.bottom {
  margin: 1em auto;
}
.links {
  display: flex;
  flex-flow: row wrap;
}
.links > p {
  width: 100%;
  margin-top: 0;
}
@media screen and (min-width: 42em) {
  .links > p {
    width: 50%;
  }
}
#prideflag {
  position: fixed;
  top: 0;
  right: 0;
  width: 120px;
  transform-origin: 100% 0%;
  transition: transform 0.5s cubic-bezier(0.32, 1.63, 0.41, 1.01);
  z-index: 8008135;
}
#prideflag:hover {
  transform: scale(110%);
}
#prideflag:active {
  transform: scale(110%);
}
#prideflag * {
  pointer-events: all;
}