* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

li, a{
  color: #eeebe8;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  background-color: #121212;
  height: 60px;;
}

body
{
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #eeebe8;
    background-color: #121212;
}

/*#region navbar-header*/
.logo {
  display: flex;
  justify-content: flex-start;
  object-fit: contain;
  object-fit: scale-down;
  padding: 10px;
}

.navbar {
  /*position: sticky;*/
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;;
  animation: scroll_topheader;
  animation-timeline: scroll(y);
}

.navbar.floating {
  position: fixed;
}

@keyframes scroll_topheader {
  0%{
    background-color: #12121200;
  }
  20%{
    background-color: #1c1c1c;
  }
  100%{
    background-color: #1c1c1c;
  }
}

/*#region navlinks*/
.navlinks {
  display: flex;
  justify-content: flex-end;
  list-style: none;

  padding-right: 20px;
}
.navlinks > li {
  float: left;

  padding: 8px 20px;
}
.navlinks > li > a {
  display: inline-block;
  
  transition: all 0.3s ease 0s;
}
.navlinks > li > a:hover, .dropdown:hover{
  display: block;
  color: white;

  transition: all 0.3s ease 0s;
}
/*add selected link style*/
/*#endregion navlinks*/

/*#region dropdown*/
li.dropdown {
  /* display: inline-block; */
  position: relative;
}

.dropdown-content {
  display: grid;
  position: absolute;
  align-items: left;
  align-items: start; /* stops "line" from stretching out of bounds*/

  grid-template-columns: auto 1fr;
  grid-template-areas:
    "spacer spacer" /* specially for solid lines*/
    "line content";

  height: fit-content;
  width: 150px;
  
  animation: scroll_topheader;
  animation-timeline: scroll(y);

  display: none;
}

/* #region dropdown grid areas*/
.dropdown-content > div.spacer {
  grid-area: spacer;
  height: 0.5em;
}
.dropdown-content > div.line {
  grid-area: line;
  width: 0.15em;
  height: 100%; /* fill the dropdown */
  background: linear-gradient(#eeebe800,#eeebe81e);
}
.dropdown-content > div.content {
  grid-area: content;
  text-align: left;
  height: fit-content;
  
  padding-left: 0.6em;
  padding-top: 0.8em;
}
/* #endregion dropdown grid areas*/

.dropdown-content > div{
  display: block;
  padding: 0;
  margin: 0; /*fixes extra space between "line" and links*/
}

.dropdown-content > div a {
  display: block;
  line-height: 2em;
  
  text-align: left;
  text-decoration: none;
  padding: 0;
  padding-left: 0em;

  font-size: 90%;
  
  opacity: 0.5;
}
.dropdown-content > div a:hover {
  padding: 0;

  opacity: 0.7;
  
  /* transition: all 0.3s ease 0s; */
}

.dropdown:hover .dropdown-content {
  display: grid;
}
/*#endregion dropdown*/

.subheader {
  width: 100%;
  height: 21em;
  background-image: url("/media/logo_horizontaltitle_bones.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/*#endregion navbar-header*/

.content {
  display: flex;
  justify-content: center;
  padding: 2em;
  margin: auto;
  height: 100em;
}