:root {
    --menu-bg-color: #2F2F2F;
    --primary-bg-color: #B9B9B9;
    --brighter-bg-color: #D0D0D0;
    --darker-bg-color: #CACACA;
    --text-color-bright: #EBEBEB;
    --text-color-dark: #323232;

    --shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
}

/* --- Font Definitions --- */
@font-face {
    font-family: feroniapi;
    src: url('https://katihyyppa.com/fonts/feroniapi-main/fonts/woff2/Feroniapi-MediumItalic.woff2') format('woff2'),
        url('https://katihyyppa.com/fonts/feroniapi-main/fonts/woff/Feroniapi-MediumItalic.woff') format('woff');
}

@font-face {
    font-family: poppins;
    src: url('https://katihyyppa.com/fonts/poppins/Poppins-Regular.otf') format('opentype');
}

@font-face {
    font-family: poppins-italic;
    src: url('https://katihyyppa.com/fonts/poppins/Poppins-Italic.otf') format('opentype');
}

* {
    /*-------- no highlighting -----*/
    -webkit-tap-highlight-color: transparent;
}

/* --- Base HTML/Body Styles --- */
html {

    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    background-color: var(--primary-bg-color);
    font-size: 20px;
}

body {
    opacity: 0;
    padding: 0;
    margin: 0;
    background-color: var(--primary-bg-color);
}


body.loaded {
    opacity: 1;
    transition: opacity .5s ease-in;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
p {
    /* overwrite paddings and margins */
    margin: 0;
    padding: 0;
    font-weight: normal;
}

/*------------------------------------------------------------  links  */
a:link {
    /* unvisited link */
    color: var(--text-color-dark);
}

a:visited {
    /* visited link */
    color: var(--text-color-dark);
}


a:hover {
    /* mouse over link */
    background-color: var(--text-color-dark);
    color: var(--text-color-bright);
    text-decoration: none;
}


a:active {
    /* selected link */
    background-color: var(--text-color-dark);
    color: var(--text-color-bright);
    text-decoration: none;
}


/* --- Anchor Tag (Link) Styles --- */
/*
a:link,
a:visited,
a:hover,
a:active { 
    text-decoration: none;
    font-weight: normal;
    color: var(--text-color-bright);
}
    */

/*------------------------------------------------------------ text selection */
body ::-moz-selection {
    /* Firefox-specific selection style */
    color: var(--text-color-bright);
    background: var(--text-color-dark);
}

body ::selection {
    /* Standard selection style */
    color: var(--text-color-bright);
    background: var(--text-color-dark);
}

.clickable {
    cursor: pointer;
}


/*------------------------------------------------------------ menu bar */
#menu-bar {
    font-family: feroniapi;
    background: var(--menu-bg-color);
    color: var(--text-color-bright);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    transition: height .2s;
    z-index: 1000;
}

/*------------------------------------------------------------ menu overlay */
#menu-overlay {
    font-family: feroniapi;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100svh;
    background-color: var(--menu-bg-color);
    transform: translateY(-100%);
    /* Initial state: Hidden above the viewport, using the same offset unit */
    transition: transform 0.4s ease-in-out;
    z-index: 1001;
    visibility: hidden;
}

#menu-overlay.open {
    /* Final state: visible in the viewport */
    transform: translateY(0);
}

#close-menu {
    position: absolute;
}

#overlay-menu-list {
    flex-grow: 1;
    /* Takes up the remaining height of the overlay */
    display: flex;
    flex-direction: column;
    /* Stacks items vertically */
    justify-content: center;
    /* Centers items vertically */
    align-items: center;
    /* Centers items horizontally */
    list-style: none;
    /* Removes bullet points */
    padding: 0;
    margin: 0;
}

#overlay-menu-list li {
    padding: 50px;
    /* Adds spacing between items */
    color: var(--text-color-bright);
}


#overlay-menu-list a:link,
#overlay-menu-list a:visited,
#overlay-menu-list a:hover,
#overlay-menu-list a:active {
    text-decoration: none;
    color: var(--text-color-bright);
    background-color: var(--menu-bg-color);
    font-weight: normal;
}



