@font-face {
  font-family: montserrat;
  src: url(../assets/fonts/Montserrat/static/Montserrat-Black.ttf);
}
@font-face {
  font-family: NES;
  src: url(../assets/fonts/NES/Pixel_NES.otf);
}
nav > a > img {
  position: relative;
  height: 30px;
}

#navT {
  color: #000000;
  padding: 0;
  margin: 0;
}

#navT:hover {
  opacity: 70%;
}

body {
  margin: 0px;
  padding: 0px;
  padding-bottom: 150px;
  background-color: #FFFFFF !important;
}

a:hover {
  cursor: pointer;
}

#sText {
  color: #FFFFFF;
}

h1 {
  font-family: montserrat;
  color: #000000;
}

p, a, h2, label, #tSmall, h5, span {
  color: #000000;
}

#tSmall {
  opacity: 70%;
}

#btn, #arrow, #arrow2 {
  color: #FFFFFF;
}

.card, .modal-content {
  background-color: #FFFFFF !important;
}

#sliderCont {
  background-color: #f8f4f4;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 30px;
  width: 100%;
}

#homeSlider {
  position: absolute;
}

#homeSlider > div, #homeSlider {
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 25px;
  overflow: hidden;
}

#homeSlider > div > div > div > div {
  margin: 0;
  padding: 0;
  border-radius: 25px;
}

#TLOZ {
  image-rendering: pixelated;
}

.title {
  margin-top: 30px;
  width: 100%;
  position: absolute;
}

.title > h2, .title > h1, .title > p {
  font-size: 110%;
}

.title > h1 {
  margin: 0px;
}

.title > p {
  font-size: 40px;
  margin-top: 5px;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: top;
  animation-name: bounce;
  animation-timing-function: ease;
  display: none;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
#homeText {
  bottom: 4vw;
  text-shadow: 2px 2px 4px #000000;
}

@media only screen and (min-width: 768px) {
  .title > p {
    display: block;
  }
  #homeText {
    top: 0px;
  }
}
#homeContent > div {
  padding: 5px;
  margin: 0px;
}

#homeContent > div > div {
  border-radius: 25px;
  padding: 15px;
  background-color: #f8f4f4;
  height: 100%;
}

#homeContent > div > div > div > div > a > div, #homeContent > div > div > div > a > div, #pButton > div {
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 25px;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
}

#homeContent > div > div > div > div > a, #homeContent > div > div > div > a, #pButton {
  text-decoration: none;
}

#homeContent > div > div > div > div > a > div:hover #arrow, #homeContent > div > div > div > a > div:hover #arrow2, #pButton > div:hover #arrow {
  transform: translatex(5px);
}

#pAboutMe > h1 {
  margin-top: 10px;
}

#pAboutMe > div > div > div > h1 {
  font-family: NES;
}

#pAboutMe > div > div > div > a > img {
  position: relative;
  left: 25%;
  width: 50%;
}

.Links > img {
  image-rendering: pixelated;
  width: 10%;
  bottom: 0;
  margin-left: 20%;
  position: absolute;
  z-index: 2;
}

.LinkTriforce {
  z-index: 2;
  display: none;
}

#pAboutMe > div > div > div > a:hover .Link {
  display: none;
}

#pAboutMe > div > div > div > a:hover .LinkTriforce {
  display: block;
}

#pAboutMe > div > div > div > a:hover .NEScon {
  opacity: 80%;
}

#game {
  position: relative;
  margin-top: 10px;
  height: 500px;
}

.modal-body {
  height: 400px;
}

.modal-content {
  width: 100px;
}

#tAboutMe > div {
  margin-top: 30px;
  margin-bottom: 150px;
  padding: 5px;
  background-color: #f8f4f4;
  border-radius: 25px;
  padding: 25px;
}

#bold {
  font-weight: bold;
  color: #000000;
  padding: 0;
  margin: 0;
}

#noMP {
  margin: 0;
  padding: 0;
}

#ul {
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

#tAboutMe > div > div > div > a > div:hover #arrow {
  transform: translatex(5px);
}

#pExperience > div > div {
  margin-top: 20px;
}

#codeColumns {
  height: 200px;
  max-width: 600px;
  margin: 0 auto;
}

#codeColumns tbody {
  overflow-y: hidden; /* remove this to see how it works */
}

#codeColumns tbody th {
  background-color: #FFFFFF;
  z-index: 1;
}

@keyframes moving-bars {
  0% {
    transform: translateY(100%);
  }
  15% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  #codeColumns tbody td {
    animation: moving-bars 8s linear;
  }
}
#textBox {
  background-color: #f8f4f4;
  border-radius: 25px;
  margin: 5px;
  width: 100%;
}

.card-body > div > div > img {
  position: relative;
  width: 100%;
}

.card-body > div > div {
  position: relative;
  float: right;
}

#pContact {
  margin-top: 30px;
}

#pContact > div > div > div > div > div > img {
  border-radius: 50% 20%/10% 40%;
  width: 75%;
  padding-top: 30px;
}

#pContact > div > div > div > div > div > div > div {
  margin-top: 10px;
  position: relative;
}

#pContact > div > div > div > div > div > div > div > a {
  color: #000000;
  text-decoration: underline;
}

#pContact > div > div > div > div > div > div > div > a > p > img {
  position: relative;
  height: 16px;
  bottom: 2px;
  margin-right: 3px;
}

#pContact > div > div > div > div > div > div > div {
  padding-bottom: 50px;
}

.form-control {
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
  #pContact > div > div > div > div > div > img {
    padding-top: 0;
    padding-bottom: 0px;
    height: 300px;
    width: 300px;
  }
}
footer, nav {
  background-color: #f8f4f4;
  padding: 10px;
  filter: brightness(97%);
}

footer > div > div > img {
  height: 30px;
}

footer > div > div > p {
  color: #000000;
  font-weight: bold;
}

@media (prefers-color-scheme: dark) {
  body, #codeColumns tbody th {
    background-color: #222222 !important;
  }
  nav > a > img, footer > div > div > img, #navTog {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
  p, a, h1, h2, label, #tSmall, h5, span, #bold, #codeColumns tbody th, #homeContent > div > div > div > a > div, #homeContent > div > div > div > div > a > div, input, textarea {
    color: #FFFFFF !important;
  }
  .card, .modal-content {
    background-color: #313131 !important;
  }
  #homeContent > div > div, #experience > div, #tAboutMe > div, #textBox, footer, nav, input, textarea, .custom-file-label, #sliderCont {
    background-color: #434343 !important;
  }
}
.title > h2, .title > h1, .title > p {
  color: #FFFFFF !important;
}/*# sourceMappingURL=style.css.map */