.navbar-dark {
  background: rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateY(-50px);
}

.loaded .navbar-dark {
  opacity: 1;
  transform: translateY(0%);
  transform-origin: top;
  transition: all 0.3s ease-in;
}

.nav-item {
  display: inline-block;
  backface-visibility: hidden;
  vertical-align: middle;
  position: relative;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0);
  transform: translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
}

.nav-item:before {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  content: "";
  top: 100%;
  left: 5%;
  height: 0.5rem;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 80%);
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}

.nav-item:hover, .nav-item:active, .nav-item:focus {
  transition-timing-function: ease-in;
  transition: 0.3s;
  transform: translateY(0.2rem);
}

.nav-item:hover:before, .nav-item:active:before, .nav-item:focus:before {
  opacity: 1;
  transform: translateY(-0.4rem);
}

.navbar-dark .navbar-nav .active > .nav-link {
  color: #ea6f01;
}
.navbar-dark .navbar-nav .nav-link {
  color: #fdfcee;
  font-family: "Numans", sans-serif;
  font-size: smaller;
}
.navbar-dark .navbar-nav .nav-item {
  text-transform: uppercase;
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
}

.dropdown-toggle::after {
  transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

.navbar-toggler, .navbar-toggler:active, .navbar-toggler:focus {
  border: none;
  box-shadow: none;
}

.nav-header:hover {
  color: rgba(255, 255, 255, 0.75);
}

.nav-header-icon {
  text-align: right;
  font-size: 0.8em;
  margin-top: -10px;
  margin-bottom: -5px;
}

.nav-header {
  color: #fdfcee;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 1.5em;
}

.dropdown-menu {
  background: rgba(0, 0, 0, 0.95);
}

.dropdown-menu-center {
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

.dropdown-menu li a {
  color: #fdfcee;
}

.dropdown-menu li a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.dropdown-menu li a:active {
  color: #ea6f01;
}

.dropdown-menu li .drop:hover {
  color: #ea6f01;
}

.dropdown-menu li .drop {
  color: #ea6f01;
}

.dropdown-item {
  text-align: center;
  color: #fdfcee;
}

.dropdown-item:hover {
  background: rgba(0, 0, 0, 0.95);
  color: rgba(255, 255, 255, 0.75);
}

.dropdown-item:active {
  color: #ea6f01;
}

@media all and (min-width: 576px) {
  .nav-item .dropdown-menu {
    display: none;
    margin-top: 0;
  }
  .nav-header {
    display: none;
  }
  .nav-item:hover .dropdown-menu {
    display: block;
    color: #fdfcee;
    font-family: "Numans", sans-serif;
    font-size: smaller;
  }
}
@media all and (max-width: 576px) {
  .dropdown-toggle::after {
    display: none;
  }
  .navbar-dark .navbar-nav .nav-item {
    text-align: right;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .navbar-dark .navbar-nav .nav-item:before {
    left: 65%;
  }
}
.html-mini .nav-item .dropdown-menu {
  display: none;
  margin-top: 0;
}
.html-mini .nav-header {
  display: none;
}
.html-mini .nav-item:hover .dropdown-menu {
  display: block;
  color: #fdfcee;
  font-family: "Numans", sans-serif;
  font-size: smaller;
}
.html-mini .navbar-dark .navbar-nav .nav-item {
  font-size: 0.8em;
  text-align: center;
  margin-left: 1em;
  margin-right: 1em;
  margin-top: 0em;
  margin-bottom: 0em;
}
.html-mini .navbar-dark .navbar-nav .nav-item:before {
  left: 5%;
}
.html-mini .dropdown-toggle::after {
  display: inline-block;
}

.mini-phone-html .nav-header {
  font-size: 0.8em;
}
.mini-phone-html .nav-header-icon {
  text-align: right;
  font-size: 0.8em;
  margin-top: -5px;
}
.mini-phone-html .navbar-dark .navbar-nav .nav-item {
  font-size: 0.8em;
  text-align: right;
  margin-top: 1em;
  margin-bottom: 1em;
}
.mini-phone-html .navbar-dark .navbar-nav .nav-item:before {
  left: 65%;
}

img {
  pointer-events: none;
}

hr {
  border: 1px #888d8e;
}

body {
  background-color: #e3eaed;
}

h2 {
  text-align: center;
  font-size: 2em;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: auto;
}

h3 {
  font-family: "Raleway", sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  color: #222424;
}

h5 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

p {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

a:link {
  text-decoration: none;
  color: #ea6f01;
}

a:visited {
  text-decoration: none;
  color: #ea6f01;
}

a:hover {
  text-decoration: none;
  color: #303132;
  font-weight: 400;
}

a:active {
  text-decoration: none;
  color: #ea6f01;
}

.tech ul li {
  font-weight: 300;
  list-style: none;
}

div {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.html-mini {
  zoom: 0.7;
}

.mini-phone-html {
  zoom: 0.7;
}

.hidden {
  display: none;
}

.about-background {
  background-size: cover;
}

.about-section {
  min-height: 98vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 2vh 2vw;
}

.about-box {
  opacity: 0;
  transform: translateY(30px);
  max-width: 1000px;
  align-self: center;
  margin-top: auto;
  color: #dee5e8;
  background-color: rgba(21, 22, 22, 0.95);
}

.loaded .about-box {
  opacity: 1;
  transform: translateY(0%);
  transform-origin: top;
  transition: all 1s ease-in 2.5s;
}

.about-icons div a {
  font-size: 2rem;
  display: inline-block;
  padding: 0 2vw;
  color: #e3eaec;
  transition: 0.2s ease-in-out;
}

.about-icons div a:hover {
  color: #EEEEEE;
  transform: scale(1.2);
}

#linkedin-header {
  opacity: 0;
  transform: translate(-20px, 20px);
}

#email-header {
  opacity: 0;
  transform: translateY(20px);
}

#github-header {
  opacity: 0;
  transform: translate(20px, 20px);
}

.loaded #linkedin-header {
  opacity: 1;
  transform: translateY(0%);
  transition: all 0.6s ease-in 1.6s;
}

.loaded #email-header {
  opacity: 1;
  transform: translateY(0%);
  transform-origin: bottom left;
  transition: all 0.6s ease-in 1.8s;
}