/*------------------------------------------------------------ content */
#content {
    font-family: poppins, sans-serif;
    margin: 0 auto;
    color: var(--text-color-dark);
    min-height:90vh;
}

/*------------------------------------------------------------ headline */
#headline {
    font-family: feroniapi;
    text-align: center;
    color: var(--text-color-dark);
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
}

/*------------------------------------------------------------ meta info, project page link */
#meta-info {
    font-family: poppins;
    margin: 0 auto;
    background-color: var(--darker-bg-color);
    text-align: center;
    flex-wrap: wrap;
    transition: padding .2s;
    box-shadow: var(--shadow);
}

/*------------------------------------------------------------  project page link */
#project-page-link-container {
    width: 100%;
    display: flex;
    /* Enables Flexbox */
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically (if height is set) */
}

#project-page-link {
    font-family: poppins;
    transition: padding .2s;
}

#project-page-link a:link,
#project-page-link a:visited,
#project-page-link a:hover,
#project-page-link a:active{
    color: var(--text-color-dark);
}

#project-page-link a:hover,
#project-page-link a:active {
    /* mouse over link */
    background-color: var(--text-color-dark);
    color: var(--text-color-bright);
    text-decoration: none;
}
 

/*------------------------------------------------------------ video */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* Defines the height based on the width - This is the key for the 16:9 ratio (9 / 16 * 100 = 56.25%) */
    height: 0;
    overflow: hidden;
    /* Hides content that exceeds boundaries */

    box-shadow: var(--shadow);
}

.video-frame {
    position: absolute;
    /* Positions the iframe relative to the container */
    top: 0;
    left: 0;
    width: 100%;
    /* Makes the iframe fill the container */
    height: 100%;
}
 
 
.custom-embedded-video-container { /* container for  videos */
    width: 100%;                                                     
    display: flex;                                                               
    justify-content: center;                                                    
}

.custom-embedded-video {          /* class for custom videos (ratio can be specified in html)*/
    opacity: 0;
    transition: opacity .5s ease-in-out;
    box-shadow: var(--shadow);
}


/*------------------------------------------------------------ h3 / intermediate headline in article  */
h3 {
    font-family: feroniapi;
    text-align: center;
}

/*------------------------------------------------------------ text block */
.text-block {
    background-color: var(--brighter-bg-color);
    margin: 0 auto;
    box-shadow: var(--shadow);
}

/*------------------------------------------------------------ image cluster and container*/
.image-cluster {
    max-width: 100%;                      /* Prevent the container from ever being wider than the screen */
    overflow: hidden;                     /* Clip any images or shadows that try to push the width out */
    box-sizing: border-box;               /* Ensure padding doesn't add to the total width */
    margin-left: auto;                    /* Standard centering */
    margin-right: auto;                   /* Standard centering */
}

.image-cluster img {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    box-shadow: var(--shadow);
    max-width: none;                      /* Allow JS to set specific widths without constraints */
}

.image-container img {
    opacity: 0;
    transition: opacity .5s ease-in-out;
    box-shadow: var(--shadow);
}

/*------------------------------------------------------------ caption */

.caption {
    font-family: poppins-italic;
    text-align: center;
    text-wrap: balance;
}

/*------------------------------------------------------------ thanks */
#thanks-title {
    font-family: poppins-italic;
    background-color: var(--brighter-bg-color);
    width: 30%;
    margin: 50px auto 0 auto;
    position: relative;
    box-shadow: var(--shadow);
}

#thanks-text {
    font-family: poppins-italic;
    background-color: var(--darker-bg-color);
    box-shadow: var(--shadow);
}


/*------------------------------------------------------------ footer / imprint */
#footer {
    font-family: poppins, sans-serif;
    background-color: var(--menu-bg-color);
    color: var(--text-color-bright);
    text-align: center; 
}


#imprint,
#credits {
    cursor: pointer;
}


/* --- Used for measuring screen height in js --- */
#full-height {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100lvh;
    width: 0vw;
}

#dynamic-height {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 0vw;
}