@font-face{
font-family: 'MicroJournal';
src: url(../fonts/MicroJournal.ttf);
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Regular.ttf);
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Italic.ttf);
font-weight: normal;
font-style: italic;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-Bold.ttf);
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: 'Afacad';
src: url(../fonts/Afacad-BoldItalic.ttf);
font-weight: bold;
font-style: italic;
}
html, body {
  color: #FFFFE6;
  background-color:#383838;
  font-family: Afacad;
  font-size: large;
  justify-content: center;
  display:flex;
}
article {
  margin-top: 1ch;
  width:auto;
  max-width: 60ch;
  background-color:#474747;
  padding: 1ch 2ch;
}
 /* Text */
article header{  padding-left:0.5ch;
  background-color: #5eb18b;
  padding: 0.1rem 1ch 0;
  text-align: center;}
article h2 {
  border-bottom: solid;
  border-color: #5c5a56;
}
article h3{
margin-bottom: 0;
}
 /* Lists */
 /* Images */
figure { 
  background-color:#FFFFE6;
  color:#888080;
  justify-self: center;
  text-align: center;
  padding:1ch;
  max-width: 90%;
  height: auto;
  padding-bottom:0.5ch;
}
img {
  max-width: 100%
}
figure.triple { 
  background-color:#474747;
  color:#FFFFE6;
  justify-self: center;
  text-align: center;
  padding: 0.5ch;
  margin:0;
  max-width: 100%;
  padding-bottom: 1ch;
}
figure.triple picture{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1ch;
  grid-auto-flow: dense;
  margin-bottom: 1ch;
}
figure.triple picture img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  background-color: #2c2a24;
}
figure.screenshotgallery { 
  background-color:#474747;
  color:#FFFFE6;
  justify-self: center;
  text-align: center;
  padding: 0.5ch;
  margin:0;
  max-width: 100%;
  padding-bottom: 1ch;
}
figure.screenshotgallery picture{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1ch;
  grid-auto-flow: dense;
  margin-bottom: 1ch;
}
figure.screenshotgallery picture img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: #2c2a24;
}
 /* Links */
a {
  color:#1dcb7b;
}
a:visited {
  color:#259a7f;
}
 /* Quotes */
blockquote {
  font-style: italic;
  background-color:#5c5a56;
  border-left:solid;
  padding: 1ch 3ch;

}
blockquote p:before{
  content: '“';
}
blockquote p:after{
  content: '”';
}
blockquote cite a{
   display: block;
   text-align: end;
}
 /* Tables */
table{
background-color:#5c5a56;
width:100%;
}
thead{
background-color: #508364;}
 /* Code */
pre {
  color:#1dcb7b;
  background-color:#2c2a24;
  padding:1ch;
}
 /* Footer */
footer {
  color:#259a7f;
  justify-self: center;
  position: fixed;
  bottom: 4%;
  left: 0;
  right: 0;
}

 /* Text Outline */
.outline {
  color:#474747;
    --color:#FFFFE6;
    --width:2px;
    --width-negative: -2px; 
    filter:
    drop-shadow(var(--width)0 0 var(--color))
    drop-shadow(var(--width-negative) 0 0 var(--color))
    drop-shadow(0 var(--width)0 var(--color))
    drop-shadow(0 var(--width-negative) 0 var(--color));
}