@import url('variables.css');

/* == RESET & BASE == */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-clr);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-clr);
    width: 100%;
    min-height: 100dvh;
}

main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: calc(30px + 80px) 10px 10px;
}



h1, h2, h3 {
    color: var(--title-clr);
    font-family: 'Archivo black';
}

h3 {
    font-size: 20px;
}

p {
    font-size: 16px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.sub-title {
    margin-bottom: 8px;
}

/* default */
.btn {
    cursor: pointer;
    padding: 8px 16px;
    font-size: 14px;
    display: grid;
    place-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: all .2s ease-in-out;
    &:focus {
        outline-color: var(--title-clr);
        outline-style: solid;
        outline-offset: 2px;
    }
}
.btn-primary:focus, .btn-secondary:focus {
    outline-width: 2px;
}
/* primary */
.btn-primary {
    background-color: var(--title-clr);
    border: 2px solid var(--title-clr);
    color: var(--bg-clr);
    &:hover {
        background-color: var(--tag-bg);
        color: var(--title-clr);
    }
}
/* secondary */
.btn-secondary {
    border: 2px solid transparent;
    color: var(--title-clr);
    background-color: var(--bg-clr);

    &:hover {
        background-color: var(--border-clr);
    }
}
/* tertiaire */
.btn-tertiaire {
    font-size: 12px;
    width: fit-content;
    background-color: var(--border-clr);
    border-radius: 6px;
    color: var(--title-clr);
    padding: 4px 8px;
    &:hover {
        background-color: var(--tag-bg);
    }
    &:focus {
        outline-width: 1px;
    }
}

/* cookie */
.cookie-banner-container {
    position: fixed;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
    background-color: var(--tag-bg);
    border: 1px solid var(--border-clr);
    padding: 10px;
    border-radius: 6px;
    z-index: 10;

    form {
        margin-top: 10px;
        width: fit-content;
        display: flex;
        gap: 10px;
    }
}

/* -- ALERTS -- */
.alert {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: var(--bdr-radius);
    border: 1px solid transparent;
    z-index: 1000;
}
#success { background: var(--success-bg); border-color: var(--success-bdr); color: var(--success-clr); }
#error { background: var(--danger-bg); border-color: var(--danger-bdr); color: var(--danger-clr); }