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

body, textarea {
  cursor: url('https://europ-europ.neocities.org/DAB%20+%20privat%20radio/Fotos/Mai%202020/cursor.png'), crosshair;
}

body {
  margin: 0;
  background-color: #141114;
  background-image: linear-gradient(335deg, black 23px, transparent 23px),
    linear-gradient(155deg, black 23px, transparent 23px),
    linear-gradient(335deg, black 23px, transparent 23px),
    linear-gradient(155deg, black 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

#main {
  margin: 0 auto;
  padding: 0 16px 32px;
  width: 100%;
}

#title {
  margin-top: 40px;
  text-align: center;
}

#box {
  margin: 10px auto 0;
  background-color: rgba(255, 255, 255, 0.5);
  width: 600px;
  max-width: 100%;
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
}

#box:hover {
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
  background-color: #fff;
}

.text {
  padding: 15px;
  font-family: times new roman, serif;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
  color: black;
  text-shadow: 0px 0px 6px #4098db;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.text p{
  margin: 0 0 1em 0;
}

.text p:last-child {
  margin-bottom: 0;
}

.back-link {
  margin: 0 0 1em 0;
}

.gradient-border {
  --borderWidth: 10px;
  background: #1D1F20;
  position: relative;
  border-radius: 10px;
}

.gradient-border:after {
  content: '';
  position: absolute;
  border-radius: 10px;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
  box-shadow: 10px 10px 0px rgba(255, 255, 255, 0.3);
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@font-face {
  font-family: Clip;
  src: url("https://acupoftee.github.io/fonts/Clip.ttf");
}

.sign {
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #6b1839,
    transparent
  );
  letter-spacing: 2px;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 5em;
  color: #ffe6ff;
  width: 100%;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

a {
  text-decoration: none;
  color: black;
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
}

a:hover {
  -moz-transition: .6s;
  -webkit-transition: .6s;
  transition: .6s;
  letter-spacing: 3px;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin: 0 0 1em 0;
}

.nav-links a {
  display: inline-block;
}

.footer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.footer-logo img {
  width: 50px;
  height: auto;
  display: block;
}

.cepheus-button img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.footer-note {
  font-size: 0.85rem;
  line-height: 1.4;
}

.footer-note img {
  vertical-align: middle;
}

.footer-note p {
  margin: 0 0 0.4em 0;
}

.footer-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  #main {
    padding: 0 12px 28px;
  }

  #title {
    margin-top: 48px;
  }

  #box {
    width: 100%;
  }

  .text {
    padding: 14px;
    font-size: 17px;
    line-height: 1.55;
  }

  .sign {
    font-size: clamp(2.4rem, 12vw, 4rem);
    line-height: 1.1;
  }

  .gradient-border {
    --borderWidth: 6px;
  }

  .gradient-border:after {
    box-shadow: 6px 6px 0px rgba(255, 255, 255, 0.25);
  }

  a:hover {
    letter-spacing: normal;
  }
}

@media (max-width: 420px) {
  #title {
    margin-top: 32px;
  }

  .text {
    font-size: 16px;
    padding: 12px;
  }
}

@media (max-width: 500px) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}