.loaded #github-header {
  opacity: 1;
  transform: translateY(0%);
  transform-origin: bottom right;
  transition: all 0.6s ease-in 2s;
}

.icon-loaded {
  transform-origin: center !important;
  transition: 0.2s ease-in-out !important;
}

#linkedin-header:hover {
  color: #EEEEEE;
  text-shadow: -3px 3px #0077b5, 0px 0px 10px rgba(253, 252, 238, 0.5);
  transform: scale(1.2);
  transition: 0.2s ease-in-out;
}

#email-header:hover {
  color: #EEEEEE;
  text-shadow: 0px 3px #B23121, 0px 0px 10px rgba(253, 252, 238, 0.5);
  transform: scale(1.2);
  transition: 0.2s ease-in-out;
}

#github-header:hover {
  color: #EEEEEE;
  text-shadow: 3px 3px #333, 0px 0px 10px rgba(253, 252, 238, 0.5);
  transform: scale(1.2);
  transition: 0.2s ease-in-out;
}

.about-headline {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
  color: #e3eaec;
  font-size: 4rem;
  font-family: "Raleway", sans-serif;
  font-weight: 200;
}

.loaded .about-headline {
  opacity: 1;
  transform: translateY(0%);
  transition: all 0.6s ease-in 1.3s;
}

.hr-head {
  border: 0px solid #e3eaec;
  height: 1px;
  color: #e3eaec;
  background-color: #e3eaec;
  transform: scaleX(0);
}

.loaded .hr-head {
  transform: scaleX(1);
  transform-origin: center;
  transition: all 1.3s ease-in 0.3s;
}

.about-box-icons div a {
  font-size: 1.6rem;
  display: inline-block;
  color: #dee5e8;
  transition: 0.2s ease-in;
}

.about-box-icons div a:hover {
  color: #EEEEEE;
  text-shadow: 0px 0px 3px rgba(253, 252, 238, 0.5);
  transform: scale(1.1);
}

