html,
body {
  margin: 0;
  color: #fff;
  background: no-repeat center / cover url(/assets/image/bg.jpg), var(--theme-color);
  --theme-color: #002fa7;
  --theme-color-dark: #002480;
  --theme-color-light: #0048ff;
  --cubic-j-theme-color-red: #d6336c;
  --cubic-j-theme-color-purple: #862e9c;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-family: var(--font-sans);
}

a,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Times New Roman", Times, serif;
  font-family: var(--font-serif);
}

.brand-text {
  color: var(--theme-color);
  text-shadow: 0 0 0.25em #fff;
}

.page {
  width: calc(100vw - 10vmin);
  height: calc(100vh - 10vmin);
  padding: 5vmin;
  --opacity: 0.5;
  background-color: #002fa780;
  -webkit-backdrop-filter: blur(1vmin);
  backdrop-filter: blur(1vmin);

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.update {
  padding: 2.5vmin;
  border: #fff8 5vmin solid;
  width: calc(100vw - 15vmin);
  height: calc(100vh - 15vmin);
  display: block;
}

.cubic-j.page {
  background-image: linear-gradient(to top, #862e9c80, #d6336c80);
}

:link {
  color: #20c997;
  transition: color 150ms;
  text-decoration: none;
}

:link::before {
  content: "🔗";
}

:visited {
  color: #cc5de8;
}

:link:hover {
  color: #96f2d7;
}

:visited:hover {
  color: #eebefa;
}

h1 {
  font-size: 5vw;
}

h2 {
  font-size: 4.5vw;
}

.icon {
  width: 1em;
  display: inline;
  margin: 0.25em;
}

.page>.icon {
  width: 30vmin;
  display: block;
  margin: 5vmin;
  filter: drop-shadow(0 0 0.5em white);
}