@import url("pico.min.css");

html,
body {
  height: 100%;
}

/* flexboxes, buttons, and other components */

.box {
  display: flex;
  justify-content: safe center;
  align-items: safe center;
  height: 100%;
  gap: 5%;
}

details.item {
  margin-bottom: 3%;
}

.title {
  width: 45%;
  text-align: right;
  margin-left: 5%;
  max-height: 90%;
}

.content {
  width: 55%;
  text-align: left;
  margin-right: 5%;
  max-height: 90%;
}

article {
  padding: 3%;
}

summary.secondary {
  border: none;
  background-color: rgb(19, 22.5, 30.5);
}

/* font sizes and colors */

.inherit p,
a,
h1,
h2,
h3,
h4,
h5 {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  color: inherit;
}

:root {
  --font-scale-absolute: 2.3vmin;
  --font-scale-relative: 22px;
  --font-scale-h1: 2.5;
  --font-scale-h2: 2;
  --font-scale-h3: 1.5;
  --font-scale-h4: 1.25;
  --font-scale-h5: 1.15;
  --font-scale-p: 1;
  --font-scale-p-max: 1.2;
  --font-scale-p-min: 0.9;
  --font-scale-resize: 0.9;
}

h1 {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-h1),
      var(--font-scale-relative) * var(--font-scale-h1));
}

h2 {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-h2),
      var(--font-scale-relative) * var(--font-scale-h2));
}

h3 {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-h3),
      var(--font-scale-relative) * var(--font-scale-h3));
}

h4 {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-h4),
      var(--font-scale-relative) * var(--font-scale-h4));
}

h5 {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-h5),
      var(--font-scale-relative) * var(--font-scale-h5));
}

body,
p,
input {
  font-size: min(var(--font-scale-absolute), var(--font-scale-relative));
}

.min p {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-p-min),
      var(--font-scale-relative) * var(--font-scale-p-min));
}

.max p {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-p-max),
      var(--font-scale-relative) * var(--font-scale-p-max));
}

a.resize {
  font-size: min(var(--font-scale-absolute) * var(--font-scale-resize),
      var(--font-scale-relative) * var(--font-scale-resize));
}

.final {
  display: inline;
}

/* links */

flicker .second {
  display: none;
}

flicker:hover .first {
  display: none;
}

flicker:hover .second {
  display: inline;
}

a {
  color: rgb(188, 246, 255);
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration-line: underline;
}

/* other */

audio {
  bottom: 0;
  position: fixed;
  right: 0;
}

nav {
  margin: 0 5% 0 5%;
  height: 10%;
}

/* puzzle colors */

.ethereal-color {
  background: #f08080;
  background: linear-gradient(90deg,
      rgba(240, 128, 128, 1) 0%,
      rgba(135, 206, 250, 1) 33%,
      rgba(127, 255, 212, 1) 67%,
      rgba(222, 184, 135, 1) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}