:root {
    --color-fp-background: white;
    
    /* COLORS: */
    /* VIHREÄ TUMMA: #72741f */
    /* VIHREÄ VAALEA: #ced036 */

    /* PINKKI: #ef9ca1 */
    /* ORANSSI: #ec583d */
    /* HARMAA: lightgrey */
    /* TULILIEKKI: #f9f7d7 */
    /* TULILIEKKI-2: #e6e5d3 */

    /* NEUTRAALI-BG: #efeeef */

    /* TESTAILUT */
    --color-highlight-hover: #ced036;
    --color-highlight-sitename: rgb(204, 152, 97);


    /* VIHREÄ */
    --color-highlight-hover: #ced036;
    --color-highlight-sitename: #72741f;

    /* KELTAINEN */
    --color-highlight-hover: rgb(255, 255, 0);

    /* PINKKI */
    /* --color-highlight-hover: #ef9ca1;
    --color-highlight-sitename: #ec583d; */

    /* HARMAA */
    /* --color-highlight-hover: rgb(198, 198, 198);
    --color-highlight-sitename: rgb(151, 151, 151); */


    --color-highlight-light: lightgrey;
    --font-color-invert: white;

    /* FONT SIZES */
    /* --font-size-xxxxxl: 14rem;
    --font-size-xxxxl: 10rem;
    --font-size-xxxl: 6rem;
    --font-size-xxl: 3rem;
    --font-size-xl: 2.5rem;
    --font-size-l: 2rem;
    --font-size-m: 1.5rem;
    --font-size-s: 1.1rem;
    --font-size-xs: 0.8rem; */
    
    --font-size-xxxxxl: clamp(3.2rem, 4vw, 20rem);
    --font-size-xxxxl: clamp(3.4rem, 6vw, 20rem);
    --font-size-xxxl: clamp(3.2rem, 5vw, 20rem);
    --font-size-xxl: clamp(3rem, 1.8vw, 20rem);
    --font-size-xl: clamp(2rem, 2vw, 18rem);
    --font-size-l: clamp(1.5rem, 1.3vw, 14rem);
    --font-size-m: clamp(1.2rem, 1vw, 10rem);
    --font-size-s: clamp(1.2rem, 0.7vw, 10rem);
    --font-size-xs: clamp(1.2rem, 0.7vw, 10rem);


    
    /* FONT FAMILIES */
    --font-family-headline: "Open Sans";
    --font-family-body: "Open Sans";

    /* --font-family-sitename: "Permanent Marker"; */
    --font-family-sitename: "Knewave";
    --font-weight-sitename: 100;
    --font-style-sitename: normal;

    /* FONT WEIGHTS */
    --font-weight-normal: 100;
    --font-weight-semibold: 600;
    --font-weight-bold: 900;

    /* LETTER-SPACING */
    --font-kerning-headline: -1px;
    --font-kerning-body: -1px;

    /* FONT COLORS */
    /* HEADLINE */
    --font-color-headline: var(--color-highlight-sitename);
    /* --font-color-headline: var(--color-highlight-hover); */
    /* --font-color-headline: var(--color-highlight-sitename); */

    /* --font-color-headline: black; */

    /* BODYTEXT */
    --font-color-body: var(--color-highlight-sitename);
    --font-color-body: var(--color-highlight-hover);
    /* --font-color-body: var(--color-highlight-sitename); */

    /* --font-color-body: black; */
    --font-color-body: #242409;
    
    /* MENULINE */
    --font-color-menuline: var(--color-highlight-sitename);
    --font-color-menuline: var(--color-highlight-hover);
    --font-color-menuline: var(--color-fp-background);

    --font-color-menuline: white;

    /* SITENAME */
    --font-color-sitename: var(--color-highlight-sitename);
    --font-color-sitename: var(--color-highlight-hover);
    --font-color-sitename: var(--color-fp-background);

    /* --font-color-sitename: white; */
    --font-color-sitename: var(--color-highlight-sitename);

    /* --font-color-menuline: var(--font-color-body); */

    /* BORDERS */
    /* --border-size: 1px solid; */
    --border-size: unset;

    --border-color-light: rgb(218, 218, 218);

    /* BACKGROUND COLOR */
    --background-color: rgb(245, 245, 245);

    /* ANIMATIONS */
    --transition-animation: ease-in-out 0.1s;
}



h1,
h2,
h3,
h4,
h5,
h6,
a,
small {
    font-family: var(--font-family-headline);
    font-weight: 400;
    font-style: normal;
}

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

html, body {
    margin: 0;
    background-color: var(--background-color);
    font-size: 12px;
    scroll-behavior: smooth;
}

.margin-top-m {
    margin-top: 5rem;
}

.margin-top-s {
    margin-top: 2rem;
}

#page-wrapper {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-fp-background);
}

.image-minigallery {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 1rem;
}

img.image-small {
    height: 100%;
    width: 100%;
    display: inline-block;
}


#page-wrapper {
    background-color: var(--background-color);
}



/* SVG */

.svg-icon {
    height: 4vh;
    width: 4vw;
}

.svg-icon-big {
    height: 10vh;
    width: 10vw;
}


/* ---------------- MEDIA */

/* TABLET */
@media screen and (min-width: 700px) {


    
}

/* DESKTOP */
@media screen and (min-width: 900px) {

    img.image-small {
        width: 20vh;
        width: 20dvh;
    }
    .image-minigallery {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

}

/* DESKTOP */
@media screen and (min-width: 1600px) {

    .image-minigallery {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

}