:root {
    --color-bg : #246;
    --color-bg-lite : #48A;
    --color-bg-txt: #fff;
    --color-alt-link: yellow;
    --color-accent: rgb(255, 174, 0);
    --color-txt: #123;
    --max-width: 1024px;
    --font-size: 13pt;
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    :root {
        --font-size: 13pt;
    }
    
}

@media screen and (min-width: 1367px) and (max-width: 1599px) {
    :root {
        --font-size: 14pt;
    }   
}

@media screen and (min-width: 1600px)  {
    :root {
        --font-size: 16pt;
        --max-width: 1280px;
    }   
}



BODY {
  font-size: var(--font-size);
  margin: 0px;
  /* font-family: "Inter", "Open Sans", "Segoe UI", "Avenir", Helvetica, Arial, sans-serif; */
  /* font-weight: 400; */
}

MAIN H2, MAIN H3 {
    color: var(--color-bg);
}

HEADER, FOOTER {
    background:var(--color-bg);
    background: linear-gradient(45deg, var(--color-bg-lite) 0%, var(--color-txt) 100%);    
  color: var(--color-bg-txt);
}

FOOTER {
  padding: 1em 0;
}

HEADER {
  padding: 1.2em 0;
  font-size: 1.2em;
}


HEADER IMG {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  margin: 0 auto;
  border: 6px solid var(--color-accent);
  box-shadow: 0 0 .5rem .5rem rgba(17,34,51,.5);
}

header H1, HEADER H3 {
  text-align: center;
}

MAIN {
  padding: 1.5em 0;
  color: var(--color-txt);
}

FOOTER > DIV,
MAIN > DIV {
  margin: 1em auto;
  width: 95%;
  max-width:  var(--max-width);
}

FOOTER A {
  color: var(--color-alt-link);
}