body {
  color: #E0E0E3;
  background-color: #000
}

.navbar-container {
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: 2rem;
  z-index: 1000;
  align-items: center;
  font-size: .95rem;
  font-weight: 600
}

.navbar-container ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0
}

.navbar-container ul li {
  margin: 0 30px
}

.navbar-container {
  background-color: #fff0;
  transition: background-color .75s ease, padding-top .75s ease
}

.navbar-container.scrolled {
  background-color: #2b2b2b
}

.nav-item {
  border: 5px solid #fff0;
  box-sizing: border-box;
  border-radius: 5px
}

.nav-item:hover {
  background-color: rgb(85 85 85 / .8)
}

.nav-item:hover .nav-link {
  color: #fff
}



/* Header */


.header-container {
  background-color: #000;
  background-image: url(assets/header-background.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative
}

.header-outer-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  align-items: center
}

.header-text-container {
  width: 60%;
  padding-top: 20%
}

.header-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  text-align: center;
  padding-top: 15%
}

.profile-picture {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid #E0E0E3;
  margin-top: 2rem;
  margin-left: 20%
}

.profile-name,
.header-full-name {
  display: inline
}

.header-full-name {
  color: #404A88;
  font-weight: bolder
}

.profile-name,
.profile-bio,
.profile-description {
  display: block;
  text-align: left
}

.profile-description {
  width: 80%;
  margin-top: 1rem;
  font-weight: lighter
}

.profile-bio {
  margin-top: 1rem;
  white-space: nowrap;
  letter-spacing: .15em
}

.profile-bio-animated {
  color: #808ac3
}

.scroll-down-gesture {
  display: flex;
  justify-content: center;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -25%
}

.scroll-down-gesture {
  animation: MoveUpDown 3s linear infinite;
  animation-delay: 3s
}

@keyframes MoveUpDown {

  0%,
  100% {
    opacity: 0;
    transform: translateY(-60px)
  }

  50% {
    opacity: .25;
    transform: translateY(-20px)
  }
}

.about-me-container {
  background-color: #1D1F22;
  padding: 2rem 0;
  color: #E0E0E3
}

.about-me-title-container {
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center
}

.about-me-title {
  font-weight: bolder
}

.about-me-container {
  width: 100%
}

.about-me-inner-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  padding-top: 2rem
}

.about-me-text-container {
  width: 50%;
  text-align: center
}

.about-me-text {
  font-weight: 400;
  width: 90%;
  margin: 0 auto;
  text-align: center
}

.about-me-code-header-container {
  background-color: #000;
  height: 7%;
  display: flex;
  align-items: center
}

.about-me-code-block-container {
  width: 45%;
  background-color: #0d1017;
  border-radius: 2%
}

.code-block-container {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  margin-bottom: 5%
}

pre,
code {
  background-color: #0d1017 !important
}

.token.punctuation {
  color: #999
}

.token.property {
  color: #0c9
}

.token.string {
  color: #a67f59
}

.token.number {
  color: #6897bb
}

.token {
  text-shadow: none !important
}

.token.operator {
  background: none !important
}

.circles-container {
  display: flex;
  align-items: center
}

.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 12px
}

.red {
  background-color: #e44
}

.yellow {
  background-color: #fee148
}

.green {
  background-color: #4ade80
}

.circle:last-child {
  margin-right: 0
}

.skills-container {
  background-color: #2B2E33;
  padding: 2rem 0;
}

.skills-title,
.skills-sub-title-container,
.skills-description-container {
  width: 80%;
  margin-left: 10%;
  text-align: center
}

.skills-title {
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #808AC3
}

.skills-sub-title-container {
  font-size: 2.5rem;
  font-weight: 700
}

.skills-description {
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: .5rem
}

.skills-section-1-container,
.skills-section-2-container,
.skills-section-3-container,
.skills-section-4-container {
  width: 120%;
  margin-bottom: 1rem
}

.skill-1-button,
.skill-2-button,
.skill-3-button,
.skill-4-button {
  display: flex;
  align-items: center;
  background-color: #2B2E33;
  color: gray;
  width: 100%;
  border-radius: 20px;
  border: none
}

.skill-1-button .skill-section-icon,
.skill-2-button .skill-section-icon,
.skill-3-button .skill-section-icon,
.skill-4-button .skill-section-icon {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center
}

.skill-section-text-container {
  width: 100%;
  text-align: left
}

.skill-section-title-container {
  width: 100%;
  font-weight: bolder;
  font-size: larger
}

.skill-section-description-container {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  margin-bottom: -.5rem
}

.skill-1-button:hover,
.skill-2-button:hover,
.skill-3-button:hover,
.skill-4-button:hover {
  background-color: #1d1f22;
  color: #E0E0E3
}

.skill-1-button:not(.active):hover,
.skill-2-button:not(.active):hover,
.skill-3-button:not(.active):hover,
.skill-4-button:not(.active):hover {
  background-color: #1d1f22
}

.skills-inner-container {
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin-left: 15%;
  padding-top: 2rem
}

.skills-section-container {
  width: 40%;
  text-align: center
}

.skills-logos-container {
  width: 50%
}

.skill-1-logos-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  padding-top: 2rem
}

.logo-text-container {
  width: 100%;
  margin-top: 2rem
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem
}

.logo-text {
  display: block;
  text-align: center
}

.logo-text-1 {
  width: 100px;
  text-align: center;
  word-wrap: break-word
}

.certificates-container {
  background-color: #000;
  background-image: url(assets/certificate-bg.png);
  background-size: cover;
  background-position: center;
  height: 60vh;
  padding: 2rem 0
}

.certificates-container-title {
  width: 80%;
  margin-left: 10%;
  margin-top: 2rem;
  text-align: center
}

.certificates-container-title-text {
  font-weight: bolder;
  color: #fff
}

.certificates-container-title-text span {
  background-color: rgb(0 0 0 / .5);
  padding: .2em .4em;
  border-radius: 20%
}

.comptia-certificate-title-text {
  font-size: 2rem;
  font-weight: bolder
}

.comptia-certificate-skill-container {
  width: 50%
}

.comptia-certificate-text-container {
  width: 40%;
  text-align: center
}

.comptia-certificate-title {
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center
}

.comptia-certificate-sub-title {
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center;
  font-size: larger
}

.comptia-certificate-description {
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center;
  align-items: center
}

