/* Declare Variables */

/* Palette 2: https://www.canva.com/learn/website-color-schemes/ */

:root {
  --small:     16px;
  --medium:    24px;
  --large:     32px;

  --light:     #E7DFDD;
  --dark:      #0E0B16;
  --highlight: #A239CA;
  --punch:     #4717f6;
  
	font-size: var(--small);

  --header-size: 90px;
}

* {
  box-sizing: border-box;
}

/* Standard Classes */

.page-content  {
	margin: 2rem auto;
	max-width: 800px;
}
.feature {
  background-color: var(--punch);
  padding: 2rem;
}
.feature > * {
  display: table;
  margin: 0 auto;
}

.small     {
  font-size: var(--small);
  font-family: "Barlow Condensed", sans-serif;
}
.medium    {
  font-size: var(--medium);
  font-family: 'Oswald', sans-serif;
}
.large     {
  font-size: var(--large);
  font-family: 'Oswald', sans-serif;
}

.light-c     {color: var(--light)}
.dark-c      {color: var(--dark)}
.highlight-c {color: var(--highlight)}
.punch-c     {color: var(--punch)}

.light-b     {background-color: var(--light)}
.dark-b      {background-color: var(--dark)}
.highlight-b {background-color: var(--highlight)}
.punch-b     {background-color: var(--punch)}

/* Normalize */

html, body {
  height: 100%;
  padding: 0;
}

body {
  margin: 0;
  background-color: var(--dark);
  color: var(--light);
}

/* Flex on the haters */

.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-wrapper > * {
  flex-shrink: 0;
}

/* Header */

.header {
  height: var(--header-size);
  width: 100%;
  position:fixed;
  top: 0;
  background-color: #101010;
}

.inner_header {
  width: 80%;
  height: 100%;
  display: block;
  margin: 0 auto;
}

.logo_container {
  height: calc(var(--header-size)*0.5);
  /* width: calc(var(--header-size)/2); */
  float: left;
  position:relative;
  top:50%;
  transform: translateY(-50%);
}

.logo {
  background-image: url("key.svg");
  background-position: center;
  /* background-color: white; */
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: calc(var(--header-size)*0.5);
  /* display: inline-block; */
}

.logo:hover {
  background-image: url("keyHover.svg");
}

.logo:active {
  background-image: url("keyPressed.svg");
}

.logo::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url("keyHover.svg") url("keyPressed.svg");
}

.navigation {
  float: right;
  height: 100%;
  margin: 0;
}

.navigation a {
  height: 100%;
  display: table;
  float: left;
  padding: 0 20px;
  text-decoration: none;
}

.navigation a:last-child {
  padding-right: 0;
}

.navigation a li {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  color: white;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 16px;
}

.header-pad {
  height: var(--header-size);
}

/* Footer */

.footer-spacer {
  flex-shrink: 1;
  flex-grow: 1;
}

.footer {
  height: 3rem;
  background-color: #101010;
}

.footer p {
  font-family: "Barlow Condensed", sans-serif;
  text-align: center;
}