/* I usually like all my work neatly organised and tidied. Since I tried to merge two site designs together (desktop to mobile version) all the css went a little haywired. I am still in the process of learning media queries and creating responsive designs as I understand how important it is to have layout that is correct for different screen sizes. Going forward from now, I'll be designing in mobile format first and then looking to change each aspect and element to a different viewport. */

* {
  font-family: "Rubik", Courier, monospace;
  scrollbar-width: thin;
  scrollbar-color: rgb(0, 106, 18) transparent;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(0, 106, 18);
  border-radius: 10px;
  border: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(0, 90, 15);
}

.title {
  font-family: "doto";
}

hr {
  color: green;
}

main {
  display: grid;
}

body {
  display: flex;
  flex-direction: column;
  background-color: rgb(245, 245, 245);
}

header {
  min-width: 100%;
  min-height: 5rem;
  background-color: white;
  border-bottom: 1px solid green;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  margin-bottom: 10px;
}

.header_logo {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.header_logo img {
  border-radius: 100%;
  max-width: 5rem;
}

.header_logo h1 {
  font-size: 1.5;
}

.mobile_menu_button {
  width: 50px;
  height: 50px;
  position: relative;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.mobile_menu_button span {
  height: 5px;
  width: 100%;
  background-color: black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: 0.3s ease;
  top: 50%;
  left: 50%;
}

.mobile_menu_button span:nth-child(1) {
  top: 15%;
}

.mobile_menu_button span:nth-child(3) {
  top: 85%;
}

.mobile_menu_button.active span:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile_menu_button.active span:nth-child(2) {
  opacity: 0;
}

.mobile_menu_button.active span:nth-child(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile_menu {
  height: 100vh;
  position: fixed;
  background-color: white;
  width: 100vw;
  max-width: 80vw;
  right: -450px;
  transition: right 0.5s ease-in-out;
  z-index: 2;
  top: 122px;
}

.mobile_menu.active {
  right: 0;
}

.mobile_menu ul {
  list-style-type: none;
  color: green;
  font-weight: 900;
  text-align: center;
  top: 30%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  gap: 30px;
  display: flex;
  flex-direction: column;
}

.mobile_menu ul a:link {
  color: green;
  text-decoration: none;
}

.mobile_menu ul a:visited {
  color: green;
}

.mobile_menu ul a:active {
  color: darkgreen;
}

.welcome_section {
  display: flex;
  height: 80vh;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  justify-content: center;
}

.welcome_section img {
  max-width: 20rem;
  max-height: 20rem;
  border: 1px solid green;
  border-radius: 100%;
  box-shadow: 0 0 20px black;
}

.welcome_section_content h1 {
  margin-top: 50px;
  color: darkgreen;
  font-weight: bolder;
}

.welcome_section_content {
  position: relative;
  text-align: center;
}

.welcome_social_icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 140%);
  background-color: rgba(0, 128, 0, 0.7);
  border-radius: 10px;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5rem;
}

.welcome_social_icons img {
  width: 40px;
  box-shadow: none;
  border: none;
  transform-origin: center bottom;
}

.welcome_social_icons img.jumpShakeActive {
  animation: jumpShake 1.5s ease-in-out forwards;
}

@keyframes jumpShake {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-10px) rotate(-3deg);
  }
  20% {
    transform: translateY(-12px) rotate(3deg);
  }
  30% {
    transform: translateY(-8px) rotate(-2deg);
  }
  40% {
    transform: translateY(-4px) rotate(2deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    transform: translateX(1px) rotate(0.5deg);
  }
}
.about_me_section {
  background: white;
  width: 100%;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about_me_section img {
  max-width: 100%;
  border-radius: 10px;
  position: relative;
  right: 0;
  top: 0;
  box-shadow: 0 0 20px grey;
}

.about_me_section_content {
  display: flex;
  background-color: rgb(245, 245, 245);
  border-radius: 10px;
  padding: 5px;
  text-align: justify;
  z-index: 1;
  position: relative;
  top: -5rem;
  max-width: 21.5rem;
}

.projects_section {
  text-align: center;
  overflow-x: hidden;
  padding: 2rem 1rem;
}

.project_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0 auto;
  max-width: 100%;
}