.comptia-text-and-skills-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  padding-top: 2rem
}

.comptia-certificate-skills-container {
  width: 50%
}

.credly-link {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  text-decoration: none;
  color: #5189d4
}

.projects-container {
  background-color: #24272B;
  padding: 2rem 0;
  background-image: url(assets/projects-bg.png)
}

.projects-page-title {
  display: inline;
  text-align: center;
  font-size: clamp(1rem, 20vmin, 4rem)
}

.project-span.span-end {
  display: flex;
  justify-content: center;
  margin-top: -.25rem;
  margin-bottom: 3rem
}

.project-span {
  display: flex;
  justify-content: center;
  margin-top: 1rem
}

.animated-title {
  --bg-size: 400%;
  --color-one: #404A88;
  --color-two: #9290C3;
  font-size: clamp(2rem, 20vmin, 4rem);
  background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
  color: #fff0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 12s infinite linear
}

@media (prefers-reduced-motion:no-preference) {
  .projects-page-title {
    animation: move-bg 16s linear infinite
  }

  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0
    }
  }
}

.projects-sub-title-container {
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: .5rem;
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center
}

.project-buttons-container {
  width: 30%;
  margin-left: 35%;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem
}

.project-button-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 4rem;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 10px
}

.project-button {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  background: none;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  background-color: none;
  border-radius: 10px;
  background-color: rgb(0 0 0 / .25)
}

.project-button:hover {
  background-color: rgb(0 0 0 / .75)
}

.project-button:hover .project-button-text {
  color: #E0E0E3
}

.project-button-text {
  display: flex;
  color: #A8A8AA;
  margin: 0
}

.project-options-logos {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-right: 10px
}

.first-row-of-projects,
.second-row-of-projects {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin-left: 15%;
  padding-top: 2rem
}

.first-project-container,
.second-project-container,
.third-project-container,
.fourth-project-container,
.fifth-project-container,
.sixth-project-container {
  position: relative;
  border: 2px solid #1C1E21;
  border-radius: 10px;
  width: 30%;
  text-align: center;
  display: flex;
  flex-direction: column
}

.project-image-container img {
  height: 100%;
  max-width: 100%;
  height: auto;
  object-fit: scale-down
}

.project-text-container {
  background-color: #2B2E33
}

.project-title-container {
  padding-top: 1rem;
  padding-left: 1rem;
  text-align: left;
  font-weight: bolder
}

.project-description-container {
  padding-left: 1rem;
  text-align: left
}

.project-link-container,
.project-technologies-container {
  flex: 1
}

.project-technologies-container,
.project-link-container {
  display: none;
  padding: 1rem;
  text-align: left
}

.first-project-container,
.second-project-container,
.third-project-container,
.fourth-project-container,
.fifth-project-container,
.sixth-project-container {
  transition: transform 0.5s ease-in-out
}

.first-project-container:hover .project-text-container,
.second-project-container:hover .project-text-container,
.third-project-container:hover .project-text-container,
.fourth-project-container:hover .project-text-container,
.fifth-project-container:hover .project-text-container,
.sixth-project-container:hover .project-text-container {
  height: 50%;
  transition: height 0.3s ease-in-out
}

.first-project-container:hover .project-image-container,
.second-project-container:hover .project-image-container,
.third-project-container:hover .project-image-container,
.fourth-project-container:hover .project-image-container,
.fifth-project-container:hover .project-image-container,
.sixth-project-container:hover .project-image-container {
  filter: brightness(50%)
}

.first-project-container .project-link-container,
.second-project-container .project-link-container,
.third-project-container .project-link-container,
.fourth-project-container .project-link-container,
.fifth-project-container .project-link-container,
.sixth-project-container .project-link-container {
  margin-top: 10%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 30%;
  z-index: 1;
  text-align: center
}

.first-project-container .project-technologies-container,
.second-project-container .project-technologies-container,
.third-project-container .project-technologies-container,
.fourth-project-container .project-technologies-container,
.fifth-project-container .project-technologies-container,
.sixth-project-container .project-technologies-container {
  background-color: #2B2E33;
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1
}

.first-project-container:hover .project-link-container,
.second-project-container:hover .project-link-container,
.third-project-container:hover .project-link-container,
.fourth-project-container:hover .project-link-container,
.fifth-project-container:hover .project-link-container,
.sixth-project-container:hover .project-link-container {
  display: block
}

.first-project-container:hover .project-technologies-container,
.second-project-container:hover .project-technologies-container,
.third-project-container:hover .project-technologies-container,
.fourth-project-container:hover .project-technologies-container,
.fifth-project-container:hover .project-technologies-container,
.sixth-project-container:hover .project-technologies-container {
  display: flex
}

.github-logo-link {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  margin-top: 1rem
}

.view-source-button {
  background-color: #6e5494;
  color: #333;
  padding: .5rem 1rem;
  border-radius: 5px;
  margin-top: 1rem
}

.project-link {
  text-decoration: none;
  color: #E0E0E3
}

.project-technologies-container {
  justify-content: space-between;
  align-items: center;
  padding: 1rem
}

.projects-logo-and-text-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;
  padding-top: 2rem
}

.project-logo-container {
  display: flex;
  justify-content: center
}

.project-logo-name-container {
  margin-top: .75rem;
  text-align: center
}

.express-logo {
  background-color: #E0E0E3
}

.third-project-container .project-description-container {
  padding-right: .5rem;
  text-align: left
}

.project-technologies-container.project-3 {
  padding-left: 5%;
  padding-right: 5%
}

.project-technologies-container.project-4 {
  padding-left: 15%;
  padding-right: 15%
}

.project-technologies-container.project-5 {
  padding-left: 15%;
  padding-right: 15%
}

.project-technologies-container.project-6 {
  padding-left: 5%;
  padding-right: 5%
}

.more-projects-container {
  display: flex;
  justify-content: center;
  margin-top: 4rem
}

.contact-outer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  background-image: url(assets/contact-background.png);
  background-size: cover;
  background-position: center;
  height: 90vh
}

.contact-inner-container {
  height: 90%;
  width: 65%;
  background-color: #2B2E33;
  padding-top: 2rem
}

.contact-title {
  width: 80%;
  margin-left: 10%;
  margin-top: 2rem;
  text-align: center;
  font-weight: bolder
}

