@import url("base.css");

/********** Base styles **********/

html {
  color: var(--text-color);
  background-color: var(--background-color);
}

hr {
  border: 1px solid;
  color: var(--main-color);
  background-color: var(--main-color);
  opacity: 15%;
}

a {
  color: var(--main-color);
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
}

a strong {
  color: currentColor;
  font-weight: bolder;
}

a:hover {
  transition: 0.3s;
  color: inherit;
}

a:active {
  background-color: var(--main-color);
}

.container {
  display: grid;
  height: 100vh;
  grid-template-areas: var(--template);
  background-color: var(--contrast-color);
}

.columns {
  column-count: var(--columns);
  column-gap: 2em;
  padding: 0 0.5em;
  column-rule: 0.1em solid var(--main-color);
  text-align: justify;
  overflow: hidden;
}

.header {
  grid-area: header;
  height: var(--header-h);
  min-height: 3em;
  padding: calc((var(--header-h) / 2) - 2.75em) 2em;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--contrast-color);
}

.header-nav {
  grid-area: header-nav ;
  margin: 0;
  padding: calc((var(--header-h) / 2) - 2.75em) 2em;
  height: var(--header-h);
  min-height: 3em;
  overflow: hidden;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--contrast-color);
}

.navbar {
  grid-area: navbar;
  padding: calc((var(--navbar-h) / 2) - 2.75em) 2em;
  height: var(--navbar-h);
  min-height: 3em;
  overflow: hidden;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--contrast-color);

}

.nav > li {
  margin: 0;
  list-style: none;
  float: left;
}

.nav > li a {
  display: block;
  margin: 0 0.25em;
  padding: 0.5em 1em;
  background-color: var(--contrast-color);
  color: var(--text-color);
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.2em;
}

.nav > li a:hover {
  transition: 0.3s;
  color: inherit;
  background-color: inherit;
  border: 1px solid var(--contrast-color);
}

.nav > li a.outlined {
  background-color: inherit;
  border: 1px solid var(--contrast-color);
}

.nav > li a.outlined:hover {
  transition: 0.3s;
  color: inherit;
  background-color: var(--contrast-color);
}

.nav > li.navbar-right {
  float: right;
}

.dropdown {
  grid-area: dropdown;
  padding: calc((var(--navbar-h) / 2) - 2.75em) 2em;
  height: var(--navbar-h);
  min-height: 3em;
  overflow: hidden;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--contrast-color);
}

.dropdown ul {
  list-style: none;
}

.dropdown::before {
  content: "\2630";
  color: var(--text-color);
  padding: 1em;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  padding:1.5em;
  border: none;
  width: var(--main-w);
  background-color: var(--background-color);
  box-shadow: 0 0.25em 0.5em 0 var(--background-color),
    0 0.25em 1em 0 var(--background-color);
  z-index: 1;
}

.dropdown:hover > .dropdown-content {
  display: block;
}

.main {
  grid-area: main;
  width: var(--main-w);
  height: var(--main-h);
  padding: 2em;
  overflow-y: auto;
  background-color: var(--contrast-color);
}

.footer {
  grid-area: footer;
  height: var(--footer-h);
  min-height: 3em;
  font-size: var(--font-075);
  padding: calc((var(--footer-h) / 2) - 0.5em);
  text-align: center;
  background-color: var(--background-color);
  border-top: 1px solid var(--contrast-color);
}

.headline {
  column-span: all;
  font-weight: normal;
}

.headline-light {
  font-weight: lighter;
  column-span: all;
}

.subheadline {
  font-size: var(--font-125);
  font-weight: lighter;
  font-style: italic;
  column-span: all;
  padding-bottom: 1.5em;
}

.subhead {
  font-size: var(--font-075);
  font-weight: bold;
  text-transform: uppercase;
}

.subhead.large {
  font-size: var(--font-100);
  font-weight: normal;
  text-transform: uppercase;
}

.title {
  font-weight: normal;
}

.title-light {
  font-weight: lighter;
}

.title-bold {
  font-weight: bold;
}

.text {
  font-size: var(--font-100);
  padding: 1em;
  margin: 0;
  text-align: justify;
}

.tile {
  font-size: var(--font-100);
  overflow-y: auto;
  padding: 1em 2.5em 2.5em 2.25em;
  margin: 1.5em;
  box-shadow: 0 0.25em 0.5em 0 var(--background-color),
    0 0.25em 1em 0 var(--background-color);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 0.2em;
}

.tile h2 {
  margin-top: 0;
  font-size: var(--font-075);
  font-weight: bold;
  text-transform: uppercase;
}

.panel {
  font-size: var(--font-100);
  overflow-y: auto;
  padding: 1em;
  margin: 0.5em;
  border: 1px solid var(--main-color);
  border-radius: 0.2em;
  text-align: left;
}

.panel h2 {
  margin-top: 0;
  font-size: var(--font-075);
  font-weight: bold;
  text-transform: uppercase;
}

.panel img {
  border-style: none;
  max-width: 15em;
  padding: 0.25em 1em 0.25em 0;
  float: left;
  clear: left;
}

/*.panel img:hover {
  height: 12em;
}*/

.panel.full-height {
  height: calc(var(--main-h) - 2em);
}

.panel.half-height {
  height: calc((var(--main-h) / 2) - 2em);
}

.button {
  padding: 0.4em 0.75em;
  background-color: var(--main-color);
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0.2em;
}

.button:hover {
  transition: 0.3s;
  color: inherit;
  background-color: inherit;
  border: 1px solid var(--main-color);
}

.button.outlined {
  background-color: inherit;
  border: 1px solid var(--main-color);
}

.button.outlined:hover {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

.button.right {
  float: right;
}

.button.vertical {
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: var(--background-color);
  height: var(--main-h);
  width: 2.5em;
  float: left;
  cursor: pointer;
}

.button.vertical::before {
  content: "\276F";
}

.button.vertical:hover {
  background-color: var(--background-color);
  border: none;
}

.slider {
  grid-area: aside-slider;
  display: block;
  position: relative;
}

.slider-content {
  display: none;
  position: absolute;
  min-width: 50vw;
  height: var(--main-h);
  margin: 0;
  padding: 1em;
  border: none;
  background-color: var(--background-color);
  opacity: 0.9;
  box-shadow: 0 0.25em 0.5em 0 var(--background-color),
    0 0.25em 1em 0 var(--background-color);
  z-index: 1;
}

.slider:hover > .slider-content {
  display: block;
}