@font-face {
    font-family: SpaceGrotesk;
    src: url(../fonts/SpaceGrotesk-VariableFont_wght.ttf);
}

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: SpaceGrotesk;
}

html
{
    scroll-behavior: smooth;
}

/* Restaurar márgenes por defecto */
dialog
{
    margin: auto;
}

:root
{
    --primary-color: #00674F;
    --primary-color-darker: hwb(165 0% 69%);
    --secondary-color: hwb(46 10% 2%);
    --secondary-color-darker: hwb(46 12% 9%);
}

.btn-primary
{
    background-color: var(--primary-color);
    color: white;
    font-size: 1em;
    padding: 0.5em 1.5em;
    border-radius: 0.5em;
    border: none;
    transition: background-color 0.3s;
    cursor: pointer;
    width: fit-content;
}

.btn-primary:hover
{
    background-color: var(--primary-color-darker);
}

.btn-secondary
{
    background-color: var(--secondary-color);
    color: hsl(0, 0%, 5%);
    font-size: 1em;
    padding: 0.5em 1.5em;
    border-radius: 0.5em;
    border: none;
    transition: background-color 0.3s;
    cursor: pointer;
    width: fit-content;
}

.btn-secondary:hover
{
    background-color: var(--secondary-color-darker);
}

.link
{
    position: relative;
    color: var(--primary-color);
    font-size: 1em;
    text-decoration: none;
    width: fit-content;
}

.link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 0.1em;
    background-color: var(--primary-color);
    transition: width 0.3s ease, left 0.3s ease;
}

.link:hover::after {
    width: 100%;
    left: 0;
}