@font-face {
    font-family: 'HeadingFont';
    src: url('fonts/NeueHaasGroteskDisplay--700-Bold-Normal.otf') format('otf');
}

@font-face {
    font-family: 'BodyFont';
    src: url('fonts/PanamaMonospaceRegular.woff') format('woff');
}

@media (max-width: 768px) { 
    h1 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    h2, h3, .website-awakening, p {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    .container {
        width: 100vw; /* Verhindert horizontales Scrollen */
        max-width: 90%; /* Sorgt für besseren Abstand */
        padding: 2vw;
    }

    .footer-center {
        flex-direction: column; 
        font-size: 0.2rem; /* Bessere Lesbarkeit */
        text-align: center;
    }
}



h1 {
    font-family: 'HeadingFont', sans-serif;
    color: #ffd5f5;  /* Schriftfarbe */
    font-size: clamp(3rem, 30vw, 9rem);
    margin-bottom: clamp(1rem, 3vw, 3rem);
    font-weight: bold;  /* Fett */
    line-height: 0.90; /* Erhöht den Zeilenabstand */
    margin: 0;
    opacity: 0.5;  /* 50% Durchsichtigkeit */
    text-align: center;
    position: absolute;
    top: 0.75rem;  /* Abstand vom oberen Rand */
    left: 50%;  /* Horizontale Zentrierung */
    transform: translateX(-50%); /* Zentriert die Überschrift exakt */
}

h2 {
    font-family: 'BodyFont', sans-serif;  /* Korrektur hier mit Komma */
    font-size: clamp(1.2rem, 1vw, 2rem);
    font-weight: bold;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 0.5rem;
    left: 50%;  /* Horizontale Zentrierung */
    transform: translateX(-50%); /* Zentriert die Überschrift exakt */
}


h3 {
    font-size: clamp(0.5vh, 10vw, 1rem);   /* Schriftgröße für h3 */
    margin-bottom: 0.5vw;
    font-weight: lighter;
}

.website-awakening {
    font-size: clamp(0.5vh, 10vw, 1rem);;   /* Gleiche Schriftgröße wie h3 */
    margin-top: 0px;    /* Kein Abstand nach oben */
    margin-bottom: 0.5vw; /* Hier kannst du den Abstand nach unten steuern */
    line-height: 1.2;   /* Zeilenhöhe anpassen, falls der Abstand zwischen den Zeilen zu groß ist */
}

p {
    font-size: clamp(0.75rem, 5vw, 0.5rem);
    margin-top: 0px;
    margin-bottom: 1vw;
}


body {
    font-family: 'BodyFont', sans-serif;  /* Korrektur hier mit Komma */
    background-image: url("images/sleepy_cat.jpeg"); /* Bildpfad */
    background-size: cover; /* Deckt den gesamten Bildschirm ab */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert Wiederholung des Bildes */
    background-attachment: fixed; /* Bleibt beim Scrollen fixiert */
    height: 100vh; /* Volle Höhe des Viewports */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    box-sizing: border-box;
}

.container {
        width: 90%; /* Kein Scrollen nötig */
        max-width: 600px; /* Begrenzung für große Bildschirme */
        margin: 0 auto; /* Zentriert das Element */
        padding: 2vw;  /* Genug Abstand zum Rand */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

/* Footer Container */
.footer {
    position: absolute;  
    bottom: 0.75vh;  /* Abstand vom unteren Rand */
    width: 100%;  
    display: flex;
    flex-direction: column;  /* Stapelt die Elemente vertikal */
    align-items: center;  /* Horizontale Zentrierung */
    text-align: center;
    left: 50%;  /* Horizontale Zentrierung */
    transform: translateX(-50%); /* Zentriert die Überschrift exakt */
}

/* "Contact" Überschrift */
.footer-title {
    font-family: 'HeadingFont', sans-serif;
    font-weight: bold;
    color: #ffd5f5;  
    opacity: 0.65;
    font-size: clamp(1rem, 14vw, 5rem);
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: -0.75%;  /* Abstand nach unten */
}

.footer-center a {
    color: white;  
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(1.2rem, 1vw, 2rem);
    padding: 5px 10px;  
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
    margin-right: 2px;  /* Abstand zwischen den Links */
    margin-bottom: 1%;  /* Abstand nach unten */
}


.footer-center a:hover {
    background-color: #ffd5f5;  /* Hintergrundfarbe beim Hover */
    color: rgb(36, 24, 24);  /* Optional: Schriftfarbe anpassen für Kontrast */
    opacity: 0.75;  /* 50% Durchsichtigkeit */   
}