/* https://dev.to/afif/we-can-finally-animate-css-gradient-kdk */
@property --scroll {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0px;
}

body {
  background: hsl(45,100%,15%);
  /*gradient length: 40px
  0% -> 0
  85% -> 34
  87.5% -> 35
  90% -> 36
  */
  background: repeating-linear-gradient(hsl(45,100%,15%) 0px, hsl(45,100%,15%) 31px, hsl(45,100%,20%) 34px, hsl(45,100%,15%) 37px 40px);
  /*animation: scanline 1s linear infinite;*/
  height: auto;
  background-attachment: fixed;
  background-size: cover;
  
  color: hsl(45,100%,50%);
  font-family: Courier New;
}

@keyframes scanline{
  from {
  --scroll:0px;
  }
  to {
  --scroll:40px;
  }
}

a {
  color: hsl(45,100%,50%);
  text-decoration: underline;
}

a:visited {
  color: hsl(45,100%,40%);
  text-decoration: underline;
}

a:hover {
  color: hsl(45,100%,50%);
  font-weight: bold;
  text-decoration: underline;
}

button {
  color: hsl(45,100%,50%);
  background-color: hsl(45,100%,11%);
  border: 1px solid hsl(45,100%,50%);
}

button:hover {
  border: 1px solid hsl(45,100%,40%);
}

button:active {
  color: hsl(45,100%,11%);
  background-color: hsl(45,100%,50%);
}

table {
  border: 1px solid hsl(45,100%,50%);
}

hr {
    border: 1px solid hsl(45,100%,50%);
    width: 90%;
}

figure {
    background: hsl(45,100%,50%);
    display: block;
}

figure img {
    mix-blend-mode: luminosity;
}

.article1 {
    margin: auto;
    text-align: center;
    width: 75%;
    border: 1px solid hsl(45,100%,50%);
    background-color: hsla(45,100%,25%, 0.75);
    padding-left: 1em;
    padding-right: 1em;
}

.article2 {
    margin: auto;
    text-align: center;
    width: 75%;
    border: 1px solid hsl(45,100%,50%);
    background-color: hsla(45,100%,45%, 0.75);
    color: black;
    padding-left: 1em;
    padding-right: 1em;
}

.article2 a {
  color: black;
  text-decoration: underline;
}

.article2 a:visited {
  color: hsl(45,100%,10%);
  text-decoration: underline;
}

.article2 a:hover {
  color: hsl(45,100%,20%);
  font-weight: bold;
  text-decoration: underline;
}

.spoiler {
    color: hsl(45,100%,50%);
    background-color: hsl(45,100%,50%);
}