.contact-greeting-container {
  width: 60%;
  margin-left: 20%;
  margin-top: 1rem;
  text-align: center
}

.contact-greeting {
  width: 80%;
  margin-left: 10%;
  margin-top: 1rem;
  text-align: center;
  font-weight: 600
}

.contact-methods-container {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin-left: 25%;
  padding-top: 2rem
}

.contact-method-text {
  text-align: center;
  display: flex;
  text-align: center
}

.contact-method-1-logo,
.contact-method-2-logo,
.contact-method-3-logo {
  width: 75px;
  height: 75px;
  overflow: hidden;
  color: #636eb6
}

.contact-image-container {
  width: 100%;
  text-align: center;
  padding-top: 2%;
  margin-top: 4rem;
}

.contact-image {
  scale: 1.25;
}

.contact-method-1-container,
.contact-method-2-container,
.contact-method-3-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.contact-method-text-container {
  margin-top: 1rem;
  text-align: center
}

.contact-button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #E0E0E3;
  padding: 1rem 2rem;
  border-radius: 10%
}

.contact-button:focus {
  outline: none
}

.contact-button:hover {
  background-color: #222529
}

.contact-button:hover .contact-method-1-logo,
.contact-button:hover .contact-method-2-logo,
.contact-button:hover .contact-method-3-logo {
  fill: #E0E0E3;
  color: #E0E0E3
}

.contact-links {
  text-decoration: none
}

.footer-container {
  background-color: #111314;
  padding: 2rem 0
}

.footer-top-container {
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin-left: 15%
}

.footer-portfolio-container {
  font-weight: bolder
}

.footer-projects-container,
.footer-certificates-container {
  font-weight: lighter
}

.footer-bottom-container {
  width: 70%;
  margin-left: 15%;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between
}

.footer-right-corner-container {
  display: flex;
  justify-content: center;
  align-items: center
}

.footer-links {
  text-decoration: none;
  color: #E0E0E3;
  display: flex;
  justify-content: center;
  align-items: center
}

.footer-button {
  display: flex;
  justify-content: center;
  width: 3rem;
  height: 2.5em;
  background-color: #111314;
  border: none;
  align-items: center;
  border-radius: 25%
}

.footer-button:hover {
  background-color: #495256
}

.hidden-scroll {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(100%);
  transition: all 1s
}

@media(prefers-reduced-motion) {
  .hidden-scroll {
    transition: none
  }
}

.show-scroll {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0)
}

.animated-title.typing-animation:last-of-type {
  animation: type 0.33s infinite
}

@keyframes type {
  to {
    opacity: 0
  }
}

.app {
  min-width: 10vw;
  min-height: 10vh;
  width: 50%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto
}

.tag-list {
  width: 40vw;
  max-width: 90vw;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 1rem 0;
  position: relative;
  padding: 1.5rem 0;
  overflow: hidden
}

.loop-slider {
  .inner {
    display: flex;
    width: fit-content;
    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: var(--direction);
    animation-duration: var(--duration)
  }
}

.tag {
  display: flex;
  align-items: center;
  gap: 0 .2rem;
  color: #e2e8f0;
  font-size: .9rem;
  background-color: #334155;
  border-radius: .4rem;
  padding: .7rem 1rem;
  margin-right: 1rem;
  box-shadow: 0 .1rem .2rem rgb(0 0 0 / 20%), 0 .1rem .5rem rgb(0 0 0 / 30%), 0 .2rem 1.5rem rgb(0 0 0 / 40%);

  span {
    font-size: 1.2rem;
    color: #64748b
  }
}