.project {
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
  max-width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.project > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.project h2 {
  font-size: 1.4rem;
  font-weight: 1000;
  color: green;
  font-family: "doto", sans-serif;
}

.project:nth-child(odd) {
  transform: translateX(-100px);
  text-align: left;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  border-right: 1px solid green;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  padding-right: 5px;
}

.project:nth-child(even) {
  transform: translateX(100px);
  text-align: right;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  border-left: 1px solid green;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  padding-left: 5px;
}

.project.show {
  opacity: 1;
  transform: translateX(0);
}

.project img {
  max-width: 7rem;
  border-radius: 100%;
  box-shadow: 0 0 10px black;
}

.contact {
  max-width: 100%;
  background-color: white;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.contact img {
  width: 40px;
}

footer {
  margin-top: 10px;

  background-color: black;
  align-items: center;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 10px;
}

.footer_top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer_identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer_identity img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footer_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer_text h3 {
  margin: 0;
  font-size: 1rem;
  color: white;
}

.social_icons {
  display: flex;
  gap: 10px;
  margin-top: 0.5rem;
}

.social_icons img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.footer_bottom {
  text-align: center;
  font-size: 0.5rem;
  color: green;
  width: 100%;
}

.sitemap-table {
  border-collapse: separate;
  border-spacing: 0.5rem 0.5rem;
  font-size: 0.5rem;
  color: white;
}

.sitemap-heading {
  color: green;
  font-weight: bold;
}

.sitemap-table td {
  text-align: left;
}

.sitemap-table a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.sitemap-table a:hover {
  color: green;
}

.desktop-nav {
  display: none;
}

.desktop-home {
  display: none;
}

.desktop-about {
  display: none;
}

.desktop-projects {
  display: none;
}

/* Python Projects Page */

.python_home {
  margin: 0 40px;
}

.python_home h1 {
  text-align: center;
}

.python_home p {
  text-align: justify;
}

.python_projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1fr);
  text-align: center;
  gap: 10px;
  margin: 0 auto;
}
.python_project {
  width: 140px;
}
.python_project img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 10px;
}

/* Website Projects Page */
.website_projects {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

.website_projects_home h1 {
  text-align: center;
}

.website_project {
  display: flex;
  align-items: center;
  border-bottom: 1px solid green;
  padding: 10px;
  gap: 15px;
}

.website_project h2 {
  color: green;
  margin: 0;
  flex-grow: 1;
  font-size: 1.2rem;
  text-align: center;
}

.website_project a {
  text-decoration: none;
  color: inherit;
}

.website_project_image {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  object-fit: cover;
}

.website_project_icon {
  width: 40px;
  height: 40px;
}

.website_project_information {
  display: none;
  text-align: justify;
}

/* Cybersecurity Page */

.cybersecurity_home {
  text-align: center;
  border-bottom: 1px solid green;
}

.cybersecurity_home h1 {
  color: green;
}

.cybersecurity_projects {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-around;
  flex-wrap: wrap;
  grid-template-rows: 1fr;
  margin-bottom: 50px;
}

.cybersecurity_project {
  height: 150px;
  width: 150px;
  text-align: center;
}

.cybersecurity_project img {
  border-radius: 100%;
  height: 100px;
  width: 100px;
}

/* Disclaimer Page */

.disclaimer_home {
  min-height: 75vh;
}

/* Pentesting Page */

.pentesting_home {
  border-bottom: 1px solid green;
}

.pentesting_projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  text-align: center;
  gap: 10px;
  margin: 20px auto;
  place-items: center;
}

.pentesting_project {
  justify-content: center;
  align-items: center;
  width: 100px;
  text-align: center;
}

.pentesting_project img {
  width: 100px;
  height: 100px;
  text-align: center;
}

.desktop-pentesting-projects {
  display: none;
}

/* Server Hardening Page */

pre {
  text-align: start;
  background-color: #f6f8fa;
  color: #24292e;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas,
    "Liberation Mono", Menlo, monospace;
  margin: 1em 0;
}

code {
  background: none;
  color: inherit;
}

