@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
a:link,
a:visited {
  color: inherit;
  text-decoration: none;
}

body {
  background-color: #333;
  color: #EEE;
  margin: 0px;
  display: flex;
  justify-content: center;
}

container-a {
  padding: 0px 17px 17px 17px;
  max-width: 1230px;
  width: 100%;
  grid-area: container-a;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: "header" "container-b";
}
@media (max-width: 58em) {
  container-a {
    padding: 0px 0px 17px 0px;
  }
}

header {
  background: linear-gradient(to bottom, #5DF, #07E);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 1.18em;
  font-family: "Lora";
  font-size: 33px;
  grid-area: header;
}


.shader-container {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: left;
}

#shaderCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}


container-b {
  font-family: "Lato", sans-serif;
  padding: 2em;
  background: #404040;
  border-radius: 7px;
  box-shadow: 0px 0px 20px #222;
  grid-area: container-b;
  display: grid;
  grid-template-columns: auto 3em 70%;
  grid-template-areas: "sidebar . main";
}
@media (max-width: 58em) {
  container-b {
    grid-template-columns: auto;
    grid-template-rows: auto 3em auto;
    grid-template-areas: "sidebar" "." "main";
  }
}

container-c {
  font-family: "Lato", sans-serif;
  padding: 2em;
  background: #404040;
  border-radius: 7px;
  box-shadow: 0px 0px 20px #222;
  display: grid;
  grid-area: container-b;
  grid-template-columns: auto;
  grid-template-areas: "main";
}

title1 {
  font-family: "Lato", sans-serif;
  font-size: x-large;
  color: #F93;
  display: inline-grid;
  padding-bottom: 20px;
}

title2 {
  font-size: large;
  font-weight: bold;
  color: #CA8;
  display: grid;
  padding-top: 20px;
}

title3 {
  font-weight: bold;
}

subtitle {
  color: #AAA;
}

sidebar {
  grid-area: sidebar;
  display: grid;
  height: min-content;
  grid-gap: 4em;
}
@media (max-width: 58em) and (min-width: 35em) {
  sidebar {
    grid-template-columns: 1fr 1fr;
  }
}

main {
  width: auto;
  grid-area: main;
}

grid-imgs {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
}

grid-img {
  width: 260px;
  padding-bottom: 40px;
}

li{
  padding-bottom: 0.5em;
}

ul.plain {
  list-style-type: none;
  padding: 0em;
  margin: 0em;
}

ul.sub {
  list-style-type: none;
  padding: 0em 0em 0em 1em;
  color: #aaa;
}

button {
  color: #DDD;
  padding: 0px 20px 0px 20px;
  border: 1px solid #111;
  border-radius: 10px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  background-image: linear-gradient(to bottom, #4B4B4B, #393939);
  box-shadow: 1px 2px 5px -3px black;
  cursor: pointer;
}

highlight {
  padding: 5px;
  border: 1px solid #111;
  border-radius: 15px;
  display: inline-flex;
  background-image: linear-gradient(to bottom, #F93, #A60);
  box-shadow: 1px 2px 5px -3px black;
  cursor: pointer;
}

img.social {
  float: left;
  margin: 0px 11px 0px -7px;
}