.fade-tags {
  pointer-events: none;
  background: linear-gradient(90deg, #1C1E21, transparent 30%, transparent 70%, #1C1E21);
  position: absolute;
  inset: 0
}

@keyframes loop {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.tag-row-1 {
  opacity: 1
}

.tag-row-2 {
  opacity: 1
}

.tag-row-3 {
  opacity: 1
}

.tag-row-4 {
  opacity: 1
}

.app .tag-list .tag {
  white-space: nowrap
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.down-scroll-target {
  opacity: 0
}

.down-scroll-animation {
  animation: dropDown 1s ease-out
}

@keyframes dropDown {
  0% {
    transform: translateY(-100%);
    opacity: 0
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

.hidden {
  display: none
}


















/* HTML Smooth Scroll Media Query */
@media screen and (max-width: 500px) {
  html {
    --scroll-behavior: smooth !important;
    scroll-behavior: smooth !important;
  }
}



/* Navbar Media Query */
@media screen and (max-width: 500px) {


  .navbar-container {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 2rem;
    z-index: 1000;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    font-size: 2.7vw;
    font-weight: 600;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-inner-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 10%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-items-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    padding: 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container ul li {
    margin: 0 30px;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container {
    background-color: #fff0;
    transition: background-color .75s ease, padding-top .75s ease;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container.scrolled {
    background-color: #2b2b2b;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item {
    border: 5px solid #fff0;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item:hover {
    background-color: rgb(85 85 85 / .8);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item:hover .nav-link {
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}



/* Header Media Query */
@media screen and (max-width: 500px) {
  .header-container {
    background-color: black;
    background-image: url(assets/header-background.jpg);
    background-size: cover;
    background-position: right 50%;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .header-outer-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .header-text-container {
    width: 100%;
    text-align: center;
    order: 2;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: -3rem;
  }

  .header-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: -10rem;
  }

  .header-image-container img {
    width: 30vw;
    height: auto;
    border-radius: 50%;
    border: 2px solid #E0E0E3;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }


  .profile-picture {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #E0E0E3;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .profile-name,
  .header-full-name {
    width: 100%;
    display: inline;
    align-items: center;
    text-align: center;
    font-size: 6vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    white-space: nowrap;
  }



  .header-full-name {
    color: #808ac3;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .profile-name,
  .profile-bio,
  .profile-description {
    display: block;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .profile-name {
    text-align: center;
    align-items: center;
    width: 80%;
    margin-left: 10%;

  }

  .profile-description {
    font-size: .9rem;
    width: 90%;
    margin-top: 1rem;
    text-align: center;
    font-weight: lighter;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 5%;

  }

  .profile-bio {
    width: 80%;
    font-size: 3.5vw;
    margin-top: 1rem;
    white-space: nowrap;
    letter-spacing: .15em;
    margin-left: 10%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;

  }

  .profile-bio-animated {
    color: #808ac3;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .scroll-down-gesture {
    display: flex;
    justify-content: center;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    margin-top: -25%;
    margin-left: 0;
    margin-right: 0;
    scale: .8;
  }

  .scroll-down-gesture {
    animation: MoveUpDown 3s linear infinite;
    animation-delay: 3s;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  @keyframes MoveUpDown {

    0%,
    100% {
      opacity: 0;
      transform: translateY(-60px)
    }

    50% {
      opacity: .25;
      transform: translateY(-20px)
    }
  }
}

/* About Me Media Query */
@media screen and (max-width: 500px) {
  .about-me-container {
    background-color: #1D1F22;
    padding: 2rem 0;
    color: #E0E0E3;
    height: 100vh;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-title-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 1rem;
    text-align: center
  }

  .about-me-title {
    /* Standard Title Font Size */
    font-size: 7vw;
    font-weight: bolder;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-inner-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-text-container {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-text {
    font-size: 3vw;
    font-weight: 400;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-code-block-container {
    width: 90%;
    font-size: 2.5vw;
    background-color: #0d1017;
    border-radius: 2%;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 2rem;
  }

  .about-me-code-header-container {
    background-color: #000;
    height: 7%;
    display: flex;
    align-items: center;
  }


  .code-block-container {
    width: 80%;
    height: 50%;
    margin-left: 10%;
    margin-bottom: 5%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-code-tab {
    height: 50%;
  }

  pre,
  code {
    background-color: #0d1017 !important;
  }

  .token.punctuation {
    color: #999
  }

  .token.property {
    color: #0c9
  }

  .token.string {
    color: #a67f59
  }

  .token.number {
    color: #6897bb
  }

  .token {
    text-shadow: none !important
  }

  .token.operator {
    background: none !important
  }

  .circles-container {
    display: flex;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;

  }

  .red {
    background-color: #e44
  }

  .yellow {
    background-color: #fee148
  }

  .green {
    background-color: #4ade80
  }

  .circle:last-child {
    margin-right: 0;
  }
}

/* Skills Media Query */
@media screen and (max-width: 500px) {
  .skills-container {
    background-color: #2B2E33;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-title,
  .skills-sub-title-container,
  .skills-description-container {
    width: 100%;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-title {
    font-size: 1.25rem;
    margin-top: 1rem;
    color: #808AC3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-sub-title-container {
    /* Standard Title Font Size */
    font-size: 7vw;
    font-weight: 700;
    width: 90%;
    margin-left: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-description {
    width: 90%;
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: .5rem;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }


  .skills-section-container {
    width: 100%;
    text-align: center;
  }
  .skill-1-button,
  .skill-2-button,
  .skill-3-button,
  .skill-4-button {
    display: flex;
    align-items: center;
    background-color: #2B2E33;
    color: gray;
    width: 100vw; 
    border-radius: 20px;
    border: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;
  }

  .skill-1-button,
  .skill-2-button,
  .skill-3-button,
  .skill-4-button {
    display: flex;
    align-items: center;
    background-color: #2B2E33;
    color: gray;
    width: 100vw;
    border-radius: 20px;
    border: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;
  }

  .skill-1-button .skill-section-icon,
  .skill-2-button .skill-section-icon,
  .skill-3-button .skill-section-icon,
  .skill-4-button .skill-section-icon {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-text-container {
    width: 100%;
    text-align: left;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-title-container {
    width: 100%;
    font-weight: bolder;
    font-size: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-description-container {
    width: 100%;
    text-align: left;
    font-size: .7rem;
    white-space: nowrap;
    margin-bottom: -.5rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-button:hover,
  .skill-2-button:hover,
  .skill-3-button:hover,
  .skill-4-button:hover {
    background-color: #1d1f22;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-button:not(.active):hover,
  .skill-2-button:not(.active):hover,
  .skill-3-button:not(.active):hover,
  .skill-4-button:not(.active):hover {
    background-color: #1d1f22;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-section-container {
    width: 100%;
    text-align: center;
    order: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-logos-container {
    width: 100vw;
    order: 2;
    display: flex;
    justify-content: space-between;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-logos-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text-container {
    width: 100%;
    margin-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1rem;
    scale: .65;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text {
    display: block;
    text-align: center;
    font-size: .8rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text-1 {
    width: 100px;
    text-align: center;
    word-wrap: break-word;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Projects Media Query */
@media screen and (max-width: 500px) {
  .projects-container {
    background-color: #24272B;
    padding: 2rem 0;
    background-image: url(assets/projects-bg.png);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .projects-page-title {
    display: inline;
    text-align: center;
    width: 100%;
    font-size: 9vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-span.span-end {
    display: flex;
    justify-content: center;
    margin-top: -.25rem;
    margin-bottom: 3rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-span {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .animated-title {
    --bg-size: 400%;
    --color-one: #404A88;
    --color-two: #9290C3;
    font-size: 9vw;
    background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
    color: #fff0;
    background-clip: text;
    -webkit-background-clip: text;
    animation: move-bg 12s infinite linear
  }

  @media (prefers-reduced-motion:no-preference) {
    .projects-page-title {
      animation: move-bg 16s linear infinite
    }

    @keyframes move-bg {
      to {
        background-position: var(--bg-size) 0
      }
    }
  }

  .projects-sub-title-container {
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: .5rem;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-buttons-container {
    width: 90%;
    display: flex;
    justify-content: left;
    margin-top: 2rem;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 4rem;
    text-decoration: none;
    white-space: nowrap;
    scale: .8;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: none;
    border-radius: 10px;
    background-color: rgb(0 0 0 / .25);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button:hover {
    background-color: rgb(0 0 0 / .75);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button:hover .project-button-text {
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button-text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .button-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .all-button {
    flex: 1;
    width: 70%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .featured-button {
    flex: 1;
    width: 80%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .web-development-button {
    flex: 1;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .it-button {
    flex: 1;
    width: 60%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .scripts-button {
    flex: 1;
    width: 70%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-options-logos {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-row-of-projects,
  .second-row-of-projects {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 5%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container,
  .second-project-container,
  .third-project-container,
  .fourth-project-container,
  .fifth-project-container,
  .sixth-project-container {
    position: relative;
    border: 2px solid #1C1E21;
    border-radius: 10px;
    font-size: 3vw;
    width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-image-container img {
    height: 100%;
    max-width: 100%;
    height: auto;
    object-fit: scale-down;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-text-container {
    background-color: #2B2E33;
    height: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-title-container {
    padding-top: 3vw;
    padding-left: 1rem;
    text-decoration: underline;
    text-align: center;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-description-container {
    font-size: 2.5vw;
    padding-left: 1rem;
    font-weight: lighter;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link-container,
  .project-technologies-container {
    flex: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link-container {
    scale: .8;
  }

  .project-technologies-container {
    display: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container,
  .project-link-container {
    display: none;
    padding: 1rem;
    text-align: left;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container,
  .second-project-container,
  .third-project-container,
  .fourth-project-container,
  .fifth-project-container,
  .sixth-project-container {
    transition: transform 0.5s ease-in-out;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-text-container,
  .second-project-container:hover .project-text-container,
  .third-project-container:hover .project-text-container,
  .fourth-project-container:hover .project-text-container,
  .fifth-project-container:hover .project-text-container,
  .sixth-project-container:hover .project-text-container {
    height: 50%;
    transition: height 0.3s ease-in-out;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-image-container,
  .second-project-container:hover .project-image-container,
  .third-project-container:hover .project-image-container,
  .fourth-project-container:hover .project-image-container,
  .fifth-project-container:hover .project-image-container,
  .sixth-project-container:hover .project-image-container {
    filter: brightness(50%);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container .project-link-container,
  .second-project-container .project-link-container,
  .third-project-container .project-link-container,
  .fourth-project-container .project-link-container,
  .fifth-project-container .project-link-container,
  .sixth-project-container .project-link-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 1;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container .project-technologies-container,
  .second-project-container .project-technologies-container,
  .third-project-container .project-technologies-container,
  .fourth-project-container .project-technologies-container,
  .fifth-project-container .project-technologies-container,
  .sixth-project-container .project-technologies-container {
    background-color: #2B2E33;
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-link-container,
  .second-project-container:hover .project-link-container,
  .third-project-container:hover .project-link-container,
  .fourth-project-container:hover .project-link-container,
  .fifth-project-container:hover .project-link-container,
  .sixth-project-container:hover .project-link-container {
    display: block;
    margin-top: -2rem;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-technologies-container,
  .second-project-container:hover .project-technologies-container,
  .third-project-container:hover .project-technologies-container,
  .fourth-project-container:hover .project-technologies-container,
  .fifth-project-container:hover .project-technologies-container,
  .sixth-project-container:hover .project-technologies-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
  }

  .github-logo-link {
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .view-source-button {
    background-color: #6e5494;
    color: #333;
    padding: .5rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link {
    text-decoration: none;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }


  .projects-logo-and-text-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 10%;
    padding-top: 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-logo-container {
    scale: .95;
    display: flex;
    justify-content: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-logo-name-container {
    margin-top: .7rem;
    text-align: center;
    font-size: 2vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .express-logo {
    background-color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .third-project-container .project-description-container {
    text-align: center;
    
  }

  .project-technologies-container.project-3 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-4 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-5 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-6 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Certificate Media Query */
@media screen and (max-width: 500px) {
  .certificates-container {
    background-color: #000;
    background-image: url(assets/certificate-bg.png);
    background-size: cover;
    background-position: center;
    height: 90vh;
    padding: 2rem 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title-text {
    font-weight: bolder;
    width: 100%;

    font-size: 7vw;
    text-align: center;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title-text span {
    background-color: rgb(0 0 0 / .5);
    padding: .2em .4em;
    border-radius: 20%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .comptia-certificate-title-text {
    font-size: 6vw;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .comptia-certificate-skill-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-text-container {
    width: 100%;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-title {
    width: 100%;
    margin-left: 10%;
    margin-top: 1rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-sub-title {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    font-size: 3.5vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-description {
    width: 90%;
    margin-top: 1rem;
    text-align: center;
    font-size: 3vw;
    align-items: center;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-text-and-skills-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding-top: 2rem;
  }

  .comptia-certificate-skills-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .credly-link {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    text-decoration: none;
    color: #5189d4;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .app {
    scale: .9;
    min-width: 10vw;
    min-height: 10vh;
    width: 100vw;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto
  }
  
  .tag-list {
    width: 100vw;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 1rem 0;
    position: relative;
    padding: 1.5rem 0;
    overflow: hidden
  }
  
  .loop-slider {
    .inner {
      display: flex;
      width: fit-content;
      animation-name: loop;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: var(--direction);
      animation-duration: var(--duration)
    }
  }
  
  .tag {
    display: flex;
    align-items: center;
    gap: 0 .2rem;
    color: #e2e8f0;
    font-size: .7rem;
    background-color: #334155;
    border-radius: .4rem;
    padding: .7rem 1rem;
    margin-right: 1rem;
    box-shadow: 0 .1rem .2rem rgb(0 0 0 / 20%), 0 .1rem .5rem rgb(0 0 0 / 30%), 0 .2rem 1.5rem rgb(0 0 0 / 40%);
  
    span {
      font-size: 1.2rem;
      color: #64748b
    }
  }
  
  .fade-tags {
    pointer-events: none;
    background: linear-gradient(90deg, #1C1E21, transparent 30%, transparent 70%, #1C1E21);
    position: absolute;
    inset: 0
  }
  
  @keyframes loop {
    0% {
      transform: translateX(0)
    }
  
    100% {
      transform: translateX(-50%)
    }
  }
  
  .tag-row-1 {
    opacity: 1
  }
  
  .tag-row-2 {
    opacity: 1
  }
  
  .tag-row-3 {
    opacity: 1
  }
  
  .tag-row-4 {
    opacity: 1
  }
  
  .app .tag-list .tag {
    white-space: nowrap
  }



}

/* Contact Media Query */
@media screen and (max-width: 500px) {
  .contact-outer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url(assets/contact-background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-inner-container {
    height: 80%;
    width: 80%;
    background-color: #2B2E33;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-title {
    width: 100%;
    font-size: 7vw;
    margin-top: 1rem;
    text-align: center;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-greeting-container {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-greeting {
    width: 90%;
    /* margin-left: 10%; */
    margin-top: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 3.5vw;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-methods-container {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    width: 70%;
    padding-top: 1rem;
    margin-left: 15%;
    margin-right: 0%;
  }

  .contact-method-text {
    text-align: center;
    display: flex;
    text-align: center;
    font-size: .9rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-method-1-logo,
  .contact-method-2-logo,
  .contact-method-3-logo {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    color: #636eb6;
    margin-left: 0%;
    margin-right: 0%;

  }

  .contact-image-container {
    width: 100%;
    text-align: center;
    padding-top: 2%;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-image {
    scale: 1;
  }

  .contact-method-1-container,
  .contact-method-2-container,
  .contact-method-3-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-method-text-container {
    margin-top: 1rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-button {
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #E0E0E3;
    width: 100%;
    height: 100%;
    padding: 1rem 1rem;
    border-radius: 10%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;

  }

  .contact-button:focus {
    outline: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-button:hover {
    background-color: #222529;
    padding: 15% 25%;
    height: 100%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }

  .contact-button:hover .contact-method-1-logo,
  .contact-button:hover .contact-method-2-logo,
  .contact-button:hover .contact-method-3-logo {
    fill: #E0E0E3;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-links {
    text-decoration: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Footer Media Query */
@media screen and (max-width: 500px) {
  .footer-container {
    background-color: #111314;
    padding: 2rem 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .footer-top-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%
  }

  .footer-portfolio-container {
    font-weight: bolder;
    font-size: 4vw;
  }

  .footer-projects-container,
  .footer-certificates-container {
    font-weight: lighter
  }

  .footer-bottom-container {
    width: 90%;
    margin-left: 5%;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between
  }

  .footer-left-corner-container {
    font-size: 3vw;
  }

  .footer-right-corner-container {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .footer-links {
    text-decoration: none;
    color: #E0E0E3;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .footer-button {
    display: flex;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 1.5rem;
    border: none;
    align-items: center;
  }
}




/* 
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
TABLET MEDIA QUERIES
*/




/* HTML Smooth Scroll Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  html {
    --scroll-behavior: smooth !important;
    scroll-behavior: smooth !important;
  }
}



/* Navbar Media Query */
@media (min-width: 768px) and (max-width: 1368px) {


  .navbar-container {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 2rem;
    z-index: 1000;
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    font-size: 2.7vw;
    font-weight: 600;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-inner-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 10%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-items-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    padding: 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container ul li {
    margin: 0 30px;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container {
    background-color: #fff0;
    transition: background-color .75s ease, padding-top .75s ease;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .navbar-container.scrolled {
    background-color: #2b2b2b;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item {
    border: 5px solid #fff0;
    box-sizing: border-box;
    border-radius: 5px;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item:hover {
    background-color: rgb(85 85 85 / .8);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .nav-item:hover .nav-link {
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}



/* Header Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .header-container {
    background-color: black;
    background-image: url(assets/header-background.jpg);
    background-size: cover;
    background-position: right 50%; 
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .header-outer-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .header-text-container {
    width: 100%;
    text-align: center;
    order: 2;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: -3rem;
  }

  .header-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: -10rem;
  }

  .header-image-container img {
    width: 30vw;
    height: auto;
    border-radius: 50%;
    border: 2px solid #E0E0E3;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }


  .profile-picture {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #E0E0E3;
    /* margin-top: 2rem; */
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .profile-name,
  .header-full-name {
    width: 100%;
    display: inline;
    align-items: center;
    text-align: center;
    font-size: 6vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    white-space: nowrap;
  }



  .header-full-name {
    color: #808ac3;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .profile-name,
  .profile-bio,
  .profile-description {
    display: block;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .profile-name {
    text-align: center;
    align-items: center;
    width: 80%;
    margin-left: 10%;

  }

  .profile-description {
    font-size: 1.5rem;
    width: 90%;
    margin-top: 1rem;
    text-align: center;
    font-weight: lighter;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 2%; 
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5%;

  }

  .profile-bio {
    width: 80%;
    font-size: 3.5vw;
    margin-top: 1rem;
    white-space: nowrap;
    letter-spacing: .15em;
    margin-left: 10%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;

  }

  .profile-bio-animated {
    color: #808ac3;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .scroll-down-gesture {
    display: flex;
    justify-content: center;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 5rem;
    height: 5rem;
    margin-top: -25%;
    margin-left: 0;
    margin-right: 0;
    scale: 1.25;
  }

  .scroll-down-gesture {
    animation: MoveUpDown 3s linear infinite;
    animation-delay: 3s;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  @keyframes MoveUpDown {

    0%,
    100% {
      opacity: 0;
      transform: translateY(-60px)
    }

    50% {
      opacity: .25;
      transform: translateY(-20px)
    }
  }
}

/* About Me Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .about-me-container {
    background-color: #1D1F22;
    padding: 2rem 0;
    color: #E0E0E3;
    height: 130vh;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-title-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 1rem;
    text-align: center
  }

  .about-me-title {
    /* Standard Title Font Size */
    font-size: 7vw;
    font-weight: bolder;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-inner-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-text-container {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-text {
    font-size: 3vw;
    font-weight: 400;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-code-block-container {
    width: 90%;
    font-size: 2.5vw;
    background-color: #0d1017;
    border-radius: 2%;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 2rem;
  }

  .about-me-code-header-container {
    background-color: #000;
    height: 7%;
    display: flex;
    align-items: center;
  }


  .code-block-container {
    width: 80%;
    height: 50%;
    margin-left: 10%;
    margin-bottom: 5%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .about-me-code-tab {
    height: 50%;
  }

  pre,
  code {
    background-color: #0d1017 !important;
  }

  .token.punctuation {
    color: #999
  }

  .token.property {
    color: #0c9
  }

  .token.string {
    color: #a67f59
  }

  .token.number {
    color: #6897bb
  }

  .token {
    text-shadow: none !important
  }

  .token.operator {
    background: none !important
  }

  .circles-container {
    display: flex;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;

  }

  .red {
    background-color: #e44
  }

  .yellow {
    background-color: #fee148
  }

  .green {
    background-color: #4ade80
  }

  .circle:last-child {
    margin-right: 0;
  }
}

/* Skills Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .skills-container {
    background-color: #2B2E33;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-title,
  .skills-sub-title-container,
  .skills-description-container {
    width: 100%;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-title {
    font-size: 1.25rem;
    margin-top: 1rem;
    color: #808AC3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-sub-title-container {
    /* Standard Title Font Size */
    font-size: 7vw;
    font-weight: 700;
    width: 90%;
    margin-left: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-description {
    width: 90%;
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: .5rem;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }


  .skills-section-container {
    width: 100%;
    text-align: center;
  }
  .skill-1-button,
  .skill-2-button,
  .skill-3-button,
  .skill-4-button {
    display: flex;
    align-items: center;
    background-color: #2B2E33;
    color: gray;
    width: 100vw; 
    border-radius: 20px;
    border: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;
  }

  .skill-1-button,
  .skill-2-button,
  .skill-3-button,
  .skill-4-button {
    display: flex;
    align-items: center;
    background-color: #2B2E33;
    color: gray;
    width: 100vw;
    border-radius: 20px;
    border: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;
  }

  .skill-1-button .skill-section-icon,
  .skill-2-button .skill-section-icon,
  .skill-3-button .skill-section-icon,
  .skill-4-button .skill-section-icon {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-text-container {
    width: 100%;
    text-align: left;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-title-container {
    width: 100%;
    font-weight: bolder;
    font-size: 1.25rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-section-description-container {
    width: 100%;
    text-align: left;
    font-size: 1.25rem;
    white-space: nowrap;
    margin-bottom: -.5rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-button:hover,
  .skill-2-button:hover,
  .skill-3-button:hover,
  .skill-4-button:hover {
    background-color: #1d1f22;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-button:not(.active):hover,
  .skill-2-button:not(.active):hover,
  .skill-3-button:not(.active):hover,
  .skill-4-button:not(.active):hover {
    background-color: #1d1f22;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-section-container {
    width: 100%;
    text-align: center;
    order: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skills-logos-container {
    width: 100vw;
    order: 2;
    display: flex;
    justify-content: space-between;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .skill-1-logos-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text-container {
    width: 100%;
    margin-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1rem;
    scale: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text {
    display: block;
    text-align: center;
    font-size: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .logo-text-1 {
    width: 100px;
    text-align: center;
    word-wrap: break-word;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Projects Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .projects-container {
    background-color: #24272B;
    padding: 2rem 0;
    background-image: url(assets/projects-bg.png);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .projects-page-title {
    display: inline;
    text-align: center;
    width: 100%;
    font-size: 9vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-span.span-end {
    display: flex;
    justify-content: center;
    margin-top: -.25rem;
    margin-bottom: 3rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-span {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .animated-title {
    --bg-size: 400%;
    --color-one: #404A88;
    --color-two: #9290C3;
    font-size: 9vw;
    background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
    color: #fff0;
    background-clip: text;
    -webkit-background-clip: text;
    animation: move-bg 12s infinite linear
  }

  @media (prefers-reduced-motion:no-preference) {
    .projects-page-title {
      animation: move-bg 16s linear infinite
    }

    @keyframes move-bg {
      to {
        background-position: var(--bg-size) 0
      }
    }
  }

  .projects-sub-title-container {
    font-size: 3.5vw;
    font-weight: 400;
    margin-top: .5rem;
    width: 90%;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-buttons-container {
    width: 90%;
    display: flex;
    justify-content: left;
    margin-top: 2rem;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 4rem;
    text-decoration: none;
    white-space: nowrap;
    scale: .8;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: none;
    border-radius: 10px;
    background-color: rgb(0 0 0 / .25);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button:hover {
    background-color: rgb(0 0 0 / .75);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button:hover .project-button-text {
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-button-text {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .button-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .all-button {
    flex: 1;
    width: 70%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .featured-button {
    flex: 1;
    width: 80%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .web-development-button {
    flex: 1;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .it-button {
    flex: 1;
    width: 60%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .scripts-button {
    flex: 1;
    width: 70%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-options-logos {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    height: 2rem;
    width: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-row-of-projects,
  .second-row-of-projects {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-left: 5%;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container,
  .second-project-container,
  .third-project-container,
  .fourth-project-container,
  .fifth-project-container,
  .sixth-project-container {
    position: relative;
    border: 2px solid #1C1E21;
    border-radius: 10px;
    font-size: 3vw;
    width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-image-container img {
    height: 100%;
    max-width: 100%;
    height: auto;
    object-fit: scale-down;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-text-container {
    background-color: #2B2E33;
    height: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-title-container {
    padding-top: 3vw;
    padding-left: 1rem;
    text-decoration: underline;
    text-align: center;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-description-container {
    font-size: 2.5vw;
    padding-left: 1rem;
    font-weight: lighter;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link-container,
  .project-technologies-container {
    flex: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link-container {
    scale: .8;
  }

  .project-technologies-container {
    display: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container,
  .project-link-container {
    display: none;
    padding: 1rem;
    text-align: left;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container,
  .second-project-container,
  .third-project-container,
  .fourth-project-container,
  .fifth-project-container,
  .sixth-project-container {
    transition: transform 0.5s ease-in-out;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-text-container,
  .second-project-container:hover .project-text-container,
  .third-project-container:hover .project-text-container,
  .fourth-project-container:hover .project-text-container,
  .fifth-project-container:hover .project-text-container,
  .sixth-project-container:hover .project-text-container {
    height: 50%;
    transition: height 0.3s ease-in-out;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-image-container,
  .second-project-container:hover .project-image-container,
  .third-project-container:hover .project-image-container,
  .fourth-project-container:hover .project-image-container,
  .fifth-project-container:hover .project-image-container,
  .sixth-project-container:hover .project-image-container {
    filter: brightness(50%);
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container .project-link-container,
  .second-project-container .project-link-container,
  .third-project-container .project-link-container,
  .fourth-project-container .project-link-container,
  .fifth-project-container .project-link-container,
  .sixth-project-container .project-link-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 1;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container .project-technologies-container,
  .second-project-container .project-technologies-container,
  .third-project-container .project-technologies-container,
  .fourth-project-container .project-technologies-container,
  .fifth-project-container .project-technologies-container,
  .sixth-project-container .project-technologies-container {
    background-color: #2B2E33;
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-link-container,
  .second-project-container:hover .project-link-container,
  .third-project-container:hover .project-link-container,
  .fourth-project-container:hover .project-link-container,
  .fifth-project-container:hover .project-link-container,
  .sixth-project-container:hover .project-link-container {
    display: block;
    margin-top: -2rem;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .first-project-container:hover .project-technologies-container,
  .second-project-container:hover .project-technologies-container,
  .third-project-container:hover .project-technologies-container,
  .fourth-project-container:hover .project-technologies-container,
  .fifth-project-container:hover .project-technologies-container,
  .sixth-project-container:hover .project-technologies-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vw;
  }

  .github-logo-link {
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .view-source-button {
    background-color: #6e5494;
    color: #333;
    padding: .5rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-link {
    text-decoration: none;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }


  .projects-logo-and-text-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 10%;
    padding-top: 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-logo-container {
    scale: .95;
    display: flex;
    justify-content: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-logo-name-container {
    margin-top: .7rem;
    text-align: center;
    font-size: 2vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .express-logo {
    background-color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .third-project-container .project-description-container {
    text-align: center;
    
  }

  .project-technologies-container.project-3 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-4 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-5 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .project-technologies-container.project-6 {
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Certificate Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .certificates-container {
    background-color: #000;
    background-image: url(assets/certificate-bg.png);
    background-size: cover;
    background-position: center;
    height: 90vh;
    padding: 2rem 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title-text {
    font-weight: bolder;
    width: 100%;

    font-size: 7vw;
    text-align: center;
    color: #fff;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .certificates-container-title-text span {
    background-color: rgb(0 0 0 / .5);
    padding: .2em .4em;
    border-radius: 20%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .comptia-certificate-title-text {
    font-size: 6vw;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .comptia-certificate-skill-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-text-container {
    width: 100%;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-title {
    width: 100%;
    margin-left: 10%;
    margin-top: 1rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-sub-title {
    width: 100%;
    margin-top: 1rem;
    text-align: center;
    font-size: 3.5vw;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-certificate-description {
    width: 90%;
    margin-top: 1rem;
    text-align: center;
    font-size: 3vw;
    align-items: center;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .comptia-text-and-skills-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    padding-top: 2rem;
  }

  .comptia-certificate-skills-container {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .credly-link {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    text-decoration: none;
    color: #5189d4;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    width: 100%;

  }

  .app {
    scale: 1;
    min-width: 10vw;
    min-height: 10vh;
    width: 100vw;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto
  }
  
  .tag-list {
    width: 100vw;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: 1rem 0;
    position: relative;
    padding: 1.5rem 0;
    overflow: hidden
  }
  
  .loop-slider {
    .inner {
      display: flex;
      width: fit-content;
      animation-name: loop;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: var(--direction);
      animation-duration: var(--duration)
    }
  }
  
  .tag {
    display: flex;
    align-items: center;
    gap: 0 .2rem;
    color: #e2e8f0;
    font-size: .9rem;
    background-color: #334155;
    border-radius: .4rem;
    padding: .7rem 1rem;
    margin-right: 1rem;
    box-shadow: 0 .1rem .2rem rgb(0 0 0 / 20%), 0 .1rem .5rem rgb(0 0 0 / 30%), 0 .2rem 1.5rem rgb(0 0 0 / 40%);
  
    span {
      font-size: 1.2rem;
      color: #64748b
    }
  }
  
  .fade-tags {
    pointer-events: none;
    background: linear-gradient(90deg, #1C1E21, transparent 30%, transparent 70%, #1C1E21);
    position: absolute;
    inset: 0
  }
  
  @keyframes loop {
    0% {
      transform: translateX(0)
    }
  
    100% {
      transform: translateX(-50%)
    }
  }
  
  .tag-row-1 {
    opacity: 1
  }
  
  .tag-row-2 {
    opacity: 1
  }
  
  .tag-row-3 {
    opacity: 1
  }
  
  .tag-row-4 {
    opacity: 1
  }
  
  .app .tag-list .tag {
    white-space: nowrap
  }



}

/* Contact Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .contact-outer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    background-image: url(assets/contact-background.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-inner-container {
    height: 80%;
    width: 80%;
    background-color: #2B2E33;
    padding-top: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-title {
    width: 100%;
    font-size: 7vw;
    margin-top: 1rem;
    text-align: center;
    font-weight: bolder;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-greeting-container {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-greeting {
    width: 90%;
    /* margin-left: 10%; */
    margin-top: 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 3.5vw;
    margin-left: 5%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-methods-container {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    width: 70%;
    padding-top: 1rem;
    margin-left: 15%;
    margin-right: 0%;
  }

  .contact-method-text {
    text-align: center;
    display: flex;
    text-align: center;
    font-size: 1.5rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-method-1-logo,
  .contact-method-2-logo,
  .contact-method-3-logo {
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    color: #636eb6;
    margin-left: 0%;
    margin-right: 0%;

  }

  .contact-image-container {
    width: 100%;
    text-align: center;
    padding-top: 2%;
    margin-top: 3rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-image {
    scale: 1.5;
  }

  .contact-method-1-container,
  .contact-method-2-container,
  .contact-method-3-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-method-text-container {
    margin-top: 1rem;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-button {
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #E0E0E3;
    width: 100%;
    height: 100%;
    padding: 1rem 1rem;
    border-radius: 10%;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
    box-sizing: border-box;

  }

  .contact-button:focus {
    outline: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-button:hover {
    background-color: #222529;
    padding: 15% 25%;
    height: 100%;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
  }

  .contact-button:hover .contact-method-1-logo,
  .contact-button:hover .contact-method-2-logo,
  .contact-button:hover .contact-method-3-logo {
    fill: #E0E0E3;
    color: #E0E0E3;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .contact-links {
    text-decoration: none;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}

/* Footer Media Query */
@media (min-width: 768px) and (max-width: 1368px) {
  .footer-container {
    background-color: #111314;
    padding: 2rem 0;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }

  .footer-top-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%
  }

  .footer-portfolio-container {
    font-weight: bolder;
    font-size: 4vw;
  }

  .footer-projects-container,
  .footer-certificates-container {
    font-weight: lighter
  }

  .footer-bottom-container {
    width: 90%;
    margin-left: 5%;
    margin-top: 2rem;
    display: flex;
    justify-content: space-between
  }

  .footer-left-corner-container {
    font-size: 3vw;
  }

  .footer-right-corner-container {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .footer-links {
    text-decoration: none;
    color: #E0E0E3;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .footer-button {
    display: flex;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 2.5rem;
    border: none;
    align-items: center;
  }

  .footer-svg {
    width: 2rem;
    height: 2rem;
    margin-left: 0%;
    margin-right: 0%;
    padding-left: 0%;
    padding-right: 0%;
  }
}