:root
{
  --text-color: #111111;
  --alternate-text-color: #111111;
  --linkColor: red;
  --title-color: #111111;
  --background-color: #FBFBFB;
  --alternate-background-color: #E9E9E9;
  --default-font: Courier New;
  --title-weight: none;
  --title-capitalize: uppercase;
  --background-image: url("img/matLight.webp");
}

.darkmode
{
  --text-color: #DDDDDD;
  --alternate-text-color: #1ACB01;
  --linkColor: #1ACB01;
  --background-color: #111111;
  --alternate-background-color: #000000;
  --default-font: Menlo;
  --title-weight: bold;
  --title-capitalize: none;
  --background-image: url("img/matDark.webp");

}


@media only screen and (width <= 1024px) {
  body {
    padding-left: 3em;
    padding-right: 3em;
  }
}
@media only screen and (width >= 1024px) {
  body {  
    padding-left: clamp(88px, 20%, 204px);
    padding-right: clamp(88px, 20%, 204px);
  }
}

body
  { 
  /*  padding-left: clamp(88px, 20%, 204px); */
    margin: 0px;
    padding-top: 102px;
    background-color: var(--background-color);
    background-image: var(--background-image);
  }

a
{
  display: inine-block;
  font-family: var(--default-font);
  text-decoration: none;
  color: var(--linkColor);
}

a:hover { color: blue; }

p
{
  font-family: var(--default-font); /* Menlo als donker */
  margin: 5px;
  font-size: 1em;
  color: var(--text-color);
}


/*
@media (prefers-color-scheme: dark) {
  body {
    background: var(--background-color);
    color: var(--text-color);
    /*background-image: var(--background-image);
  }

  p 
  {
    font-family: var(default-font);
    text-align: left;
  }

  a
  {
    font-family: var(--default-font);
    color: var(--linkColor);
    text-decoration: underline 0.1em;
  }
}
*/