/* Modificadores generales de todas las paginas */
:root {
    --primary-color-a: #f1e40f;
    --primary-color-b: rgb(51, 51, 51);
    --text-color-a: #f1e40f;
    --text-color-b: #ffffff;
    --text-color-c: rgb(51, 51, 51);
}

@view-transition{
    navigation: auto;
}

::view-transition-group{
    animation-duration: 1.5s;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 1.5vw;
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

header {
    width: 100%;
    height: 4.5vw;
    background: rgb(46, 46, 46);
    color: var(--text-color-b);
    align-content: center;
    position: fixed;
    z-index: 2;
    top: 0;
    box-sizing: border-box;
}

header nav {
    width: 100%;
    height: 100%;
    align-content: center;
}

header nav ul {
    width: 100%;
    height: 100%;
    align-content: center;
}

header nav ul li {
    height: 100%;
    padding: 0 1.5%;
    align-content: center;
    box-sizing: border-box;

    border-bottom-color: var(--primary-color-a);
    border-bottom-width: 0vw;
    border-bottom-style: solid;

    transition-duration: 0.1s;
}

header nav ul li a {
    display: block;
    height: 100%;
    align-content: center;

    transition-duration: 0.1s;
}

header nav ul li:hover {
    border-bottom-color: var(--primary-color-a);
    border-bottom-width: 0.4vw;
    border-bottom-style: solid;
    background: rgb(40, 40, 40);
    box-shadow: inset 0 0 1vw rgba(40, 40, 40, 0.9);
}

header nav ul li:hover a {
    color: var(--text-color-a);
}

nav ul {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    padding: 0%;
    margin: 0%;
    list-style: none;
}

nav a {
    color: var(--text-color-b);
    text-decoration: none;
}

.button {
    display: inline-block;
    background: #007bff;
    color: var(--text-color-b);
    font-weight: bold;
    padding: 1vw 2vw;
    text-decoration: none;
    border: none;
    border-radius: 1vw;
    transition-duration: 0.1s;
}

.button:hover {
    background: #0056b3;
    scale: 1.1;
}

.title_container_brown {
    font-weight: bold;
    font-size: 3vw;
    color: var(--text-color-a);
    margin: 0%;
}

.title_container_yellow {
    font-weight: bold;
    font-size: 3vw;
    color: var(--text-color-c);
    margin: 0%;
}

.text_container_brown {
    color: var(--text-color-b);
}

.text_container_yellow {
    color: var(--text-color-c);
}

.container_brown {
    width: 100%;
    background: var(--text-color-c);
    text-align: center;
    border-bottom-color: var(--text-color-b);
    border-bottom-width: 0.8vw;
    border-bottom-style: solid;
    padding: 7.5% 14%;
    box-sizing: border-box;
}    

.container_yellow {
    width: 100%;
    background: var(--primary-color-a);
    text-align: center;
    border-bottom-color: var(--text-color-b);
    border-bottom-width: 0.8vw;
    border-bottom-style: solid;
    padding: 7.5% 14%;
    box-sizing: border-box;
}

#footer_all_pages {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5vw;
    padding: 0%;
    border: 0;
}

#footer_all_pages p {
    margin: 0;
}


/* Modificadores de la pagina principal */

#imagen_inicial {
    width: 25%;
    border-radius: 100%;
    margin-top: 4vw;
    margin-bottom: 1vw;
}

.container_cat_proy {
    display: flex;
    justify-content: space-between;
}

.container_cat_proy article {
    width: 45%;
    border-radius: 3vw;
    background: var(--text-color-b);
    transition-duration: 0.1s;
}

.container_cat_proy article:hover {
    box-shadow: inset 0 0 3vw rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

.container_cat_proy article a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10% 12%;
    box-sizing: border-box;
    text-decoration: none;
}

.container_cat_proy article a img {
    width: 50%;
    box-sizing: border-box;
}

.container_cat_proy article a h3 {
    margin-bottom: 0.9vw;
}

.container_cat_proy article a p {
    margin: 0%;
    font-size: 1.3vw;
}

form fieldset {
    padding: 1.5% 10% 3% 10%;
    margin: 0%;
    border: none;
}

form fieldset label {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    align-items: center;
    /* text-align: left; */
}

form fieldset label:nth-child(2) {
    margin: 1.5vw 0%;
}

form fieldset label input {
    width: 100%;
    height: 3.5vw;
    margin-top: 1vw;
    border: var(--text-color-c) solid 0.16vw;
    border-radius: 1.75vw;
    padding: 0 3vw;
    box-sizing: border-box;
}

form fieldset label:nth-child(3) input {
    height: 8vw;
}
    

/* Modificadores de las paginas de proyectos de python y power bi */

#hero_projects {
    margin-top: 4.5vw;
}

.container_projects {
    display: flex;
    height: 43vw;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5vw;
}

.container_image {
    display: flex;
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 2vw;
}

.container_image img {
    height: 100%;
}

.container_text {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: start;
    text-align: start;
}

.container_text ul {
    text-align: left;
    margin: 0;
    padding: 0 5%;
}

.container_text .button {
    width: 30%;
    text-align: center;
}

.container_text .title_projects {
    font-size: 2.75vw;
}

.image_projects img {
    width: 100%;
}

/* Modificadores de las paginas de proyectos con jupiter notebooks */


#hero_projects_iframe {
    margin-top: 3vw;
}

.container_projects_iframe {
    display: flex;
    height: 45vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    padding: 3.5% 14%;
    margin-top: 4vw;
}

.container_projects_iframe h1 {
    font-size: 1.8vw;
}

.container_projects_iframe iframe {
    width: 100%;
    height: 100%;
    font-size: 2vw;
    border-radius: 1.75vw;
}