@import "css/layout/stack.css" screen and (max-width: 800px);
@import "css/layout/sidebar.css" screen and (min-width: 801px);

:root {
  --main-min-width : 400px;
  --main-max-width : 1200px;
  --color-ac0 : #072;
  --color-ac1 : #194;
  --color-fg0 : #CCC;
  --color-bg0 : #222;
  --color-fg1 : #DDD;
  --color-bg1 : #333;
  --color-fg2 : #FFF;
  --color-bg2 : #555;
}


a.unmarked {
  text-decoration: none;
}

/*
a.email {
  text-decoration: underline;
  color: var(--color-ac0);
}
*/

body {
  background-color: var(--color-bg0);
}


header {
  --padding : 8px;
  padding: var(--padding);
  background-color: var(--color-bg2);
  color: var(--color-fg2);
  a {
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--color-fg2);
  }
  h1 {
    text-align: center;
  }
}


nav {
  --color-nav-bg : var(--color-bg1);
  --color-nav-fg : var(--color-fg1);
  --color-nav-border : var(--color-bg2);
  
  --padding : 4px;
  
  gap: 2px;
  border: 2px solid var(--color-nav-border);
  padding: var(--padding);
  background-color: var(--color-nav-bg);
  a {
    padding: 2px;
    text-decoration: none;
    color: var(--color-nav-fg);
    background-color: var(--color-nav-bg);
  }
  a:hover {
    color: var(--color-nav-bg);
    background-color: var(--color-nav-fg);
  }
  a.nav-here {
    text-decoration: underline;
  }
}


main {
  --color-main-bg : var(--color-bg1);
  --color-main-fg : var(--color-fg1);
  
  color: var(--color-main-fg);
  background-color: var(--color-main-bg);
  padding: 4px;
}


footer {
  --color-footer-bg : var(--color-bg2);
  --color-footer-fg : var(--color-fg2);

  --padding : 8px;
  
  align-content: center;
  padding: var(--padding);
  min-height: 64px;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-fg);
  .contact {
    text-align: center;
  }
  a {
    text-decoration: underline;
    color: var(--color-ac1);
  }
}