/*---------------------
Stylesheet für Übungen Infografik Animation
Version: 2.2
Author: Enno Hyttrek
March 2025
---------------------*/

@import url(https://rsms.me/inter/inter.css);


/*---------------------
RESET
---------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}


/*---------------------
LAYOUT
---------------------*/

body {
    padding: 1rem;
}

header {
    margin-bottom: 2rem;
}

.container {
    max-width: calc(1200 / 16 * 1rem);
    margin: 0 auto;
    padding: 1rem;
}

ul.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

ul.gallery li {
    position: relative;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    width: calc((100% - 1rem) / 2);
}

ul.gallery li a {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1em 0.5em;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    background: hsla(199,42%,13%,0.8);
}

.footnote {
position: absolute;
bottom: 0;
padding: 0.5em;
}

/*---------------------
TYPOGRAPHY
---------------------*/

/*https://rsms.me/inter/*/
:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    /* fix for Chrome */
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}

body {
    font-weight: 300;
    line-height: 1.3;
}

.footnote,
footer {
    font-size: 0.8em;
}

/*---------------------
COLOR & STYLE
---------------------*/

.footnote {
    color: hsla(199,0%,100%,0.8)
}


/*---------------------
COMPONENTS
---------------------*/
.stage {
    position: relative;
    width: 480px;
    height: 320px;
    background: lightgrey;
    overflow: hidden;
    margin: 0 auto;
}