@media (max-width: 700px) {
  #profile,
  #contact,
  #projects {
    min-height: 100vh !important; /* Permite que el contenedor se expanda según su contenido */
    /* También puedes usar min-height: 100vh; si quieres que tenga al menos el alto de la ventana */
    padding-top: 120px; /* Espacio para que la imagen no quede tapada por el header */
  }
  .profile-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .profile-picture-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: auto;
  }
} /*VARIABLES*/
:root {
  /*COLORS*/
  --aqua: rgb(1, 216, 236);

  /*TYPOGRAPHY*/
  --fs-1: 2.125rem;
  --fs-2: 1.875rem;
  --fs-3: 1.5rem;
  --fs-4: 1.375rem;
  --fs-5: 1.125rem;
  --fs-6: 0.875rem;
  --fs-7: 0.625rem;

  --fw-400: 400;
  --fw-600: 600;

  /*TRANSITION*/
  --transition: 0.5s ease;

  /*SPACING*/
  --section-padding: 50px;

  /*RADIUS*/
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-18: 18px;

  /*SHADOW*/
  --shadow-1: 3px 3px 9px hsla(240, 14%, 69%, 0.2);
  --shadow-2: 3px 3px 9px hsla(204, 92%, 59%, 0.3);
}

/*RESET*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a,
img,
span,
label,
input,
button,
ion-icon {
  display: block;
}

button,
input {
  background: none;
  border: none;
  font: inherit;
}

button {
  cursor: pointer;
}

input {
  width: 100%;
}

ion-icon {
  pointer-events: none;
}

html {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: black;
  font-size: 1rem;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  background: white;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: hsla(219, 14%, 60%, 0.3);
  border: 2px solid white;
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(219, 14%, 60%, 0.5);
}

/*reused style*/

.container {
  padding-inline: 15px;
}

.social-link {
  font-size: 25px;
  color: black;
}

.social-link ion-icon {
  --ionicon-stroke-width: 40px;
}

.social-link:is(:hover, :focus) {
  color: rgb(80, 77, 77);
  transition: var(--transition);
}

/*header*/

.header {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: var(--transition);
  z-index: 4;
}

.header.active {
  box-shadow: var(--shadow-1);
}

.header .container {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle-btn span {
  background: black;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  margin-block: 8px;
  transform-origin: right;
  transition: var(--transition);
}

.nav-toggle-btn span.two {
  transform: scaleX(0.7);
}

.nav-toggle-btn span.three {
  transform: scaleX(0.4);
}

.nav-toggle-btn:is(:hover, :focus) span {
  /*background: var(--aqua)*/
}

.nav-toggle-btn.active span {
  transform: scaleX(1);
  background: rgb(80, 77, 77);
}

.navbar {
  background: white;
  position: fixed;
  top: 70px;
  bottom: 0;
  right: -260px;
  max-width: 260px;
  width: 100%;
  padding: 20px 25px;
  /*border: 1px solid var(--aqua);*/
  box-shadow: var(--shadow-1);
  visibility: hidden;
  transition: 0.25s cubic-bezier(0.51, 0.03, 0.64, 0.28);
}

.navbar.active {
  visibility: visible;
  transform: translateX(-100%);
  transition: 0.5s cubic-bezier(0.33, 0.85, 0.56, 1.02);
}

.navbar-link {
  color: black;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: var(--fs-6);
  padding-block: 5px;
  margin-bottom: 15px;
}

.navbar-link:is(:hover, :focus) {
  /*background: --aqua*/
}

.overlay {
  position: fixed;
  top: 70px;
  background: hsl(216, 30%, 95%);
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.overlay.active {
  opacity: 0.7;
  pointer-events: all;
}

/*profile section*/
#profile {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.profile-container {
  display: flex;
  align-items: center;
  padding: 10vh;
}

.profile-picture-wrapper {
}

.profile-picture {
  width: 80%;
  height: auto;
  border-radius: 400px;
  object-fit: contain;
}

.profile-section {
  text-align: center;
}

.profile-section .text-p1 {
  font-weight: var(--fw-400);
  font-size: var(--fs-5);
}

.profile-section .text-p2 {
  font-weight: var(--fw-400);
  font-size: var(--fs-5);
}

.title {
  font-size: var(--fs-3);
}

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

.btn {
  font-weight: var(--fw-600);
  transition: var(--transition);
  padding: 0.5rem;
  width: 8rem;
  border-radius: 2rem;
  background: white;
  border: black 0.1rem solid;
}

.btn:is(:hover, :focus) {
  color: white;
  background: rgb(80, 77, 77);
  cursor: pointer;
  border: rgb(80, 77, 77) 0.1rem solid;
}

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

/*projects section*/

#projects {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-p1 {
  text-align: center;
}

.title {
  text-align: center;
}

.project-img {
  width: 90%;
  height: 90%;
}

.all-projects-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
  gap: 2rem;
}

.project-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: black 0.1rem solid;
  border-radius: 2rem;
  padding: 1rem;
}

.project-container .btn-container {
  flex-wrap: wrap;
}

.article-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 60vh;
  max-height: 60vh;
}

.project-container .project-title {
  margin-top: 0rem;
}

/*contact*/

#contact {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: black 0.1rem solid;
  border-radius: 2rem;
  margin: 0.5rem;
  padding: 0.5rem;
  gap: 0.3rem;
}

.contact-info-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.contact-title-info-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  color: black;
}