* { box-sizing: border-box }

body {
  background: #ffffff;
  padding: 0;
  height: 100vh;
  margin: 0;
  font-family:Helvetica,Arial,sans-serif; font-size:1rem
}

p, li, h2, h3 { font-family:Helvetica,Arial,sans-serif; font-size:1rem; line-height:1.5 }
h1 { font-family:Helvetica,Arial,sans-serif; font-size:1.5rem; line-height:1.5 }

a:link     { color:#0076be }
a:visited { color:#0076be }
a:hover  { color:#0076be }
img        { max-width:100%; height:auto; border:0 }

.page-wrap {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: min-content min-content min-content 1fr minmax(0, min-content) minmax(0, min-content) min-content;
  gap: 0px;
}

.page-logo {
  grid-column: 1/-1;
  background: #ffffff;
  text-align:center;
  padding:2rem
}

.page-logo img { max-height:100px;width:auto }

.page-header {
  grid-column: 1/-1;
  padding: 0;
  height:200px;
  background-color:#1f8c9c;
  background-image:url("images/paper_planes.svg");
  background-repeat:no-repeat;
  background-origin: content-box
}

.page-nav {
  grid-column: 1/-1;
  background: #f5f6f1;
  padding: 0;
  text-align:center;
  place-items:center
}

.page-main {
  grid-column: 1/-1;
  background: #ffffff;
  text-align: left;
  padding: 0;
  text-align:left
}

.content { padding: 1rem }

.page-sidebar-left {
  grid-column: 1/-1;
  background: #bdbdbd;
  padding: 0;
  text-align:center
}

.page-sidebar-right {
  grid-column: 1/-1;
  background: #87B2AB;
  padding: 0;
  text-align:left
}

.page-footer {
  grid-column: 1/-1;
  background: #4a004f;
  padding: 1rem;
  text-align:center;
}

.page-footer p { color:white }

.navbar { display: grid; grid-auto-flow: row; width:100%; height:auto; justify-content: stretch }

.navbar a { display:block; width:100%; padding:1rem;color:#4a004f; text-decoration:none;background:#f5f6f1; border-bottom:1px solid #000000 }
.navbar a.selected {background:#4a004f; color:white;border-radius:0 }

/********************************************************************* For large sizes */
@media only screen and (min-width: 700px) {

.page-wrap { display:grid; grid-template-columns: minmax(0, min-content) 1fr minmax(0, min-content); grid-template-rows: min-content min-content min-content 1fr min-content }
.page-logo { grid-column: 1/-1 }
.page-header { grid-column: 1/-1 }
.page-nav { grid-column: 1/-1 }
.page-sidebar-left { grid-column: 1/2; grid-row: 4/5 }
.page-main { grid-column: 2/3; grid-row: 4/5 }
.page-sidebar-right { grid-column: 3/4; grid-row: 4/5 }
.page-footer { grid-column: 1/-1 }

.page-logo { height:300px }
.page-logo img { max-height:200px;width:auto }

.page-header {
  grid-column: 1/-1;
  grid-row: 2/3;
  padding: 40px;
  height:400px;
  background-color:#1f8c9c;
  background-image:url("images/paper_planes.svg");
  background-repeat:no-repeat;
  background-origin: content-box
}

.content { padding: 5rem }

.navbar {
  width:100%;
  padding: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
}

.navbar a { padding:1rem;color:#4a004f; text-decoration:none;background:transparent; border:none }
.navbar a:link { color:#4a004f }
.navbar a:visited { color:#4a004f }
.navbar a:hover { background:#4a004f; color:white;border-radius:10px }
.navbar a.selected {background:#4a004f; color:white;border-radius:10px }

}