@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Importiert die Schriftart Poppins aus Google Fonts in verschiedenen Gewichtungen und Stilen */

:root {
    --main-brand-color: hsl(214, 77%, 53%);
    /* Hauptfarbton der Marke */
    --primary-color: #ffffff;
    /* Primärfarbe für Hintergründe, hier weiß */
    --secondary-color: #232933;
    /* Sekundärfarbe für ergänzende Elemente */
    --light-secondary-color: #2E3744;
    /* Helle Version der Sekundärfarbe */
    --text-color: #ffffff;
    /* Haupttextfarbe */
    --secondary-text-color: #B3B4B6;
    /* Sekundäre Textfarbe */
    --dark-secondary-text-color: #333;
    /* Helle Version der Sekundärfarbe */
}

/* Globale Stileinstellungen für die gesamte Webseite */
html {
    scroll-behavior: smooth;
    /* Ermöglicht weiches Scrollen beim Klicken auf Links, die zu Ankerpunkten führen */
}

* {
    margin: 0;
    /* Entfernt den Außenabstand für alle Elemente */
    padding: 0;
    /* Entfernt den Innenabstand für alle Elemente */
}

body {
    background-color: var(--primary-color);
    /*Setzt die Hintergrundfarbe auf die definierte Primärfarbe */
    color: var(--dark-secondary-text-color);
    /* Setzt die Textfarbe auf die definierte Haupttextfarbe */
    font-family: 'Poppins', sans-serif;
    /* Nutzt Poppins als Schriftart für den Text */
    margin: 0;
    /* Entfernt den Standard-Außenabstand */
    padding: 0;
    /* Entfernt den Standard-Innenabstand */
    box-sizing: border-box;
    /* Ändert das Box-Modell, sodass padding und border in die Breite und Höhe inkludiert sind */
}

section {
    padding: 2rem;
    /* Setzt den Innenabstand für alle <section>-Elemente */
    max-width: 800px;
    /* Maximale Breite für <section>, zentriert durch Auto-Margins */
    margin: auto;
    /* Zentriert <section> horizontal */
}

section#about,
section#skills,
section#projects {
    background-color: #f9f9f9;
    /* Hintergrundfarbe für spezifische Abschnitte */
    text-align: center;
    /* Textausrichtung zentriert für diese Abschnitte */
}

header nav ul li a:hover,
header nav ul li a:focus,
#projects p a:hover,
#projects p a:focus,
footer a:hover,
footer a:focus {
    color: #ccc;
    /* Ändert die Textfarbe zu einem helleren Grau beim Überfahren oder Fokussieren der Links */
}

@media only screen and (max-width: 768px) {
    /* Medienabfragen für Bildschirme kleiner als 768px Breite */

    section {
        padding: 1rem;
        /* Reduziert den Innenabstand für <section>-Elemente auf allen kleineren Bildschirmen */
    }

    header nav ul li a:hover,
    header nav ul li a:focus,
    footer a:hover,
    footer a:focus {
        color: white;
        /* Ändert die Textfarbe zu einem helleren Grau beim Überfahren oder Fokussieren der Links */
    }
}