@font-face {
      font-family: Scientifica;
      src: url(../fonts/scientifica.ttf);
}

:root {
      font-family: Scientifica, 'Courier New', Courier, monospace;

      --page-bg: #2b2441;
      --page-fg: #fffef9;
      --page-shadow: #211729;
      
      --panel-bg: #33315d;
      --panel-fg: #fffef9;
      --panel-border-color: #6b9a71;
      --panel-rounding: 0;
      --panel-border-width: 0.2rem;
      --panel-outer-width: 0.5rem;
      --panel-margin: 2rem;
      --panel-padding: 1rem; 
      --panel-shadow: 0 1rem 0 0 var(--page-shadow);
     
      --link-fg: #a5d5df;
}

body {
      margin: 0;
      padding: 0;

      color: var(--page-fg);
      background: var(--page-bg);

      display: flex;
      flex-direction: column;
      min-height: 100vh;

      justify-content: center;
      align-items: center;

      box-shadow: inset 0 0 0.5rem 0.1rem var(--page-shadow);
}

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

.panel {
      margin: var(--panel-margin);
      padding: var(--panel-padding); 
      display: flex;
      flex-direction: column;
      
      color: var(--panel-fg);
      background: var(--panel-bg);
      border: var(--panel-border-color) var(--panel-border-width) solid;
      box-shadow: 0 0 0 var(--panel-outer-width) var(--panel-bg), var(--panel-shadow);
      
      footer {
            flex-direction: row;
      }
     
}.panel-expanded {
      align-items: center;
      min-width: min(80vw, 60rem);
}

.flex-gap {
      height: 4rem;
      width: 4rem;
}