.avi {
  max-width: 120px;
  display: block;
  margin: auto;
  border-color: #7d7d7d;
}

@media all and (max-width: 576px) {
  .about-section {
    padding: 0;
  }
  .about-icons {
    display: none;
  }
  #hr-head {
    display: none;
  }
  .about-headline {
    display: none;
  }
  .avi {
    display: none;
  }
  .about-box-icons {
    display: flex;
  }
  .loaded .about-box {
    transition: all 1s ease-in 1s;
  }
}
@media all and (min-width: 576px) {
  .about-box-icons {
    display: none;
  }
}
@media all and (max-height: 680px) {
  .about-icons {
    display: none;
  }
  #hr-head {
    display: none;
  }
  .about-headline {
    display: none;
  }
  .about-box-icons {
    display: flex;
  }
}
.html-mini ::-webkit-scrollbar {
  width: 10px;
}
.html-mini ::-webkit-scrollbar-track {
  background: #e3eaed;
  border-radius: 0px;
}
.html-mini ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 20px;
  border: 1px solid #fafafa;
}
.html-mini ::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d;
}
.html-mini .about-box-icons {
  display: none;
}
.html-mini .about-section {
  min-height: 120vh;
  max-width: 600px;
  padding: 2vh 2vw;
}
.html-mini .about-icons {
  display: flex;
}
.html-mini .about-icons div a {
  font-size: 1.2em;
  display: inline-block;
}
.html-mini .about-box {
  margin-top: 75px;
}
.html-mini #hr-head {
  display: inline-block;
  margin: 0;
}
.html-mini .about-headline {
  font-size: 2.3rem;
  display: block;
}
.html-mini .avi {
  max-width: 80px;
  display: block;
  margin: auto;
}
.html-mini h2 {
  font-size: 1.4em;
  letter-spacing: 0.05em;
}
.html-mini h3 {
  font-size: 1em;
}
.html-mini h5 {
  font-size: 0.9em;
}
.html-mini p {
  font-size: 0.8em;
}
.html-mini li {
  font-size: 0.8em;
}
.html-mini ul {
  padding-left: 22px;
}

.mini-phone-html ::-webkit-scrollbar {
  width: 7px;
}
.mini-phone-html ::-webkit-scrollbar-track {
  background: #e3eaed;
  box-shadow: inset 0 0 1px grey;
}
.mini-phone-html ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}
.mini-phone-html ::-webkit-scrollbar-thumb:hover {
  background: #7d7d7d;
}
.mini-phone-html .about-box-icons {
  display: flex;
}
.mini-phone-html .about-box-icons div a {
  font-size: 1rem;
  padding-left: 2vw;
  display: inline-block;
}
.mini-phone-html .avi {
  max-width: 80px;
  display: block;
  margin: auto;
}
.mini-phone-html h2 {
  font-size: 1.3em;
  letter-spacing: 0.05em;
}
.mini-phone-html h3 {
  font-size: 1em;
}
.mini-phone-html h5 {
  font-size: 0.9em;
  padding-left: 0px;
}
.mini-phone-html p {
  font-size: 0.8em;
}
.mini-phone-html li {
  font-size: 0.8em;
}
.mini-phone-html ul {
  padding-left: 8px;
}

.projects-section {
  max-width: 1000px;
  color: #303132;
}

.placeholder-section {
  max-width: 1000px;
  background: #EAF0F2;
  color: #303132;
}

.row-fade {
  opacity: 0;
  transform: translateY(3%);
  transition: all 0.3s ease-out;
}

.faded {
  opacity: 1;
  transform: translateY(0%);
  transition: all 0.3s ease-in;
}

@media all and (max-width: 992px) {
  body {
    background-color: #EAF0F2;
  }
  .projects-section {
    color: #212529;
  }
}
@media all and (min-width: 992px) {
  .placeholder-section {
    box-shadow: inset 0 0 1vh 1vw #e3eaed;
  }
  .hr-projects {
    display: none;
  }
}
.html-mini body {
  background-color: #e3eaed;
}
.html-mini .projects-section {
  max-width: 600px;
  color: #212529;
}
.html-mini .placeholder-section {
  max-width: 600px;
  box-shadow: inset 0 0 1vh 1vw #e3eaed;
}

