body{
    background:rgb(197, 175, 98);
    background-image: url("../img/beige-paper.png");
    background-repeat: repeat/no-repeat;
    font-size:20px;
    font-family:'Courier New', Courier, monospace;
    text-align:justify;
    margin-inline: auto;
    width: 800px;
    animation: mask-anim 5s linear 0s infinite alternate;

}
.fr{
  display: none;
}
body.has-fr .fr{
  display: block;
}
body.has-fr .non-fr{
  display: none;
}
pre{
  margin-inline: auto;
  width: 8em;
}
h1{
  text-align: center;
    font-weight: bold;
    font-family: Ancial,'Courier New', Courier, monospace;
    font-size: 80px;
}


summary{
    font-family:'Courier New', Courier, monospace;
    font-weight: bold;
}


:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
}


.mask {
    pointer-events: none;
  width: 100vw;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: hsla(0,0%,0%,1);
  mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 80px,
    black 230px
  );
  -webkit-mask: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    transparent 80px,
    black 230px
  );
}

@keyframes mask-anim {
  0% { background:rgb(254, 207, 105);}
  25% { background: rgb(203, 172, 86);}
  50% { background:hsl(44, 25%, 36%);}
}