@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode-Medium.ttf");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode-Bold.ttf");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode-Italic.ttf");
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: "Junicode";
  src: url("/fonts/Junicode-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;}


.gentium-plus-regular {
  font-family: "Gentium Plus", serif;
  font-weight: 400;
  font-style: normal;
}

.junicode {
  font-family: "Junicode", serif;
  font-weight: 400;
  font-style: normal;
  
  
}

.gentium-plus-bold {
  font-family: "Gentium Plus", serif;
  font-weight: 700;
  font-style: normal;
}

.gentium-plus-regular-italic {
  font-family: "Gentium Plus", serif;
  font-weight: 400;
  font-style: italic;
}

.gentium-plus-bold-italic {
  font-family: "Gentium Plus", serif;
  font-weight: 700;
  font-style: italic;
}


* {
  font-family: "Junicode";
}



.article-gradient {
    /* --start: white;
    --c: white; */
    background: linear-gradient(
    to bottom,
    var(--c) -15em, var(--start) 4em
);

}

article {

  max-width: 80ch;
  margin: 0 auto; 

  /* --c: red; */
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 2px;
  border-radius: 3px;
  /* background-color: var(--c); */
}


 a {
  font-weight: bold;
  padding: 10px 6px;
  outline-style: solid;
  outline-width: 1px;
  outline-color: green;
  border-radius: 5px;
  box-shadow: 0px 1px 2px lightblue;
  text-decoration: none;
   display: inline-flex;
   font-family: "Junicode";
  margin: 5px;
}

p {
  font-family: "Junicode";
  
}

@property --c {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}

@property --start {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

 a:hover {
    color: black;
}

.fa_bar a:visited {
    color: grey;
}
.fa_bar a:active {
    color: yellow;
}
.fa_bar a:link {
    color: silver;
}

.fa_bar {
  margin: 0 auto;
  justify-content: center;
  display: flex;
}


.red {--c: red;}

.blue {--c: blue;}

.ochre {
    --c: #CC7722;
}

.black {
    --c: black;
}

.green {
    --c: green;
}

.gold {
    --c: gold;
}

.silver {
    --c: silver;
}

.bronze {
    --c: #CD7F32;
}

.rs {
    --c: #E06060;
}

.purple {
    --c: purple;
}

.pink {
    --c: pink;
}

.sb {
   --c: #262525;
}

.lime {
    --c: lime;
}


.gradient-bg {
    /* --start: white; */

    background: linear-gradient(
    to bottom,
    var(--start) 70%, var(--c) 125%
);
}







@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #ddd;
    --start: black;
  }
  article {
    outline-color: grey;
  }

}


@media (prefers-color-scheme: light) {
  body {
    background: #eee;
    color: #111;
    --start: white;

  }
  p {
    filter: hue-rotate(180deg);
  }
  article {
    outline-color: black;
  }

}