@font-face { 
    font-family: 'Inria Sans';
        font-weight: 400;
        font-style: normal;
        src: url('fonts/InriaSans-Regular.woff2') format('woff2'), 
             url('fonts/InriaSans-Regular.woff') format('woff'), 
             url('fonts/InriaSans-Regular.ttf') format('truetype');
    font-family: 'Exo2'; 
        src: url('fonts/Exo2-VariableFont_wght.ttf') format('truetype'); 
}
 
/* @media (min-width: 1000px) {
    #holding-content li {
        font-size: 32px; 
} */

html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow-x: hidden; 
    overflow-y: auto; 
}

body {
    height: 100%; 
    margin: 0;
    padding: 0; 
    max-width: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    background: #000; 
    box-sizing: border-box; 
}

canvas {
    /* Oversize the canvas slightly to guarantee coverage */ 
    width: 101vw; 
    height: 101vh; 
    display: block; 
    z-index: -1; 

    /* Center the oversized canvas so the clipping is even */
    position: fixed; 
    top: -0.1vh; 
    left: -0.1vw; 
    }

#holding-content {
    /* Keep this section for your overlaying text */
    position: absolute;
    top: 55%; 
    left: 50%; 
    transform: translate(-50%, -45%); 
    z-index: 10; 
    max-width: 100%; 
    width: 90%; 
    box-sizing: border-box; 
}

#logo-bg {
    /* 1. Positioning for the corner */
    position: absolute; 
    top: 5vh; /* Distance from the top edge */
    left: 3vw; /* Distance from the left edge */ 
    z-index: 101;  /* Must be higher than #holding-content (10) to be on top */

    /* 2. Styling the semi-transparent box */
    padding: 1.7vh 2vw 0.6vh 2.1vw; /* Smaller padding for a corner element */
    background-color: rgba(205, 185, 225, 0.7); 
    box-shadow: 0 0 18px rgba(245, 245, 255, 0.9); 
    -moz-box-shadow: 0 0 18px rgba(245, 245, 255, 0.9); 
        -webkit-box-shadow: 0 0 18px rgba(245, 245, 255, 0.9); 
    border-radius: 2.8vw; /* Softened corners */
    
    /* 3. The stylish "frosted glass" effect */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    
} 

#logo-bg img {
    max-width: 300px; /* Adjust this to fit your logo size */
    height: auto;
    display: block;
    width: 15vw; 
    margin-bottom: 1em; 
}

div { 
    font-family: 'Inria Sans', 'Asap Regular', 'Droid Sans', sans-serif; 
}

p { 
    padding: 0.1vw; 
    color: #777270;
    font-size: 100%; 
    font-weight: normal; 
    line-height: 120%; 
    position: relative; 
}

#holding-content ul {
    display: block; 
    width: fit-content; 
    max-width: 100%; 
    padding-left: 1em; 
    margin: 0 auto; 
    text-align: left; 
}

#holding-content li { 
    font-family: 'Inria Sans', 'Asap Regular', 'Droid Sans', sans-serif !important; 
    font-size: clamp(12px, 2vw, 32px); 
    line-height: 150%; 
    margin-bottom: 0.5em; 
    padding-left: 7vw; 
    max-width: 100%; 
    list-style: none; 
    color: #b6ea37; 
    text-shadow: 
      -0.5px -0.5px 0.5px #cfecbd, 
      0.5px 0.5px 1px #305619, 
      1px 1px 1px #284715, 
      1.5px 1.5px 1px #1f3810, 
      2px 2px 1px #17280c, 
      2.5px 2.5px 1px #0e1907, 
      0.7px 0.4px 2px #d9fad4be; 
}

#holding-content ul li:before {
    content:'';
    display: inline-block; 
    height: 20px; 
    width: 20px; 
    background-image: url('graphics/Alge_rund_20px.png');
    background-repeat: no-repeat;
    padding: 0 0 0 1em;
}

h1, h2 {
    color: #777270;
    width: 100%;
    margin: 0;
    font-family: 'Exo2', sans-serif; 
    font-weight: 500; 
    line-height: 120%;
    padding-bottom: 3vh;
    text-align: center;
    text-transform: none; 
    font-variant-ligatures: contextual; 
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: clamp(18px, 4vw, 60px); 
}

h2 {
    font-size: clamp(14px, 3vw, 42px); 
    padding-top: 2vh; 
}

a { 
    font-weight:600; 
    letter-spacing:1px; 
    text-decoration:none; 
    background-image: linear-gradient(to top, #ffffff08, #bbddff40, #ffffff08); 
    border-radius: 6px; padding: 3px 6px;
}

a:hover, a:focus { 
    color: #ec2; 
    background-image: linear-gradient(to top, #cceeff40, #ffffff08, #cceeff40); 
}

#text3d {
    letter-spacing: normal;
    text-shadow: 
      -1px -1px 1px #efede3, 
      0.5px 0.5px 0 #2e2e2e, 
      1px 1px 0 #2c2c2c, 
      1.5px 1.5px 0 #2a2a2a, 
      2px 2px 0 #28282880, 
      2.5px 2.5px 0 #26262666, 
      3px 3px 0 #2424244d, 
      3.5px 3.5px 0 #22222233, 
      4px 5px 5px rgba(30, 30, 30, 0.9),
      5px 7px 5px rgba(40, 40, 40, 0.3),
      6px 9px 8px rgba(55, 55, 55, 0.5),
      7px 10px 35px rgba(70, 70, 70, 0.9);
}

#footer {
    position: fixed; /* Pin it to the viewport */
    bottom: 20px; 
    left: 0; 
    width: 105%; 
    z-index: 10; 
    text-align: center;
    background-color: #876250; 
    font-size: 1.2vw; 
    -webkit-background-clip: text; 
    -moz-background-clip: text;
    background-clip: text; 
    color: transparent; 
    letter-spacing: 2px; 
    text-shadow: 
      -0.5px -0.5px 1px rgba(25,25,25,0.5), 
      0.5px 0.5px 1px rgba(205,220,245,0.4), 
      1px 1px 1px rgba(195,205,230,0.5), 
      1.5px 1.5px 1px rgba(195,205,230,0.5), 
      2px 2px 1px rgba(90,90,90,0.5); 
}