:root {
        --header-image: url('/img/banner0.png');
        --body-bg-image: url('/img/background0.png');

        /* colours */
        --accent: #ff003c;
        --accent-hover: #ff4d6d;
        --bg-dark: #0b0b0d;
        --bg-mid: #1a1a1d;
        --bg-light: #2a2a2f;
        --text-light: #f0f0f0;
      }
      
      html {
        height: 100%;
      }
      
      body {
        font-family: "SUSE Mono", sans-serif;
        margin: 0;
        background-color: var(--bg-dark);
        background-image: var(--body-bg-image);
        background-size: 100%;
        color: var(--text-light);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }

      * { box-sizing: border-box; }

      #container {
        max-width: 900px;
        margin: 0 auto;
      }

      #container a {
        color: var(--accent);
        font-weight: bold;
        text-decoration: none;
      }
      #container a:hover {
        color: var(--accent-hover);
        text-shadow: 0 0 5px var(--accent-hover);
      }

      #header {
        width: 100%;
        background-color: var(--bg-mid);
        height: 150px;
        background-image: var(--header-image);
        background-size: cover;
        background-position: center;
      }

      #navbar {
        height: 40px;
        background-color: var(--bg-mid);
        width: 100%;
      }
      #navbar ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: space-evenly;
      }
      #navbar li {
        padding-top: 10px;
      }
      #navbar li a {
        color: var(--accent);
        font-weight: 800;
        text-decoration: none;
        transition: all 0.2s ease;
      }
      #navbar li a:hover {
        color: var(--accent-hover);
        text-shadow: 0 0 5px var(--accent-hover);
      }

      #flex { display: flex; }

      aside {
        background-color: var(--bg-mid);
        width: 200px;
        padding: 20px;
        font-size: smaller;
      }

      main {
        background-color: var(--bg-light);
        flex: 1;
        padding: 20px;
        order: 2;
      }

      h1, h2, h3 {
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      strong { color: var(--accent); }

      .box {
        background-color: var(--bg-dark);
        border: 1px solid var(--accent);
        padding: 10px;
        box-shadow: 0 0 10px rgba(255,0,60,0.3);
      }

      #topBar {
        width: 100%;
        height: 30px;
        padding: 10px;
        font-size: smaller;
        background-color: var(--bg-mid);
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      footer {
        background-color: var(--bg-mid);
        width: 100%;
        height: 40px;
        padding: 10px;
        text-align: center;
      }

      @media only screen and (max-width: 800px) {
        #flex { flex-wrap: wrap; }
        aside { width: 100%; }
        main { order: 1; }
        #leftSidebar { order: 2; }
        #rightSidebar { order: 3; }
        #navbar ul { flex-wrap: wrap; }
      }