/*==================================================================================================== 
    START ==> INITIAL CSS RESET
==================================================================================================== */
/*  Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
    box-sizing: border-box;
    /*outline: 2px solid lime;
    <== to identify all sizes*/
    /*background: hsl(0 100% 50% / 0.1)
        <== to identify Layering */
}

/* Remove default margin & padding*/
* {
    margin: 0;
    padding: 0;
}

/* Typographic tweaks (Add accessible line-height)*/
body {
    line-height: 1.5;
}

/* Improve media defaults*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Remove built-in form typography styles (Überall Standard font nutzen)*/
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows (Zu Lange Wörter werden nun umgebrochen (may change for Headline's to normal, if needed))*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/*==================================================================================================== 
    END ==> *
==================================================================================================== */

/*==================================================================================================== 
    START ==> GLOBAL
==================================================================================================== */
/*============================================================ 
    GLOBAL ==> BASIC ELEMENTS
============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fontFamilyDefault);
    font-size: var(--fsDesktopDefault);
    background-color: var(--clrBGDefaultInLightMode);
    background-image: url(../assets/background/svgbackgrounds/confetti-doodles.svg);
}


h1,
h2,
h3,
h4 {
    font-family: var(--fontFamilyHeadlines);
}

h1 {
    font-size: var(--fsDesktopH1);
}

h2 {
    font-size: var(--fsDesktopH2);
}

h3 {
    font-size: var(--fsDesktopH3);
}

h4 {
    font-size: var(--fsDesktopH4);
}

a {
    display: inline-block;
    text-decoration: none;
    padding: var(--stdPaddingInteractiveElements);
    border-radius: var(--stdRadiusInteractiveElements);
    color: var(--clrTextLinkInLightMode);
    background-color: var(--clrBGLinkInLightMode);
    cursor: pointer;
    transition: var(--stdTransition);
}

a:hover {
    background-color: var(--clrBGLinkHoverInLightMode);
}

button {
    display: inline-block;
    padding: var(--stdPaddingInteractiveElements);
    border-radius: var(--stdRadiusInteractiveElements);
    color: var(--clrTextBtnInLightMode);
    background-color: var(--clrBGBtnInLightMode);
    cursor: pointer;
    transition: var(--stdTransition);
}

button:hover {
    background-color: var(--clrBGBtnHoverInLightMode);
}

input {
    font-size: var(--fsDesktopTertiary);
    padding: var(--stdPaddingInteractiveElements);
    border-radius: var(--stdRadiusInteractiveElements);
    transition: var(--stdTransition);
}