@use 'base/variables' as v;
@use 'base/mixins' as m;

.header {
    background-color: v.$verde;

    @include m.tablet {
        &.fixed {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            box-shadow: .1rem .2rem .3rem #333;
        }
    }
 
    
    .contenido-header {    
        padding: 2rem;
        @include m.tablet {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    h1 {
        color: v.$blanco;
        text-align: center;
        @include m.tablet {
            text-align: left;
            margin: 0;
        }
    }
}
.navegacion-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    @include m.tablet {
        flex-direction: row;
    }
    a {
        color: v.$blanco;
        font-size: 2.4rem;

        &:hover,
        &.active {
            color: v.$amarillo;
        }
    }
}