.inventory-section {
  max-width: 1000px;
  background: #EAF0F2;
  color: #303132;
}

.phone-img {
  position: sticky;
  top: 14vh;
  max-height: 80vh;
}

.col-inventory {
  width: 65%;
}

@media all and (max-width: 768px) {
  .phone-img {
    position: sticky;
    top: 20vh;
  }
  div.phone {
    max-width: 250px;
  }
  .inventory-md-title {
    display: none;
  }
}
@media all and (min-width: 768px) {
  .inventory-title {
    display: none;
  }
}
@media all and (min-width: 992px) {
  .inventory-section {
    box-shadow: inset 0 0 1vh 1vw #e3eaed;
  }
}
.html-mini .inventory-section {
  max-width: 600px;
  box-shadow: inset 0 0 1vh 1vw #e3eaed;
}
.html-mini .phone-img {
  position: sticky;
  top: 20vh;
}
.html-mini div.phone {
  max-width: 350px;
}

.mini-phone-html div.phone {
  max-width: 100px;
}

.website-section {
  max-width: 1000px;
  background: #EAF0F2;
  color: #303132;
}

.mini-image {
  width: 100%;
  height: auto;
}

.mini-embed {
  width: 900px;
  position: relative;
}

.mini {
  position: relative;
  width: 90vw;
  padding-top: 20px;
  transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1) 0.3s;
}

.shrink {
  position: relative;
  transform: scale(0.7);
  transform-origin: right top;
  transition: all 1s cubic-bezier(0, 0.35, 0.45, 1);
}

.shrink-padding {
  background: linear-gradient(#EAF0F2 71%, transparent 90%, transparent 100%) no-repeat;
  -webkit-clip-path: inset(0 30px);
          clip-path: inset(0 30px);
}

.website-title {
  margin: 0;
  z-index: 1;
  transition: all 0.6s ease-out;
}

.title-shrink {
  margin: 0;
  top: 0%;
  transform: translateY(300%);
  transition: all 0.6s ease-out 0.6s;
}

.website-text {
  transition: all 0.6 ease-in-out;
}

.pc-embed {
  left: 152px;
  top: 88px;
  width: 550px;
  height: 311px;
  position: absolute;
}

.mobile-embed {
  left: 734px;
  top: 218px;
  width: 136px;
  height: 233px;
  position: absolute;
}

#mini-cursor {
  left: 0px;
  top: 0px;
  height: 15px;
  width: 10.2px;
  position: absolute;
}

@media all and (min-width: 992px) {
  .mini {
    width: 900px;
  }
  #mini-cursor {
    display: none;
  }
  .website-section {
    box-shadow: inset 0 0 1vh 1vw #e3eaed;
  }
}
@media all and (max-width: 992px) {
  .pc-embed {
    display: none;
  }
  .mobile-embed {
    display: none;
  }
}
@media all and (min-height: 640px) {
  .mini-row {
    position: sticky;
    top: -30px;
  }
}
@media all and (max-width: 768px) {
  .title-shrink {
    margin: 0;
    top: 0%;
    transform: translateY(200%);
    transition: all 0.6s ease-out 0.6s;
  }
}
@media all and (max-width: 576px) {
  .mini-row {
    top: 6vh;
  }
  .mini-padding {
    position: sticky;
    background: #EAF0F2;
    width: 98%;
    max-width: 876px;
    margin: auto;
  }
  .website-title {
    background: #EAF0F2;
  }
  .mini {
    background: linear-gradient(#EAF0F2 71%, transparent 90%, transparent 100%) no-repeat;
  }
  #mini-cursor {
    display: none;
  }
}
.html-mini .website-section {
  max-width: 600px;
  background: #EAF0F2;
  box-shadow: inset 0 0 1vh 1vw #e3eaed;
  color: #303132;
}
.html-mini .mini-row {
  top: 4vh;
}
.html-mini .mini-padding {
  background: #EAF0F2;
  width: 92%;
  max-width: 876px;
  margin: auto;
}

.mini-phone-html .mini {
  padding: 0;
  width: 100vw;
}

