.open-sans-regular {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-regular-italic {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-semibold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-semibold-italic {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.open-sans-bold-italic {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  font-variation-settings:
    "wdth" 100;
}

.domine-regular {
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.domine-bold {
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 2rem;
  display: grid;
  place-content: start center;
  gap: 2rem;
  min-height: 100vh;
  background-image: conic-gradient(
    at 125% 50%,
    #b78cf7,
    #ff7c94,
    #ffcf0d,
    #ff7c94,
    #b78cf7
  );
}

/* body {width: 100%; margin: 30px 0;} */

body, html {font-size: 16px; line-height: 1.5;}

.wrap {padding: 0 30px;}

h1 {margin: 0; font-size: 40px; line-height: 1.2;}
h2 {margin: 0 0 1em; font-size: 22px; line-height: 1;}
p {margin: 0;}

a.new {color: #009933;}

a {color: #0066cc;}

#quick, #images, #links {
  border-collapse: collapse;
}

#quick td, #quick th, #images td, #images th, #links td, #links th {
  border: 1px solid #ddd;
  padding: 8px;
}

#images tr:nth-child(even), #links tr:nth-child(even){
  background-color: #f2f2f2;
}

#quick th, #images th, #links th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #000000;
  color: white;
}

.button {
  cursor: pointer;
  font-size: 1.5rem;
  font-family: inherit;
  font-weight: 700;
  color: hsl(320, 40%, 40%);
  background-color: hsl(349 100% 95%);
  padding: 0.75em 1.25em;
  border: 0;
  border-radius: 1.25rem;
}

.glow-effect {
  --glow-line-color: #fff;
  --glow-line-thickness: 2px;
  --glow-line-length: 20px;
  --glow-blur-color: #fff;
  --glow-blur-size: 5px;
  --glow-offset: 0px;
  --animation-speed: 1200ms;
  /* do not change, used for calculations */
  --container-offset: 100px;
  position: relative;
}

.glow-container {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--container-offset) / -2);
  width: calc(100% + var(--container-offset));
  height: calc(100% + var(--container-offset));
  opacity: 0;
  /* outline: 3px solid blue; */
}

.glow-blur,
.glow-line {
  width: calc(100% - var(--container-offset) + var(--glow-offset));
  height: calc(100% - var(--container-offset) + var(--glow-offset));
  x: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
  y: calc((var(--container-offset) / 2) + calc(var(--glow-offset) / -2));
  /* rx: 1.25rem; */
  fill: transparent;
  stroke: black;
  stroke-width: 5px;
  stroke-dasharray: var(--glow-line-length) calc(50px - var(--glow-line-length));
}

.glow-effect:is(:hover, :focus) :is(.glow-line, .glow-blur) {
  stroke-dashoffset: -80px;
  transition: stroke-dashoffset var(--animation-speed) ease-in;
}

.glow-line {
  stroke: var(--glow-line-color);
  stroke-width: var(--glow-line-thickness);
}

.glow-blur {
  filter: blur(var(--glow-blur-size));
  stroke: var(--glow-blur-color);
  stroke-width: var(--glow-blur-size);
}

.glow-effect:is(:hover, :focus) .glow-container {
  animation: glow-visibility ease-in-out var(--animation-speed);
}

@keyframes glow-visibility {
  0%,
  100% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
}