/*
 * style.css
 * Copyright (C) 2021 Edward Higgins
 * Updated in 2024 Joel Richardson
 *
 * Distributed under terms of the MIT license.
 */

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

body {
  border: 0px;
  padding: 0px;
  margin: 20px;
  align: left;
  max-width: 1200px;
  font-family: 'Roboto', sans-serif;
}

a:link {
	color: blue;
}

a:visited {
	color: black;
}

a:hover {
	color: #F39200;
}

.container {
  border: 0px;
  padding: 0.5rem;
  display: grid;
  height: 100%;
  margin: auto;
  /* grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 64px 1fr 1.0fr 64px; */
  grid-template-areas:
    "nav"
    "preamble"
    "constants"
    "tasks"
    "footer";
    grid-gap: 3px;
}
/*
nav {
  grid-area: nav;
  background-image: url("../img/head_bg.png");
  background-color: #006eab;
  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);
}
*/

nav {
  grid-area: nav;
  background-color: #006eab;
  text-align: left;
  padding: 15px;
  color: #fff;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

* {
  box-sizing: border-box;
}

table, th, td {
  text-align: center;
  border: 1px solid black;  
  border-collapse: collapse;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}

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

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

.graphSingle {
  margin: 3px;
  display: inline-block;
  height: 450px;
  width: 100%;
  /* border: 3px solid black; */
}

footer {
  grid-area: footer;
  background-color: #0DB4E6;
  text-align: left;
  font-size: 20px;
  padding: 15px;
  color: #000;
  border-radius: var(--main-radius);
  padding: var(--main-padding);
}


.row {
  display: flex;
  margin-left:-5px;
  margin-right:-5px;
}

.column {
  flex: 50%;
  padding: 5px;
}
.column1 {
  flex: 30%;
  padding: 5px;
}

.column2 {
  flex: 70%;
  padding: 5px;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column1 {
    width: 100%;
  }
  .column2 {
    width: 100%;
  }
}