body
{
  background-color: var(--hci_gray);
  color: white;
}

#headline
{
  color: white;
  font-size: 3em;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}

#tocContainer
{
  width: 90vw;
  height: 90vh;
  margin: auto;
}

.section
{
  width: 90vw;
  margin: 1em auto;
  display: block;
  background-color: var(--middle_gray);
}

.hiddenSection
{
  display: none;
  opacity: 0;
}

.sectionTitle
{
  font-size: 1.5em;
  background-color: var(--dark_gray);
  width: 90vw;
  margin: 0em auto 0 auto;
  text-align: center;
  cursor: pointer;
}

.collapseArrow
{
  width: 1em;
  height: 1em;
  float: right;
  margin: .2em 1em auto 0em;
  background-image: url("../img/small_arrow_up.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.collapsedCollapseArrow
{
  margin: .3em 1em auto 0em;
  background-image: url("../img/small_arrow_down.png");
}

.sectionInnerContainer
{
  width: 100%;
}

.augucationContainer
{
  cursor: pointer;
}

.augucationContainer:hover
{
  background-color: var(--dark_gray);
}

.augucation
{
  margin: .5em auto;
  width: 36vw;
  height: 8em;
}

.picContainer
{
  width: 10em;
  height: 8em;
  float: left;
  margin-right: 1em;
}

.augucationScreenshot
{
  border: 0px solid var(--dark_gray);
  width: 10em;
  height: 8em;
  background-size: 100%;
  background-repeat: no-repeat;
  float: left;
  margin-right: 1em;
  cursor: pointer;
}

.videoSymbol
{
  width: 25%;
  height: 35%;
  left: 80%;
  top: 73%;
  position: relative;
  background-image: url("../img/video_symbol.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.picContainer:hover
{
  border: 3px solid var(--dark_gray);
  width: 30em;
  height: 24em;
  position: absolute;
  transform: translate(-35%, -25%);
}

.augucationScreenshot:hover
{
  width: 30em;
  height: 24em; 
}

.augucationInfo
{
  width: calc(36vw - 12em);
  height: 100%;
  float: right;
}

.augucationTitle
{
  width: 21em;
  height: 70%;
  line-height: 6em;
  font-size: 1.3em;
}

.augucationLink
{
  height: 2em;
  width: 17em;
  line-height: 2em;
  margin-left: -0.5em;
  padding-left: 0.5em;
}

.augucationLinkHidden
{
  border: 1px solid white;
  display: none;
}

.augucationLinkHighlighted
{
  background-color: var(--darker_gray);
  border-radius: 0.9em;
}

.copySymbol
{
  height: 1.5em;
  width: 1.5em;
  float: right;
  margin-right: 0.1em;
  margin-top: 0.2em;
  background-image: url("../img/copy_symbol.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.copySymbolHidden
{
  display: none;
}
.copySymbolDark
{
  background-image: url("../img/copy_symbol_dark.png"); 
}

.copyNotification
{
  font-size: 0.6em;
  width: 10em;
  margin-left: -3.5em;
  margin-top: 2.5em;
  text-align: center;
}

.copyNotificationHidden
{
  display: none;
}

.separationLine
{
  height: .1em;
  width: 90vw;
  margin: auto;
  background-color: var(--dark_gray);
}

.linkContainer
{
  display: inline-flex;
  width: 20em;
}

.linkBtn
{
  border: 1px solid var(--light_gray);
  border-radius: 5px;
  background-color: var(--middle_gray);
  color: white;
  font-size: 0.8em;
  line-height: 1.7em;
  cursor: pointer;
}

.linkBtn:hover
{
  background-color: var(--dark_gray);
}

.linkBtnHidden
{
  display: none;
}

.link
{
  font-size: 0.8em;
  line-height: 1.7em;
  margin-left: 1em;
}

.linkHidden
{
  display: none;
}

.copyMsg
{
  font-size: 0.8em;
  line-height: 1.7em;
  margin-top: 1.7em;
  margin-left: -2.5em;
}

.copyMsgHidden
{
  display: none;
}