/* 
    Fonts:
    Hand drawn - font-family: 'Amatic SC', cursive; (Used in top nav bar "XD")
    Fun Blocky - font-family: 'Major Mono Display', monospace; (Used in bottom nav bar)
    Funky Retro - font-family: 'VT323', monospace;
    Main Font - font-family: 'Cutive Mono', monospace;

*/

.normal {
  color: white;
  background-color: #000000;
  background-image: url("../Images/asfalt-light.png");
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}

.normal a {
  color: white;
}

.lightMode {
  color: black;
  background-color: #bab5ab;
  background-image: url("../Images/asfalt-light.png");
}

.lightMode a {
  color: black;
}

#lightMode {
  cursor: pointer;
}

#top {
  display: flex;
  justify-content: space-between;

  font-family: "Amatic SC", cursive;
  font-size: 30px;
}

#top p {
  padding-left: 0.5em;
}

#topArchive {
  display: flex;
  justify-content: space-between;

  font-family: "Amatic SC", cursive;
  font-size: 30px;
}

#topArchive p {
  padding-right: 0.5em;
}

#drawer {
  width: 50vw;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}

@media (max-width: 530px) {
  #drawer {
    width: 50vw;
    display: flex;
    justify-content: space-evenly;
    text-align: center;

    /* ADDED FOR MOBILE */
    flex-direction: column;
  }
}

.show {
  display: block;
}

.hide {
  display: none;
}

#navBtn {
  fill: white;
  height: 2em;
  width: 1.2em;
  float: right;
  margin-top: 0.5em;

  padding-right: 0.5em;
}

#navBtn:hover {
  cursor: pointer;
}

#navBtnLight {
  fill: black;
  height: 2em;
  width: 1.2em;
  float: right;
  margin-top: 0.5em;

  padding-right: 0.5em;
}

#navBtnLight:hover {
  cursor: pointer;
}

#bottom {
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100vw;
  font-family: "Major Mono Display", monospace;
  margin-bottom: 5px;
}

#bottom h6 {
  margin: 0;
}

.aboutLight {
  color: black;
  text-decoration: none;
}

.aboutDark {
  color: white;
  text-decoration: none;
}

.myModalDark {
  background-color: #000000 !important;
  background-image: url("../Images/asfalt-light.png") !important;
  font-family: "VT323", monospace;
  color: white;
  font-size: 30px;
}

.myModalDark a {
  color: white;
  text-decoration: underline;
}

.myModalLight {
  background-color: #bab5ab !important;
  background-image: url("../Images/asfalt-light.png") !important;
  font-family: "VT323", monospace;
  color: black;
  font-size: 30px;
}

.myModalLight a {
  color: black;
  text-decoration: underline;
}

.mainTextDark {
  width: 100%;
  font-family: "VT323", monospace;
  color: white;
  font-size: 50px;
  text-align: center;
}

.mainTextLight {
  width: 100%;
  font-family: "VT323", monospace;
  color: black;
  font-size: 50px;
  text-align: center;
}

#archiveMain {
  padding: 0;
}

@media (max-width: 530px) {
  .mainTextDark {
    font-size: 40px;
  }

  .mainTextLight {
    font-size: 40px;
  }

  .mainTextDark p {
    padding: 0.5em;
  }

  .mainTextLight p {
    padding: 0.5em;
  }
}

.arrowArea {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}

a {
  text-decoration: none;
}

.projectsBack {
  display: flex;
  justify-content: center;
  text-align: center;
}

.projectsBack p {
  margin-right: 0.5em;
}

.projectsBack i {
  margin: auto;
  margin-right: 1em;
}

.archiveBack {
  display: flex;
  justify-content: center;
  text-align: center;
}

.archiveBack p {
  margin-left: 0.5em;
}

.archiveBack i {
  margin: auto;
  margin-left: 1em;
}

/* ARCHIVE STUFF */
.archiveLiLight {
  font-size: 40px;
  color: black;

  display: flex;
  justify-content: center;
  text-align: left;

  cursor: pointer;
}

.archiveLiDark {
  font-size: 40px;
  color: white;

  display: flex;
  justify-content: center;
  text-align: left;

  cursor: pointer;
}

.archiveHrLight {
  width: 50%;
  height: 1px;
  background-color: black;
  border: none;
}

.archiveHrDark {
  width: 50%;
  height: 1px;
  background-color: white;
  border: none;
}

@media (max-width: 783px) {
  .archiveLiLight {
    font-size: 25px;
    color: black;
  }

  .archiveLiDark {
    font-size: 25px;
    color: white;
  }
}

@media (max-width: 511px) {
  .archiveLiLight {
    font-size: 20px;
    color: black;

    display: flex;
    justify-content: center;
  }

  .archiveLiDark {
    font-size: 20px;
    color: white;

    display: flex;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .archiveLiLight {
    font-size: 30px;
    padding: 0;
    color: black;

    display: flex;
    justify-content: center;
  }

  .archiveLiDark {
    font-size: 30px;
    padding: 0;
    color: white;

    display: flex;
    justify-content: center;
  }
}

.archiveP {
  font-size: 20px;
  font-family: "Cutive Mono", monospace;
}

#post {
  margin: auto;
  font-family: "Cutive Mono", monospace;
  font-size: 20px;
  width: 75%;
  text-align: left;
  padding: 2em;
  margin-bottom: 2em;
}

.titleMarginBottom {
  margin-bottom: 4em;
}

@media (max-width: 530px) {
  .titleMarginBottom {
    margin-bottom: 2em;
  }
}

.projectsMain {
  margin: auto;
  margin-top: -1em;
  margin-bottom: 1em;
  font-size: xx-large;
  width: 85%;
  display: flex;
  justify-content: space-around;
}

.projectskills {
  width: 30%;
  text-align: left;
}

.projectExperience {
  width: 65%;
  text-align: left;
  font-size: xx-large;
}

#projectBottom {
  text-align: center;
  bottom: 0;
  width: 100vw;
  font-family: "Major Mono Display", monospace;
  margin-bottom: 5px;
}

#projectBottom h6 {
  margin: 0;
}

@media (max-width: 1190px) {
  .projectsMain {
    display: block;
    width: 90%;
  }

  .projectskills {
    list-style-position: outside;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .projectsCert {
    text-align: right;
  }

  .projectExperience {
    width: 100%;
  }
}

@media (max-width: 605px) {
  .projectskills {
    list-style-position: outside;
    width: 100%;
    display: block;
    text-align: center;
  }

  .projectskills ul {
    list-style: none;
  }

  .projectsCert {
    margin-top: 2em;
    list-style-position: outside;
    width: 100%;
    display: block;
    text-align: center;
  }

  .projectExperience {
    width: 100%;
  }
}

.projectMain {
  display: flex;
  justify-content: space-between;
}

.project {
  text-align: left;
  margin: auto;
  width: 45%;
  font-size: x-large;
}

.project h3 {
  font-size: xx-large;
}

@media (max-width: 1190px) {
  .projectMain {
    display: block;
    width: 90%;
  }

  .project {
    width: 90%;
  }
}

@media (max-width: 605px) {
  .projectMain {
    width: 100%;
    display: block;
    text-align: center;
  }
}
