@import "/styles/background-effect.css" screen and (min-width: 400px);

:root {
    /*
      background palette based loosely on https://coolors.co/1f1f47-a89b9d-816c61-575a4b-2a2c24
    */

  --nav-panel-height-when-reduced: 200px;
  --min-width: 380px;
  --zoom-reduced: 80%;
  --logo-panel-color: #1F1F47;
  --content-panel-color: #575A4B;

  --content-text-color: #ddb;
  --heading-text-color: #fff;
  --link-color: #cce;
  --link-color-visited: #cac;
  --link-color-hover: #eee;
}

body {
  overscroll-behavior: none; /* prevent overscroll bouncing back effect */
  margin: 0;
  background-color: #000;
  font-family: verdana, sans-serif;
  font-size: .8em;
  line-height: 1.2rem;
}

h1 {
  line-height: 1em;
}

.main_panel {
  position: absolute;
  left: 200px;
  width: 600px;
}

.nav_panel {
  position: fixed;
  width: 430px;
  left: 756px;
  top: 0;
}

.content_panel {
  background-color: var(--content-panel-color);
  color: var(--content-text-color);
}

.content_panel {
  padding: 2em;
  padding-right: 50px;
  min-height: 100vh;
}

@media screen and (max-width: 1200px) {
  .main_panel {
    left: 0;
  }
  .nav_panel {
    left: 555px;
  }
}

@media screen and (max-width: 800px) {
  .main_panel {
    left: 0;
  }
  .nav_panel {
    position: absolute;
    left: 0;
    width: 100vw;
    min-width: var(--min-width);
  }
  .content_panel {
    position: absolute;
    padding: 1em;
    padding-right: inherit;
    top: var(--nav-panel-height-when-reduced);
    width: 100vw;
    min-width: var(--min-width);
  }
  .nav_panel {
    -moz-transform: scale(var(--zoom-reduced));
    -moz-transform-origin: center top;
  }
  .nav_panel img {
    zoom: var(--zoom-reduced);
  }
  .nav-graphic-extension {
    zoom: var(--zoom-reduced);
  }
  .button-container {
    width: 300px;
    margin: auto;
  }
}

.logo_panel {
  text-align: center;
  background-color: var(--logo-panel-color);
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-color-visited);
}

a:hover, a:active {
  color: var(--link-color-hover);
}

a img {
  border: 0px;
}

.heading, h1 {
  color: var(--heading-text-color);
}

.nav-graphic-extension {
  background-image: url(extension.gif);
  background-repeat: repeat-x;
}

.card-180 {
  float:right; 
  margin: 1em; 
  width: 180px;
} .card-180 img {
  margin: .5em;
}