:root {
  --anim-type: cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite normal none running; /* Quadratic */
}

html {
  background-image: url("../pics/bg-web3.gif");
  background-repeat: revert;
  color: white;
}

div#scroll-banner {
  overflow: hidden;
  border: 3px double white;
}

div#scroll-text {
  text-align: right;
  white-space: nowrap;

  animation: 8s var(--anim-type) marquee;
}

div#scroll-banner > div#scroll-text > * {
  font-size: 200%;
  margin: 0;
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-150%);
  }
}

@media only screen and (max-width: 850px) {
  /* Mobile display */
  div#scroll-text {
    animation: 9s var(--anim-type) marquee_min;
  }

  @keyframes marquee_min {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(-320%);
    }
  }
}

h1 {
  font-size: 250%;
}

.pre {
  font-family: monospace;
}

p,
a {
  font-size: 125%;
}

a {
  color: rgb(147, 107, 255);
}

li > a {
  color: mediumvioletred;
  font-size: 100%;
}

img {
  vertical-align: middle;
}

footer {
  text-align: center;
}

/* Cookie banner */
#cookie .cookie-flag {
  display: none;
}

#cookie .cookie-container {
  display: block;
  pointer-events: none;
  position: relative;
}

#cookie .cookie-content {
  border: 1px solid white;
  background: black;
  display: flex;
}

#cookie .cookie-flag:checked ~ .cookie-close,
#cookie .cookie-flag:checked ~ .cookie-content {
  display: none;
}

#cookie .cookie-close {
  pointer-events: all;
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 32px;
  cursor: pointer;
}

#cookie-icon {
  font-size: 40px;
  margin: 1%;
  margin-top: 3rem;
}