body {
    /* background-color: grey; */
}


/* https://colorswall.com/users/359/palettes */
:root {
    --color-1: #20a8d8;
    --color-2: #7ecce4;
    --color-3: #125972;
    --color-4: #818286;
    --color-5: #a6b8c0;
    --color-6: #27282f;
    --color-gris: #cfcfcf;
}


a:hover {
    text-decoration: none;
    color: #125972;
}

a {
    color:var(--color-1);
    font-weight: 400;
}


.seccio {
    padding: 2rem 1rem 4rem 1rem;
}

.seccio-titol {
    padding: 2rem 1rem 2rem 1rem;
}

.seccio-contingut {
    padding:0rem 1rem 0rem 1rem;
}

.contingut {
    padding: 2rem 6rem 4rem 6rem;
}

.bg-gris {
    background-color: #e9ecef;
}

.bg-gris-fluix {
    background-color: #fafafa;
}

.bg-blau {
    background-color: var(--color-1);
}

.bg-negre {
    background-color: black;
}

.blau {
    color: var(--color-2);
}

.gris {
    color:var(--color-gris);
}


.linkBlau {
    color:#2997ff;
}


.vertical-center {       /* centra el text en pantalla horitzontal i vertical */
    min-height: 65%;     /* Fallback for browsers do NOT support vh unit */
    min-height: 65vh;    /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}


pre {
    outline: 1px solid #ccc;
    font-size: 80%;
    background-color: var(--color-5);
    color: white;
    padding: 0px 20px 20px 20px;
}


.codig-var {
    color: black;
}

.mini-nav {
    background-color: rgba(0,0,0,0.8);
    font-size: 75%;
}

.mini-nav a {
    color: #e9ecef;
}

.mini-nav a:hover {
    color: white;
}

.fadeout {
    opacity: 1;
    /* transition: opacity linear 0.8s 0s; */
    /* transition: opacity linear 3s 1s; */
    transition: opacity ease-in 3s 0s;
}

.faded {
    opacity: 0;
}

.h0 {
    font-size: 3rem;
}

.cookieBox {
    color: var(--color-gris);
    font-size: 70%;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    /* max-width: 200px;  */
    /* outline: 1px solid #ccc;  */
}



.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

/*
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:visited,
.btn-outline-primary:focus {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

 */