.label-section {
  max-width: 1000px;
  background: #EAF0F2;
  color: #303132;
}

@media all and (max-width: 768px) {
  div.label {
    max-width: 450px;
  }
}
@media all and (min-width: 992px) {
  .label-section {
    box-shadow: inset 0 0 1vh 1vw #e3eaed;
  }
}
.html-mini .label-section {
  max-width: 600px;
  box-shadow: inset 0 0 1vh 1vw #e3eaed;
}
.html-mini div.label {
  max-width: 300px;
}

.tracker-section {
  max-width: 1000px;
  background: #EAF0F2;
  color: #303132;
}

.tracker-img {
  border-radius: 25px;
  box-shadow: 0px 5px 10px 0px #151616;
  border-style: solid;
}

.fade-out {
  transform: scale(0.9);
  opacity: 70%;
  transition: all 1s cubic-bezier(0, 0.35, 0.45, 1);
}

.fade-out-1 {
  transform: scale(0.8);
  opacity: 40%;
  transition: all 1s cubic-bezier(0, 0.35, 0.45, 1);
}

.custom-card:nth-child(1n) {
  top: 40px;
}

.custom-card:nth-child(2n) {
  top: 80px;
}

.custom-card:nth-child(3n) {
  top: 120px;
}

@media all and (max-height: 680px) {
  .card0 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card3 {
    position: sticky;
    top: 55vh;
    transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  }
}
@media all and (max-width: 768px) {
  .card0 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .card3 {
    position: sticky;
    top: 55vh;
    transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  }
}
@media all and (min-height: 680px) and (min-width: 768px) {
  .card0 {
    position: sticky;
    top: 5vh;
    padding-bottom: 80vh;
  }
  .card1 {
    position: sticky;
    top: 42vh;
    padding-bottom: 45vh;
    transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  }
  .card2 {
    position: sticky;
    top: 52vh;
    padding-bottom: 17vh;
    transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  }
  .card3 {
    position: sticky;
    top: 55vh;
    transition: all 0.4s cubic-bezier(0, 0.55, 0.45, 1);
  }
}
@media all and (min-width: 992px) {
  .tracker-section {
    box-shadow: inset 0 0 1vh 1vw #e3eaed;
  }
}
.html-mini .tracker-section {
  max-width: 600px;
  box-shadow: inset 0 0 1vh 1vw #e3eaed;
}

.mini-phone-html .tracker-img {
  border-radius: 5px;
  box-shadow: 0px 5px 10px 0px #151616;
  border-style: solid;
}

.contact-section {
  background: #151616;
}

.contact {
  max-width: 1000px;
  color: #dee5e8;
}

.contact-icons .button {
  width: 80vw;
  text-align: center;
  background: #151616;
  border: none;
  text-decoration: none;
  color: #dee5e8;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.1em;
  font-size: 0.9em;
  font-weight: 300;
  transition: 0.2s ease-in;
}

.contact-icons .button:hover {
  color: #EEEEEE;
  text-shadow: 0px 0px 1px rgba(253, 252, 238, 0.5);
  transform: scale(1.05);
}

.hr-contact {
  width: 50vw;
  margin: auto;
}

.html-mini .contact-icons .button {
  font-weight: 400;
}
.html-mini .contact {
  max-width: 600px;
}
.html-mini .contact-icons .button {
  font-size: 0.7em;
}

.mini-phone-html .contact-icons .button {
  font-weight: 400;
}
.mini-phone-html .contact {
  max-width: 600px;
}
.mini-phone-html .contact-icons .button {
  width: 120vw;
  font-size: 0.6em;
  padding: none;
}

.footer {
  background: #151616;
  color: #888d8e;
}

.footer div p {
  font-family: "Raleway", sans-serif;
  font-size: 0.8em;
  font-weight: 400;
}

.html-mini .footer div p {
  font-size: 0.6em;
}

.mini-phone-html .footer div p {
  font-size: 0.5em;
}

.nopage {
  background-color: #ea6f01;
}

.meme {
  position: relative;
  height: 20vh;
  top: 30vh;
}/*# sourceMappingURL=style.css.map */