/* Include padding and border in total */
* {
  box-sizing: border-box;
  font-family: 'Source Code Pro', monospace;
}

/* Remove default margin */
body {
  margin: 0rem;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
}

.grid {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-rows: max-content max-content auto max-content;
  grid-template-columns: min-content auto max-content;
}

/* Style the header */
.header {
  color: #dadae3;
  background-color: #212119;
  text-align: center;
  grid-row-start: 1;
  grid-column: 1 / span 3;
  height: 0rem;
  padding: 0rem;
  transition: height 2s ease-in-out 0.1s, padding 2s ease-in-out 0.1s;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #303024;
  grid-row-start: 2;
  grid-column: 1 / span 3;
}

/* Style the topnav links */
.topnav a, .topnav label {
  float: left;
  display: block;
  color: #dadae3;
  background-color: #212119;
  text-align: center;
  padding: 0.875rem 1rem;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover, .topnav label:hover {
  background-color: #ddd;
  color: black;
}

a.align-right, label.align-right, div.align-right {
  float: right;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
}

/* Side panels */
.side {
  color: #dadae3;
  background-color: #212119;
}

.left {
  /*grid-row-start: 3; fix this */
  grid-column-start: 1;
  grid-row: 3 / span 2;
  width: calc(11.151rem + 1.25rem);
  padding: 0.625rem 0rem;
  text-align: center;
  transition: width 2s ease-in-out 0.1s, padding 2s ease-in-out 0.1s;
}

aside > a {
  display: block;
  text-decoration: none;
  color: #dadae3;
}

aside > a:hover {
  background-color: #ddd;
  color: black;
}

.middle {
  /*grid-row-start: 3; fix this */
  /*grid-column-start: 2; fix this*/
  grid-column: 2 / span 2; /* fix this */
  grid-row: 3 / span 2; /* fix this */
  height: calc(100vh - 3rem);
  transition: height 2s ease-in-out 0.1s, padding 2s ease-in-out 0.1s;
}

/* Configure the central frame */
.site {
  width: 100%;
  height: 100%;
  border: none;
}

.right {
  grid-row-start: 3;
  grid-column-start: 3;
  width: 0rem;
  padding: 0rem;
  transition: width 2s ease-in-out 0.1s, padding 2s ease-in-out 0.1s;
}

/* Style the footer */
.footer {
  color: #dadae3;
  background-color: #212119;
  text-align: center;
  grid-row-start: 4;
  grid-column: 1 / span 3;
  height: 0rem;
  padding: 0rem;
  transition: height 2s ease-in-out 0.1s, padding 2s ease-in-out 0.1s;
}

.skip {
  color: #212119;
  background-color: #dadae3;
  border: #212119 solid 0.1rem;
  text-align: center;
  padding: 0.875rem 1rem;
  text-decoration: none;
  position: absolute;
  z-index: 1;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip:focus {
  transform: translateY(0%);
}

.header h1, .footer h1, .left p, .right p {
  visibility: visible;
  opacity: 1;
  margin: 1rem 0rem;
  transition: opacity 1.25s ease-in-out 0.8s, margin 2s ease-in-out 0.1s, visibility 0.1s ease-in-out 0s;
}

.left h2, .right h2 {
  visibility: visible;
  opacity: 1;
  padding: 0.625rem;
  transition: opacity 2.25s ease-in-out 0.8s;
}

#logo {
  height: 100%;
  float: left;
}

#top-toggle:checked ~ .header, #bottom-toggle:checked ~ .footer {
  height: calc(7.6166875rem);
  padding: 1.25rem;
}

#top-toggle:checked ~ .middle {
  height: calc(100vh - 3rem - 7.6166875rem);
}

#left-toggle:checked ~ .left {
  width: 0;
  padding: 0;
}

#right-toggle:checked ~ .right {
  width: calc(7.6166875rem + 2.9375rem - 1rem);
  padding: 0.625rem;
}

label.ascend-btn, label.dropbtn, label.open-left {
  display: none;
}

label.descend-button, label.drop-x, label.close-left {
  display: block;
}

div.dropdown-content {
  position: absolute;
  display: inline-grid;
  z-index: 1;
  top: 3rem;
  right: 0rem;
}

label.dropbtn > p {
  margin: 0rem;
}

#top-toggle:checked ~ .topnav > label.descend-btn, #left-toggle:checked ~ .topnav > label.close-left, #link-toggle:checked ~ .topnav > div.dropdown > label.drop-x, #link-toggle:checked ~ .topnav > div.dropdown > div.dropdown-content {
  display: none;
}

#top-toggle:checked ~ .topnav > label.ascend-btn, #left-toggle:checked ~ .topnav > label.open-left, #link-toggle:checked ~ .topnav > div.dropdown > label.dropbtn {
  display: block;
}

#dropdown-box:hover > #dropdown-content-box {
  display: inline-grid;
}

#top-toggle:checked ~ .topnav > div.dropdown > div.dropdown-content {
  top: calc(7.6166875rem + 3rem);
}

#top-toggle:checked ~ .header h1, #bottom-toggle:checked ~ .footer h1 {
  visibility: visible;
  opacity: 1;
  margin: 1.34rem 0rem;
}

#top-toggle:checked ~ .header h1 {
  margin-right: 61.4px;
}

#left-toggle:checked ~ .left h2, #right-toggle:checked ~ .right h2, #left-toggle:checked ~ .left p, #right-toggle:checked ~ .right p {
  visibility: hidden;
  opacity: 0;
  padding: 0;
  margin: 0;
}

/* Clear floats after the columns */
.grid:after {
  content: "";
  display: table;
  clear: both;
}