body {
  position: relative;
  background-color: #212A31;
  color: #f2f2f2;
  font-family: "monospace";
}

/*******************************************************************
********************************************************************
                                    Home
********************************************************************
********************************************************************/
.home {
  height: 100vh;
  color: #f2f2f2;
}
.home .home-bg {
  position: absolute;
  overflow: hidden;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
}

.intro {
  position: relative;
  margin: 0 auto;
}
.intro .typewriter span {
  font-size: 3.5rem;
  font-weight: 700;
}
@media (max-width: 574px) {
  .intro .typewriter span {
    font-size: 2.5rem;
  }
}
.intro .specialist {
  font-size: 1.5rem;
}
@media (max-width: 574px) {
  .intro .specialist {
    font-size: 1.25rem;
  }
}
.intro .down-arrow-button-container {
  padding: 2.5rem;
}

.typed-cursor {
  opacity: 1;
  font-weight: 700;
}

/*******************************************************************
********************************************************************
                            NAVBAR
********************************************************************
********************************************************************/
.menu-container {
  padding-left: 5rem;
}
@media (max-width: 574px) {
  .menu-container .navbar-nav {
    display: flex;
    flex-direction: row;
  }
  .menu-container .navbar-nav li {
    margin-right: 1.25rem;
  }
}

.menu-items a {
  font-style: monospace;
  font-size: 1rem;
  font-weight: 700;
  color: #f2f2f2;
}
.menu-items a :hover {
  color: yellow !important;
}
.menu-items .active {
  color: yellow !important;
}

/*******************************************************************
********************************************************************
--------------------------------------------------------------------
                            Main
--------------------------------------------------------------------
********************************************************************
********************************************************************/
.main {
  position: relative;
  overflow: hidden;
}
.main .main-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/*******************************************************************
                            ABOUT ME
********************************************************************/
.about-me {
  font-family: monospace;
  /***
  Heading Title 
   ***/
}
.about-me .about-me-heading-container h1 {
  font-size: 4rem;
  font-weight: 900;
  margin-top: 6rem;
  padding-top: 2rem;
  border-bottom: 10px solid #ff4d5a;
  /*
  &::before {
      content: '';
      //border-bottom: 10px solid #FFE400;
      border-bottom: 10px solid #ff4d5a;
      width: 14.5rem;
      display: block;
      //margin: 0 auto;
      position: relative;
      left: 1.5rem;
      top: 3.5rem;
      z-index: -2;
  }
  */
}
@media (max-width: 450px) {
  .about-me .about-me-heading-container h1 {
    font-size: 3rem;
  }
}

/*
Profile Picture
*/
@media (min-width: 360px) {
  .about-me-description-container {
    flex-direction: column;
    margin-inline: 0;
  }
}
@media (min-width: 1024px) {
  .about-me-description-container {
    margin-inline: 5rem;
  }
}
@media (min-width: 1300px) {
  .about-me-description-container {
    margin-inline: 10rem;
  }
}
@media (min-width: 1600px) {
  .about-me-description-container {
    margin-inline: 20rem;
  }
}
@media (min-width: 2000px) {
  .about-me-description-container {
    margin-inline: 25rem;
  }
}
@media (min-width: 2400px) {
  .about-me-description-container {
    margin-inline: 50rem;
  }
}
.about-me-description-container .about-me-profile-pic-container img {
  width: 12.5rem;
  height: 12.5rem;
}
@media (max-width: 450px) {
  .about-me-description-container .about-me-profile-pic-container img {
    width: 7.5rem;
    height: 7.5rem;
  }
}
@media (max-width: 450px) {
  .about-me-description-container .about-me-descritpion-text-container .about-me-description-text {
    font-size: 1rem;
  }
}
.about-me-description-container .about-me-view-resume-container a {
  text-decoration: none;
  padding: 10px 10px;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  color: #f2f2f2;
  background-color: #04AA6D;
  border: none;
  border-radius: 15px;
}

