html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model */
    background-color: black;
    color: white;
    font-size: 10px;
}

*, *:before, *:after {
    box-sizing: inherit; /* Hack para Box Model */
  }

body {
    font-size: 16px;
    font-family: 'Satoshi', sans-serif;
}

/*Global */
h1 {
    font-size: 3.8rem;
}


h3 {
    display: block;
    font-size: 1.8rem;
}

p {
    color: rgb(187, 187, 187);
}

/* Navegación */
.nav-principal {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.nav-principal a {
    font-size: 1.9rem;
    text-decoration: none;
    color: grey;
    transition: 0.3s;
}

.nav-principal a:hover{
    color: white;
    transition: 0.3s;
}

svg {
    height: 2.5rem;
}


.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.projects-h1 {
    font-size: 4.5rem;
    padding-bottom: .1rem;
}

.h2-focus {
    font-size: 2rem;
    opacity: .5;
}

.section-focus { /* La sección */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.2rem;
}

.article-focus { /* El recuadro */
    max-width: 440px;
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color: rgb(18, 18, 18);
    border-radius: 10px;
}

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

.a-flex {
    text-decoration: none;
}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

.svg-flex {
    display: flex;
}