:root {
    --orange: #ff7f32;
    --purple: #5c068c;
    --light-gray: #a8a99e;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: 'D-DIN';
    src: url("../../fonts/D-DIN.otf") format('opentype');
    font-weight: normal;
}

@font-face {
    font-family: 'D-DIN';
    src: url("../../fonts/D-DIN-Bold.otf") format('opentype');
    font-weight: bold;
}

header {
    margin: 0;
}

.ayuda {
    margin: 0;
    display: flex;
    background-color: rgb(238 238 238);
    justify-content: space-between;
    padding-inline: 3em;
}

    .ayuda > h1 {
        font-size: 1.2rem;
        color: var(--light-gray);
    }

.items-container {
    display: flex;
    gap: 8em;
}

.items {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .items > img {
        --radio: 25px;
        width: var(--radio);
        height: var(--radio);
    }

    .items > a {
        color: var(--light-gray);
        text-decoration: none;
        font-weight: bold;
    }

.principal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 3em;
}

    .principal > img {
        --logo-scl: 6em;
        width: var(--logo-scl);
        height: var(--logo-scl);
    }

    .principal > p {
        color: var(--purple);
        font-size: 2rem;
        inline-size: 40ch;
    }

    .principal > a {
        text-decoration: none;
        color: var(--orange);
        font-size: 2em;
        font-weight: bold;
        inline-size: 11ch;
        white-space: pre-line;
    }

.navegacion {
    background-color: var(--purple);
    color: white;
    display: flex;
    justify-content: space-between;
    align-content: center;
    position: relative;
    padding-inline: 3em;
}

    .navegacion > h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5em;
    }

.nav-container {
    position: absolute;
    background-color: rgb(137 113 164);
    width: 60%;
    height: 45%;
    bottom: -31px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

    .nav-container > a {
        font-size: 1.5rem;
        text-decoration: none;
        color: white;
    }

.accent {
    background-color: var(--orange);
    padding: 1.5em;
    border-radius: 20px;
    font-weight: bold;
}

.navegacion > button {
    border: 2px solid var(--orange);
    border-radius: 50%;
    position: relative;
    background: none;
    width: 40px;
    height: 40px;
    padding: 1em 1em;
    margin-top: 1em;
}

    .navegacion > button > img {
        height: 100%;
        width: 100%;
        position: absolute;
        inset: 0;
        transform: scale(-50%)
    }

body {
    font-family: "D-DIN";
    margin: 0;
}

aside {
    background-color: rgb(238 238 238);
    float: left;
    padding-top: 4em;
    padding-inline: 2em;
    min-height: 106vh;
}

aside > p{
    color: var(--orange);
    font-weight: bold;
    font-size: 1rem;
    
}

aside > .filtros{
    color: var(--light-gray);
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.filtros > select {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--light-gray);
    outline: none;
    color: var(--light-gray);
    font-family: inherit;
    font-size: 1.5rem;
    width: 12em;
    padding-block: .5em;
}



.container{
   padding-left: 4em;
}

.barra-busqueda {
    margin: 5em 21em;
    position: relative;
}

    .barra-busqueda > .buscador {
        font: inherit;
        color: var(--light-gray);
        font-size: 1.5rem;
        border: none;
        border-radius: 10px;
        width: 25em;
        box-shadow: 0 0 10px 3px rgba(0,0,0,0.3);
        padding: 5px 1em;
        position:relative;
    }

.barra-busqueda > .button{
    background-color: var(--orange);
    border-radius: 10px;
    width: 6em;
    height: 2.8em;
    position: inherit;
    left: 40.7em;
    cursor: pointer;
}

.barra-busqueda > p{
    color: var(--light-gray);
    font-size: .8rem;
    margin-left: 1.5em;
}

.panel-filtros{
    margin-inline: 21em; 
    display: flex;
    gap: 1em;
}

.panel {
    width: 25.2em;
    height: 15em;
    padding: 1em;
    color: var(--light-gray);
    font-size: 1.5rem;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.3);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.panel-filtros > .button-go{
    height: max-content;
    width: max-content;
    border: none;
    border-radius: 5px;
    background-color: var(--orange);
    color: white;
    font: inherit;
    font-size: 1rem;
    font-weight: bold;
    inline-size: 18ch;
    padding-block: 5px;
    cursor: pointer;
}