/*******************************************************************
                        TECHNOLOGY
********************************************************************/
.technology-section {
  font-family: monospace;
}
@media (max-width: 450px) {
  .technology-section .technology-heading-container {
    justify-content: center;
  }
}
@media (max-width: 450px) {
  .technology-section .technology-heading-container h1 {
    font-size: 1.75rem;
  }
}
@media (min-width: 360px) {
  .technology-section .technology-container {
    justify-content: center;
  }
}
.technology-section .technology-container .technology-items-container img {
  width: 3rem;
  height: 3rem;
}
.technology-section .technology-container .technology-items-container h1 {
  font-size: 1.2rem;
}
@media (max-width: 450px) {
  .technology-section .technology-container .technology-items-container h1 {
    font-size: 1.1rem;
  }
}

/*******************************************************************
                        CERTIFICATIONS
********************************************************************/
.certificates-section {
  font-family: monospace;
}
@media (max-width: 450px) {
  .certificates-section .certificates-heading-container {
    justify-content: center;
  }
}
@media (max-width: 450px) {
  .certificates-section .certificates-heading-container h1 {
    font-size: 1.75rem;
  }
}
@media (min-width: 360px) {
  .certificates-section .certificates-container {
    justify-content: center;
  }
}
.certificates-section .certificates-container .certificates-items-container img {
  width: 5rem;
  height: 5rem;
}
.certificates-section .certificates-container .certificates-items-container h1 {
  font-size: 1.2rem;
}
@media (max-width: 450px) {
  .certificates-section .certificates-container .certificates-items-container h1 {
    font-size: 1.1rem;
  }
}

.cert-overlay {
  height: fit-content;
  opacity: 0;
  transition: 0.5s ease;
}
.cert-overlay a {
  text-decoration: none;
}

.cert-overlay:hover {
  opacity: 0.95;
}

/*******************************************************************
********************************************************************
--------------------------------------------------------------------
                            PROJECTS
--------------------------------------------------------------------
********************************************************************      
********************************************************************/
.projects {
  position: relative;
  font-family: monospace;
}
.projects .projects-heading-container h1 {
  font-size: 4rem;
  font-weight: 900;
  margin-top: 6rem;
  padding-top: 2rem;
  border-bottom: 10px solid #ff4d5a;
  /*
  &::before {
      content: '';
      //border-bottom: 10px solid #FFE400;
      border-bottom: 10px solid #F95CA4;
      width: 15rem;
      display: block;
      //margin: 0 auto;
      position: relative;
      left: 1.5rem;
      top: 3.5rem;
      z-index: -2;
  }
  */
}
@media (max-width: 450px) {
  .projects .projects-heading-container h1 {
    font-size: 3rem;
  }
}
.project-card {
  width: 30rem;
}
@media (max-width: 450px) {
  .project-card {
    width: 20rem;
  }
}
.project-card .card-header .card-header-heading {
  font-size: 1.5rem;
}
@media (max-width: 450px) {
  .project-card .card-header .card-header-heading {
    font-size: 1.25rem;
  }
}
.project-card .card-body img {
  height: 20rem;
  overflow-y: hidden;
}
@media (max-width: 450px) {
  .project-card .card-body img {
    height: 10rem;
    overflow: hidden;
  }
}
.project-card .card-footer .card-footer-heading {
  font-size: 1.25rem;
}
@media (max-width: 450px) {
  .project-card .card-footer .card-footer-heading {
    font-size: 1rem;
  }
}
.project-card .card-footer img {
  width: 3rem;
  height: 3rem;
}
@media (max-width: 450px) {
  .project-card .card-footer img {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.project-card .card-footer .project-demo {
  font-size: 1.5rem;
}
@media (max-width: 450px) {
  .project-card .card-footer .project-demo {
    font-size: 1.25rem;
  }
}

.project-links a {
  text-decoration: none;
  color: #f2f2f2;
}
.project-links a :hover {
  text-decoration: underline;
}

/*******************************************************************
********************************************************************
                            Footer
********************************************************************
********************************************************************/
.footer {
  position: relative;
  background-color: #2e3944;
}
.footer img {
  width: 50px;
  height: 50px;
}
.footer .up-arrow-button {
  position: relative;
  bottom: 1rem;
}/*# sourceMappingURL=styles.css.map */