/*
 * style.css
 * Copyright (C) 2021 Edward Higgins
 *
 * Distributed under terms of the MIT license.
 */

:root {
  --main-radius:5px;
  --main-padding:5px;
}

body {
  border: 0px;
  padding: 0px;
  margin: auto;
  align: center;
  font-family: 'Montserrat', sans-serif;
}

.container {
  border: 0px;
  padding: 0.5rem;
  display: grid;
  height: 100%;
  width: 95%;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 64px 520px 1.0fr 64px;
  grid-template-areas:
    "nav nav nav nav"
    "simulation simulation simulation sidebar"
    "graphs graphs graphs sidebar"
    "footer footer footer footer";
    grid-gap: 0.2rem;
}

nav {
  grid-area: nav;
  background-image: url("../img/head_bg.png");
  background-color: #336699;
  background-position: right;
  background-repeat: no-repeat;
  background-size: 800px auto;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
  padding: 15px;
  color: #fff;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

#simulation {
  grid-area: simulation;
  background: #ffffff;
  color: #000;
  align: auto;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
#simulation canvas {
  border: 3px black solid;
  margin: auto;
  display: block;
}


#sidebar {
  grid-area: sidebar;
  background-color: #d6e3eb;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}
#sidebar tr {
  border: 20px;
  text-align: left;
}

#graphs {
  grid-area: graphs;
  background: #cbe0e9;
  color: #000;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

#graphs ul {
  margin: 0px;
  padding: 0px;
  align: justify;
  display: inline-block;
  justify-content: space-between;
  list-style: none;
}

#graphs li {
  display: inline-block;
}

.graph {
  margin: 10px;
  width: 600px;
  height: 400px;
  display: inline-block;
  border: 3px solid black;
}

footer {
  grid-area: footer;
  background-color: #a3c5cf;
  text-align: center;
  font-size: 12px;
  padding: 15px;
  color: #000;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

@media only screen and (max-width: 1100px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 64px 520px 300px 1.0fr 64px;
    grid-template-areas:
      "nav"
      "simulation"
      "sidebar"
      "graphs"
      "footer";
  }
}