/*tutorials: hsl (263, 20%, 49%)
Inspiration: hsl (340, 100%, 75%)
Sidenotes, logo: hsl(30, 31%, 95%)
texto, articles, fondo-lupa: hsl( 205, 24%, 11%); 
*/

:root {
    --tutorials: hsl(263, 20%, 49%);
    --inspiration: hsl(340, 100%, 75%);
    --color-principal: hsl(205, 24%, 11%);
    --color-secundario: hsl(30, 31%, 95%);
}

/*------------------fuentes-----------------------------*/
@font-face {
    font-family: 'Cartridge-Regular';
    font-display: swap;    
    src: url("../fonts/Cartridge-Regular.woff2") format("woff2") format("woff")
    
}

@font-face {
    font-family: 'Cartridge-Bold';
    font-display: swap;
    src: url("../fonts/Cartridge-Bold.woff2") format("woff")
}


/*-----------------General*-------------------*/

html {
    font-size: clamp(15px, 0.5vw + 12px, 18px);
}

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

.d-flex {
    display: flex;
}

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

.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;

}

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

@media screen {
    .d-none {
        display: none;
    }
}

@media screen and (min-width: 479px) {
    .visible-sm {
        display: initial;
    }
}

@media screen and (min-width: 599px) {
    .visible-md {
        display: initial
    }



}

@media screen and (min-width: 799px) {
    .visible-ig {
        display: initial;
    }

}

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

/*-----------------Navigation*-------------------*/
nav {
    font-family: 'cartridge-bold', Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

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

nav [title="inicio"],
button {
    /*un tamalo relativo a la fuernte*/
    height: 3em;
    aspect-ratio: 1;
    width: 3em;
}

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

img[ alt="logo"] {
    background-color: var(--color-secundario);


}

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

nav li {
    display: flex;
}

nav li a {
    display: flex;
    align-items: center;
    padding-inline: calc(.5em * 2 + 1.075em) .5em;
    background-size: 1.075em;
    background-position: .5em;

}

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

nav .tutorials a {
    color: var(--tutorials);
    background-image: url("../img/icon-tutorials.svg");

}

nav .tutorials a:hover {
    background-color: var(--tutorials);
    background-image: url("../img/icon-tutorials-active.svg");
}

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

nav .articles a:hover {
    background-color: var(--color-principal);
    background-image: url("../img/icon-articles-active.svg");
}

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

nav .inspiration a:hover {
    background-color: var(--inspiration);
    background-image: url("../img/icon-inspiration-active.svg");

}

nav .sidenotes a {
    color: var(--color-principal);
    background-image: url("../img/icon-sidenotes.svg");
}

nav .sidenotes a:hover {
    background-color: var(--color-secundario)
}


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

nav button:hover {
    background-color: var(--color-principal);
    background-image: url("../img/icon-search-active.svg");
}