:root {
    /* colores de fondo, sombras, bordes */
    --color-main-background: #282828;
    --color-alt-background: #1D2021;
    --color-yellow: #FABD2F;
    --color-blue: #83A598;
    --color-orange: #FE8019;
    --color-green: #8EC07C;
    --color-purple: #B16286;
    --color-shadow: #3C3836;
    --color-border: #504945;
    --color-alt-border: #665C54;

    /* colores del texto */
    --color-main-text: #EBDBB2;
    --color-alt-text: #3C3836;
    --color-alt-fade-text: #A89984;
    --color-alt-sub-text: #665C54;
    --color-main-green-text: #8EC07C;
    --color-alt-green-text: #B8BB26;
    --color-main-blue-text: #83A598;
    --color-main-red-text: #D62828;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

body {
    /* altura minima de viewport */
    min-height: 100vh;
    /* establecer el alto de la linea */
    line-height: 1.6;
    /* establece la separacion de caracteres general */
    letter-spacing: 1px;
    /* establecemos el color de la fuente general */
    color: var(--color-main-text);
    /* establecer el color del fondo general */
    background-color: var(--color-main-background);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
}

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

h3 {
    margin-bottom: 1rem;
    text-transform: capitalize;
}

h4::first-letter {
    text-transform: uppercase;
}

p::first-letter {
    text-transform: uppercase;
}

ul {
    list-style: none;
    list-style-type: none;
    list-style-position: inside;
}

/* cada caja de contenido */
.container {
    background-color: var(--color-alt-background);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0.8rem;
    max-width: 800px;
    width: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* elemento oculto */
.hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

@media (min-width: 576px) {
    .container {
        padding: 3rem 2.5rem;
    }
}

/** -- seccion cabecera ------------------------*/
.main-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
}

/* telefonos en horizontal*/
@media (min-width: 576px) {
    .main-nav ul {
        flex-direction: row;
        gap: 2rem;
        justify-content: space-evenly;
    }
}


/** -- contenido principal --------------------*/
.hero-section {
    text-align: center;
}

.image-wrapper img {
    width: 250px;
    height: 250px;
    border: 6px solid var(--color-border);
    border-radius: 100%;
}

.name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-yellow);
    margin-bottom: 1rem;
}

.profession {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-blue);
}

.education {
    font-size: 0.9rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: var(--color-main-green-text);
}

.education::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-left: 5px;
    background-image: url('/assets/svg/flag-for-flag-argentina-svgrepo-com.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle; /* Opcional: para alinear con el texto */
}

.capitalized-shadow {
    text-shadow: 2px 2px 0 var(--color-shadow);
    text-transform: capitalize;
}

.bio {
    margin-bottom: 2rem;
}

/* texto destacado */
.outstanding {
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-purple);
}

.tech-stack {
    margin-bottom: 2rem;
}

.tech-stack .tech-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 1rem;
}

.cta-section {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 576px) {
    .cta-section {
        flex-direction: row;
        gap: 2rem;
    }
}

/* * -- seccion proyectos ------------------------*/
.projects-section {
   text-align: center;
}

.projects-section .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 2rem;
}

@media (min-width: 576px) {
    .projects-section .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/** -- seccion contacto ------------------------------------------*/
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    text-align: center;
}

.contact-section h3 {
    margin-bottom: 2rem;
}

.contact-section .contact-info-wrapper,
.contact-form-wrapper {
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 3rem 1rem;
}

.contact-section .contact-info-wrapper h4,
.contact-form-wrapper h4 {
    margin-bottom: 5px;
}

.contact-section .contact-info-wrapper p,
.contact-form-wrapper p {
    font-size: 0.8rem;
    font-weight: 300;
}

/* bloque con informacion de contacto */
.contact-section .contact-info-wrapper address {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.contact-section .contact-info-wrapper .contact-item {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    text-align: start;
    padding: 0.5rem;
    width: 100%;
    background-color: var(--color-main-background);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
}

.contact-section .contact-info-wrapper .contact-item:hover {
    border-color: var(--color-green);
    transform: translateX(4px);
}

.contact-section .contact-info-wrapper .contact-item .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-section .contact-info-wrapper .contact-item .icon-wrapper img {
    width: 35px;
    height: auto;
    margin: 4px;
}

/* formulario de contacto */
.contact-section .contact-form-wrapper form fieldset {
    border: none;
}

/** -- seccion footer ----------------------------------------------- */
.footer-content {
    margin: 0 auto;
    text-align: center;
}

.copyright {
    font-size: 1rem;
    color: var(--color-main-text);
    margin-bottom: 0.5rem;
}

.copyright::before {
    content: '> ';
    color: var(--color-green);
    font-weight: bold;
}

.credits {
    font-size: 0.9rem;
    color: var(--color-alt-fade-text);
}

/** -- pagina de exito o error de contacto --------------------------*/
.message {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1rem;
}

.message-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-main-blue-text);
}

.message-title--alt {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-main-red-text);
}

.message-text {
    font-size: 0.9rem;
}

.message-link {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-green-text);
}

.message-link--alt {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-blue-text);
}

.message-link:hover {
    text-decoration: underline;
    color: var(--color-alt-green-text);
}

.message-link--alt:hover {
    text-decoration: underline;
    color: var(--color-alt-green-text);
}