code .keyword {
  color: #d73a49;
}
code .string {
  color: #032f62;
}
code .number {
  color: #005cc5;
}
code .comment {
  color: green;
  font-style: italic;
}
code .function {
  color: #6f42c1;
}

.server_hardening_main {
  display: none;
}

.mobile-server-hardening {
  display: flex;
}

/* Certificates Page */

.certificates {
  width: 100%;
  align-items: center;
  text-align: center;
  align-content: center;
  justify-content: center;
}

.certificate_button {
  border-radius: 50px;
  color: green;
  background-color: white;
  width: 200px;
}

.certificate_home {
  text-align: center;
}

.certificate_grid {
  display: grid;
  grid-template-rows: 1, 1fr;
  gap: 25px;
}

.certificate-title {
  color: green;
}
.certificate_item {
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.certificate_item img {
  width: 50px;
}

.certificate_page_bottom {
  justify-content: center;
  text-align: center;
}

.server-hardening-topics {
  display: grid;
  margin: 10px auto;
  gap: 10px;
}
.server-hardening-topic {
  border: 1px solid green;
  text-align: center;
  padding: 10px;
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.server-hardening-topic img {
  max-width: 40px;
}

.server-hardening-topic a {
  text-decoration: none;
  color: green;
  font-size: 0.8rem;
  display: flex;
}

.server_content {
  margin: 0 auto;
  width: 370px;
}

/* For animations: */
/* (For most of my animations I used AI, not because I wasn't able to do them but I wanted to meet my own deadline of having a version of my portfolio up and running. That's the reason why they are also simple animations and nothing too advanced. */

/* Base style */
.slide-in {
  opacity: 0;
  transform: translateX(50px); /* start offset */
  transition: all 0.8s ease-out;
}

/* Slide from left */
.slide-in-left {
  transform: translateX(-50px);
}

/* Slide from right */
.slide-in-right {
  transform: translateX(50px);
}

/* Active state when in viewport */
.slide-in.active {
  opacity: 1;
  transform: translateX(0);
}

/*  */
.python_project {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.python_project.show {
  opacity: 1;
  transform: translateY(0);
}

.python_project:nth-child(1) {
  transition-delay: 0.1s;
}
.python_project:nth-child(2) {
  transition-delay: 0.3s;
}
.python_project:nth-child(3) {
  transition-delay: 0.5s;
}
.python_project:nth-child(4) {
  transition-delay: 0.7s;
}

.website_project {
  position: relative;
  z-index: 1;
}

.website_project {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Initial hidden state */
.certificate_item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When visible in viewport */
.certificate_item.slide-up {
  opacity: 1;
  transform: translateY(0);
}

/* When visible */
.website_project.show {
  opacity: 1;
  transform: translateY(0);
}

.website_project:nth-child(1) {
  transition-delay: 0.1s;
}
.website_project:nth-child(2) {
  transition-delay: 0.3s;
}
/* etc. */

/* Base state — hidden and slightly below */
.website_project {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When visible */
.website_project.show {
  opacity: 1;
  transform: translateY(0);
}

.apache {
  text-align: center;
}

.firewall {
  text-align: center;
}

.server-hardening-title {
  text-align: center;
}

.pentesting_home h1 {
  text-align: center;
}

.ctf {
  text-align: center;
}

.database_home {
  text-align: center;
}

.pentesting_subject_home h1 {
  text-align: center;
}

main h1 {
  color: green;
}

/* This is for desktops */
@media screen and (min-width: 1000px) {
  .certificate_home h1 {
    font-size: 3rem;
  }
  .disclaimer_home h1 {
    font-size: 3rem;
  }
  .disclaimer_home {
    font-size: 1.5rem;
  }
  .python_home h1 {
    font-size: 3rem;
  }
  .pentesting_subject_home {
    font-size: 3rem;
  }
  .database_home {
    font-size: 3rem;
  }
  .website_projects_home h1 {
    font-size: 3rem;
  }
  .ctf {
    font-size: 3rem;
  }
  .pentesting_home h1 {
    font-size: 3rem;
  }
  .cybersecurity_home h1 {
    font-size: 3rem;
  }
  .server-hardening-title h1 {
    font-size: 3rem;
  }
  .contact h2 {
    font-size: 3rem;
  }
  .server_hardening_main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: start;
    gap: 2rem;
    margin: 0 auto;
    max-width: 90vw;
  }
  .mobile-server-hardening {
    display: none;
  }

  .server_hardening_main div {
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px;
    width: 45vw;
  }

  .server_hardening_main div h2 {
    text-align: center;
  }
  .desktop-pentesting-projects {
    display: block;
  }

  .pentesting_projects {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .pentesting_project {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
    border-bottom: 1px solid green;
  }

  .pentesting_project img {
    width: 200px;
    height: 200px;
    text-align: center;
  }

  .pentesting_icon {
    text-align: center;
    margin: 0 20px;
  }

  .mobile-pentesting-projects {
    display: none;
  }
  .pentesting_home ol {
    font-size: 1.5rem;
  }
  .cybersecurity_project {
    height: 250px;
    width: 250px;
    text-align: center;
  }

  .cybersecurity_project img {
    border-radius: 100%;
    height: 250px;
    width: 250px;
  }

  .cybersecurity_project img:hover {
    box-shadow: 0 0 15px black;
  }

  .python_projects {
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    width: 100%;
    justify-content: center;
  }

  .python_project {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: auto;
  }

  .python_project img {
    min-width: 250px;
    min-height: 250px;
  }
  .website_project_information {
    display: block;
    padding: 50px;
  }

  .website_project_image {
    width: 300px;
    height: 300px;
  }

  .website_project_icon {
    width: 50px;
    height: 50px;
  }
  .website_project_information h2 {
    font-size: 2rem;
  }

  .website_project > h2 {
    display: none;
  }

  p {
    font-size: 1.5rem;
  }
  .mobile_menu_button {
    display: none;
  }
  .mobile_menu {
    display: none;
  }
  .desktop-nav {
    align-items: center;
    text-align: center;
    justify-content: center;
    align-content: center;
    padding: 15px;
    display: block;
  }

  .desktop-nav nav {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .desktop-nav ul {
    list-style-type: none;
    display: flex;
    gap: 10px;
    font-size: 1.3rem;
  }

  .desktop-nav ul a {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .desktop-nav ul a:hover {
    color: green;
  }
  .desktop-home {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgb(0, 106, 18);
    height: 80vh;
  }
  .welcome_section {
    display: none;
  }
  main {
    padding: 50px;
    display: grid;
  }

  .desktop-home-text {
    width: 50%;
  }

  .desktop-hero-title {
    font-size: 3rem;
    font-family: "Doto", sans-serif;
    font-weight: 1500;
    color: green;
  }

  .profile-photo {
    display: block;
    width: 400px;
    border-radius: 100%;
    box-shadow: 0 0 50px grey;
  }
  hr {
    display: none;
  }
  h2 {
    font-size: 1.5rem;
  }
  .about {
    display: none;
  }
  .desktop-about {
    padding: 50px;
    background-color: white;
    display: flex;
    gap: 50px;
    height: 80vh;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
  }
  .desktop-about-img {
    width: 550px;
    border-radius: 10px;
  }

  .desktop-about h2 {
    font-size: max(3rem);
  }
  .about_me_section {
    display: none;
  }
  .projects_section {
    display: none;
  }
  .desktop-projects {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
  }

  .desktop-projects > div > h2 {
    font-size: 3rem;
  }
  .desktop-projects_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 50px;
    margin-top: 2rem;
  }

  .desktop-project {
    height: 200px;
    width: 200px;
    background-color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border-radius: 50px;
  }

  .header_logo h2 {
    font-size: max(2rem);
  }

  .desktop-project:hover {
    box-shadow: 0 0 10px #333;
    cursor: pointer;
  }

  .desktop-project img {
    height: 200px;
    width: 200px;
    border-radius: 50px;
  }
  .footer_bottom p {
    font-size: 0.7rem;
  }

  footer {
    justify-content: space-between;
    width: 100%;
    padding: 50px;
  }

  .footer_top {
    justify-content: space-between;
    width: 100%;
  }

  .footer_identity img {
    width: 100px;
    height: 100px;
  }

  .footer_text h3 {
    font-size: 1.5rem;
  }

  .social_icons {
    margin-top: 0rem;
  }

  .social_icons img {
    width: 30px;
    height: 30px;
  }

  .sitemap-table {
    font-size: 1rem;
  }

  .sitemap-heading {
    color: green;
    font-weight: bold;
  }

  .sitemap-table td {
    text-align: left;
  }

  .sitemap-table a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .sitemap-table a:hover {
    color: green;
  }
}

/* This is for tablets */

@media screen and (min-width: 600px) and (max-width: 999px) {
  .server_hardening_main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: start;
    gap: 2rem;
    margin: 0 auto;
    max-width: 90vw;
  }

  .mobile-server-hardening {
    display: none;
  }

  .server_hardening_main div {
    border: 1px solid green;
    border-radius: 10px;
    padding: 10px;
    width: 45vw;
  }

  .server_hardening_main div h2 {
    text-align: center;
  }

  .pentesting_projects {
    grid-template-columns: repeat(3, 1fr);
  }

  .pentesting_project {
    width: 100px;
  }

  .pentesting_project img {
    width: 100px;
    height: 100px;
  }

  .cybersecurity_project {
    height: 250px;
    width: 250px;
    text-align: center;
  }

  .cybersecurity_project img {
    border-radius: 100%;
    height: 150px;
    width: 150px;
  }

  .disclaimer_home {
    min-height: 75vh;
  }

  .website_project > h2 {
    display: none;
  }
  .website_project_information {
    display: block;
  }
  .python_projects {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
  .python_project {
    width: 240px;
  }
  .python_project img {
    max-width: 150px;
    max-height: 150px;
  }
  .mobile_menu {
    right: -850px;
  }

  .welcome_section_content h1 {
    color: darkgreen;
    font-weight: bolder;
  }

  .welcome_section_content {
    width: 50%;
    margin-top: 150px;
  }

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

  .about_me_section img {
    max-width: 550px;
    position: relative;
    left: -100px;
    top: 100px;
  }

  .about_me_section_content {
    position: relative;
    max-width: 550px;
    left: 100px;
    top: -100px;
    height: 250px;
    text-align: justify;
    display: flex;
    align-items: center;
  }

  .project_grid {
    width: 80%;
  }

  .project > div {
    justify-content: space-around;
  }

  .project:nth-child(odd) {
    position: relative;
    justify-content: right;
    padding-right: 20px;
  }

  .project:nth-child(even) {
    position: relative;
    justify-content: left;
    padding-left: 20px;
  }

  footer {
    justify-content: space-between;
    width: 100%;
    padding: 10px;
  }

  .footer_top {
    justify-content: space-between;
    width: 100%;
  }

  .footer_identity img {
    width: 100px;
    height: 100px;
  }

  .footer_text h3 {
    font-size: 1.5rem;
  }

  .social_icons {
    margin-top: 0rem;
  }

  .social_icons img {
    width: 30px;
    height: 30px;
  }

  .sitemap-table {
    font-size: 1rem;
  }

  .sitemap-heading {
    color: green;
    font-weight: bold;
  }

  .sitemap-table td {
    text-align: left;
  }

  .sitemap-table a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .sitemap-table a:hover {
    color: green;
  }
  .desktop-nav {
    display: none;
  }
  .profile-photo {
    display: none;
  }
  .home {
    display: none;
  }
  .desktop-about {
    display: none;
  }
  .desktop-projects {
    display: none;
  }

  .projects_section {
    text-align: center;
    overflow-x: hidden;
    padding: 2rem 1rem;
  }

  .project_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 auto;
    max-width: 100%;
  }

  .project {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    max-width: 100%;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .project > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .project h2 {
    font-size: 1.4rem;
    font-weight: 1000;
    color: green;
    font-family: "doto", sans-serif;
  }

  .project:nth-child(odd) {
    transform: translateX(-100px);
    text-align: left;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    border-right: 1px solid green;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    padding-right: 5px;
  }

  .project:nth-child(even) {
    transform: translateX(100px);
    text-align: right;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
    border-left: 1px solid green;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    padding-left: 5px;
  }

  .project.show {
    opacity: 1;
    transform: translateX(0);
  }

  .project img {
    max-width: 7rem;
    border-radius: 100%;
    box-shadow: 0 0 10px black;
  }
}