/* basic CSS, Farben, Schriftarte, Schriftgrössen, Schriftfarben, Hintergrundfarben */

/* Farben setzen */
:root {
    --darkblue: rgb(28, 84, 255);
    --lightblue: rgb(84, 173, 255);
}

/* Schriftarten */
.poppins {
    font-family: "Poppins", serif;
}

.carlito {
    font-family: "Carlito", serif;
}

/* Schrift-Dicke */
.fw-300 {
    font-weight: 300;
} /*poppins*/

.fw-400 {
    font-weight: 400;
} /*carlito*/

.fw-500 {
    font-weight: 500;
} /*poppins*/

.fw-700 {
    font-weight: 700;
} /*carlito*/

.fw-800 {
    font-weight: 800;
} /*poppins*/


/*Schrift-Grösse */
.fs-xxsmall {
    font-size: clamp(3px, 0.5vw, 13px);
}

.fs-xsmall {
    font-size: clamp(4px, 1vw, 16px);
}

.fs-small {
    font-size: clamp(5px, 1.5vw, 19px);
}

.fs-medium {
    font-size: clamp(6px, 2vw, 22px);
}

.fs-large {
    font-size: clamp(7px, 2.5vw, 24px);
}

.fs-xlarge {
    font-size: clamp(8px, 3vw, 26px);
}

.fs-xxlarge {
    font-size: clamp(9px, 3.5vw, 40px);
}


/* Schrift-Farbe */
.color-darkblue {
    color: var(--darkblue);
}

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

.color-white {
    color: white;
}

.color-black {
    color: black;
}


/* Hintergrundfarben */
.bg-darkblue {
    background-color: var(--darkblue);
}

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

.bg-white {
    background-color: white;
}

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