:root {
    --tutorials: #9283A8;
    --articles: #161e24;
    --inspiration: #ff80aa;
    --asidenotes: #f6f2ee;
    --color-principal: #000000;
    --color-secundario: #ffffff;
}

/*             fuentes             */

@font-face {
    font-family: 'cartrige-regular';
    src: url(../font/Cartridge-Regular.woff2) format('woff2'), url(../font/Cartridge-Regular.woff) format('woff');
}

@font-face {
    font-family: 'cartrige-bold';
    src: url(../font/Cartridge-Bold.woff2) format('woff2'), url(../font/Cartridge-Bold.woff) format('woff');
}


/*              tamaño ventana                 */

@media screen and (max-width: 370px) {
    li .visually-hidden-screen {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    header nav:first-child {
        margin-inline: 0;
    }
}

@media screen and (min-width: 371px) {
    

    

    li .visible-s {
        position: initial;
        width: initial;
        height: initial;
        padding: initial;
        margin: initial;
        overflow: initial;
        clip: initial;
        white-space: initial;
        border: initial;
    }
}

@media screen and (min-width: 500px){

    li .visible-l {
        position: initial;
        width: initial;
        height: initial;
        padding: initial;
        margin: initial;
        overflow: initial;
        clip: initial;
        white-space: initial;
        border: initial;
    }

    header nav:first-child {
        margin-inline: 0;
    }
    
}

@media screen and (min-width: 750px) {
    li .visually-hidden-screen {
        font-weight: 600;
        position: initial;
        width: initial;
        height: initial;
        padding: initial;
        margin: initial;
        overflow: initial;
        clip: initial;
        white-space: initial;
        border: initial;
    }

    header nav {
        height: 55px;
    }

    header nav * {
        background-size: 1.8rem;

    }

    a img[alt="logo"] {
        width: 75%;
        aspect-ratio: 2/2;
    }

    header nav [title="inicio"],
    header button {
        aspect-ratio: 1;
        height: 3.67em;
        width: 4em;
    }

    header nav .tutorials a {
        background-size: 1.9rem;
    }

    header nav li a {
        padding-inline: calc(.7em * 2.3 + 1.55em) .5em;
    }

    header nav:first-child {
        margin-inline: calc(.5em * 2);
    }
}

.d-flex {
    display: flex;
}

/* hacer texto invisible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.justify-content-between {
    justify-content: space-between;
}

.flex-grow {
    flex-grow: 1;
}

body {
    color: var(--color-principal);
}

a {

    text-decoration: none;
    color: var(--color-principal);
}

img[alt="logo"] {
    background-color: var(--asidenotes);
    width: 58%;
}

nav {
    font-size: 2rem;
    font-size: clamp(1rem, 1vw, 1.1rem);
    font-family: 'cartrige-bold', Courier, monospace;
}

nav:first-child {
    margin-inline: calc(.5em * 2);
}

nav * {
    background-repeat: no-repeat;
    background-size: 1.2em;
    text-transform: uppercase;
}

nav li {
    display: flex;
}

nav ul {
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: calc(.5em * 2.3 + 1.55em) .5em;
    background-position: .5em center;
}

nav [title="inicio"],
button {
    aspect-ratio: 1;
    height: 3.3em;
    width: 4em;
}

nav [title="inicio"] {
    background-color: var(--asidenotes);
    display: flex;
    align-items: center;
    justify-content: center;
}

nav li:not(.sidenotes) a:hover {
    color: var(--color-secundario);
}

nav .tutorials a {
    color: var(--tutorials);
    background-image: url(../img/imgi_30_icon-tutorials.svg);
    background-size: 1.4rem;
}

nav .tutorials a:hover {
    background-color: var(--tutorials);
    background-image: url(../img/300.svg);
    color: var(--asidenotes);
    transform: scale3d(1.11, 1.2, 1.1);
    transition:ease .5s;
}

nav .articles a {
    color: var(--articles);
    background-image: url(../img/imgi_31_icon-articles.svg);
}

nav .articles a:hover {
    background-color: var(--articles);
    background-image: url(../img/310.svg);
    transform: scale3d(1.11, 1.2, 1.1);
    transition:ease .5s;

}

nav .inspiration a {
    color: var(--inspiration);
    background-image: url(../img/imgi_32_icon-inspiration.svg);
}

nav .inspiration a:hover {
    background-color: var(--inspiration);
    background-image: url(../img/imgi_42_icon-inspiration-active.svg);
    color: var(--asidenotes);
    transform: scale3d(1.11, 1.2, 1.1);
    transition:ease .5s;
}

nav .sidenotes a {
    background-image: url(../img/imgi_33_icon-sidenotes.svg);
}

nav .sidenotes a:hover {
    background-color: var(--asidenotes);
    transform: scale3d(1.11, 1.2, 1.1);
    transition:ease .5s;
}

nav button {
    background-image: url(../img/imgi_34_icon-search.svg);
    background-color: transparent;
    border: 0 none;
    margin-inline-start: auto;
    background-position: center;
}

nav button:hover {
    background-color: var(--articles);
    background-image: url(../img/340.svg);
    transform: translate(-4px);
    transition:ease-in-out .5s;
}