/* Font Imports */

@import url('https://fonts.googleapis.com/css?family=Muli|Sniglet&display=swap');


/* Body */

body {
  background-color: black;
  margin: 0px;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}


/* Navigation */

#navigation {
  width: 100%;
  margin: 5% auto 0px auto;
  font-family: 'Sniglet', sans-serif;
  color: white;
}

#logo {
  display: block;
  width: 500px;
  height: auto;
  margin: 0 auto;
}

#navigation h1 {
  width: 100%;
  margin: 50px auto 20px;
  font-size: 4em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-align: center;
}

#navigation h2 {
  width: 100%;
  margin: 20px auto;
  font-size: 1.8em;
  letter-spacing: 0.2em;
  text-align: center;
}

#nav-links {
  width: 500px;
  margin: 40px auto 20px;
  display: flex;
  justify-content: space-around;
}

#nav-links a {
  margin: 0px 10px;
  padding: 0.2em 0.4em;
  font-size: 1.3em;
  border: 0.2em solid white;
  border-radius: 10px;
  transition: 0.2s;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

#nav-links a:hover {
  background-color: white;
  color: black;
}

#nav-social-icons {
  width: 400px;
  margin: 30px auto 20px;
  display: flex;
  justify-content: space-around;
}

#nav-social-icons a {
  width: 32px;
  height: 32px;
  margin: 0px 10px;
  border: 0.2em solid white;
  border-radius: 10px;
  transition: 0.2s;
  cursor: pointer;
  color: white;
  background-color: black;
}

#nav-social-icons  a:hover {
  background-color: white;
  color: black;
}

#nav-social-icons img {
  display: block;
  width: 32px;
  height: 32px;
  margin: auto auto;
  filter: invert(1);
}

#nav-social-icons img:hover {
  filter: invert(0);
}


/* Content */

#content {
  width: 700px;
  margin: 40px auto;
  padding-top: 10px;
  color: white;
  font-family: 'Muli', sans-serif;
}

#content .page {
  display: none;
  margin: 0px auto;
}

#content h1 {
  width: 100%;
  margin: 10px auto 30px;
  font-size: 2em;
  letter-spacing: 0.2em;
  text-align: center;
  font-family: 'Sniglet', sans-serif;
}

#content p {
  display: block;
  width: 600px;
  margin: 20px auto;
  font-size: 1.4em;
  line-height: 1.5em;
  text-indent: 20px;
}

#content .up-arrow {
  display: block;
  width: 60px;
  margin: 5px auto;
  text-align: center;
  font-size: 3em;
  color: #7a7a7a;
  transition: 0.2s;
  cursor: pointer;
}

#content .centered p {
  width: 100%;
  margin: 10px auto;
  text-align: center;
}

#content .centered a {
  color: #7a7a7a;
  font-size: 1.6em;
  text-decoration: none;
  transition: 0.2s;
}

#content .centered a:hover {
  color: white;
}

#content .centered hr {
  border: 0px;
  margin-top: 30px;
}

#content .up-arrow:hover {
  color: white;
}

#content .down-arrow {
  display: block;
  width: 10%;
  margin: 0px auto 20px;
  text-align: center;
  color: #a5a5a5;
  font-size: 3em;
  transition: 0.2s;
}

#content .down-arrow:hover {
  color: white;
  cursor: pointer;
}


/* About */

#about {
  width: 600px;
}


/* Zipper Display */

#content .zipper-container {
  display: flex;
  width: 100%;
  margin: 10px 0px;
}

#content .zipper-container img {
  display: block;
  width: 36%;
  border: 2px dashed #a5a5a5;
  border-radius: 10px;
  filter: invert(1);
}

#content .zipper-img-left {
  margin-right: 4%;
}

#content .zipper-img-right {
  margin-left: 4%;
}

#content .zipper-link-left {
  display: block;
  border: 2px dashed #a5a5a5;
  border-radius: 10px;
  margin-right: 4%;
}

#content .zipper-link-left:hover {
  border: 2px dashed black;
}

#content .zipper-link-left img {
  width: 100%;
  filter: invert(0);
  border: none;
  transition: 0.2s;
}

#content .zipper-link-left img:hover {
  filter: invert(1);
}

#content .zipper-link-right {
  display: block;
  border: 2px dashed #a5a5a5;
  border-radius: 10px;
  margin-left: 4%;
}

#content .zipper-link-right:hover {
  border: 2px dashed black;
}

#content .zipper-link-right img {
  width: 100%;
  filter: invert(0);
  border: none;
  transition: 0.2s;
}

#content .zipper-link-right img:hover {
  filter: invert(1);
}

#content .zipper-block-right {
  display: block;
  width: 60%;
}

#content .zipper-block-left {
  display: block;
  width: 60%;
}

#content .zipper-container h1 {
  font-size: 1.8em;
  margin: 10px 0px;
}

#content .zipper-block-left h1 {
  text-align: right;
}

#content .zipper-block-right h1 {
  text-align: left;
}

#content .zipper-container h2 {
  font-size: 1.4em;
  font-style: italic;
  font-weight: normal;
  margin: 0px 0px 30px;
}

#content .zipper-block-left h2 {
  text-align: right;
  padding-right: 6px;
}

#content .zipper-block-left h2::after {
  content: "⤚";
  color: #b6b6b6;
  padding-left: 15px;
}

#content .zipper-block-right h2 {
  text-align: left;
}

#content .zipper-block-right h2::before {
  content: "⤙";
  color: #b6b6b6;
  padding-right: 15px;
}

#content .zipper-container ul {
  width: 90%;
  list-style: none;
  margin-bottom: 30px;
}

#content .zipper-block-left ul {
  margin-left: 20%;
}

#content .zipper-block-right ul {
  margin-right: 10%;
}

#content .zipper-container li::before {
  content: "+";
  color: white;
  padding-right: 10px;
}

#content .zipper-container li {
  margin: 5px 0px;
  font-size: 1.2em;
  text-indent: 0px;
  color: #b6b6b6;
}

#content .zipper-container p {
  display: block;
  width: 100%;
  font-size: 1.1em;
  text-indent: 0px;
  font-style: italic;
  color: #b6b6b6;
}

#content .zipper-block-left p {
  text-align: right;
}

#content .zipper-block-right p {
  text-align: left;
}


/* Social Icons */

#content .social-icons-container {
  width: 100%;
  margin: 30px auto 20px;
  display: flex;
}

#content .zipper-block-right .social-icons-container {
  justify-content: flex-start;
}

#content .zipper-block-left .social-icons-container {
  justify-content: flex-end;
}

#content .social-icons-container a {
  width: 28px;
  height: 28px;
  margin: 0px 20px;
  padding: 1px;
  border: 0.2em solid white;
  border-radius: 5px;
  transition: 0.2s;
  cursor: pointer;
  color: white;
  background-color: black;
  filter: brightness(0.7);
}

#content .social-icons-container  a:hover {
  background-color: white;
  color: black;
  filter: brightness(1);
}

#content .social-icons-container img {
  display: block;
  border: none;
  width: 28px;
  height: 28px;
  margin: auto auto;
  filter: invert(1);
}

#content .social-icons-container img:hover {
  filter: invert(0);
}


/* Projects */

#content .project-link {
  display: block;
  color: #7a7a7a;
  font-size: 1.6em;
  text-decoration: none;
  transition: 0.2s;
}

#content .project-link:hover {
  color: white;
}

#content .project-link-left {
  display: block;
  color: #7a7a7a;
  font-size: 1.6em;
  text-decoration: none;
  text-align: right;
  transition: 0.2s;
}

#content .project-link-left:hover {
  color: white;
}