/**
 * 
 * michaelhamann.org, Portfolio
 * 
 * PHP Version 8
 * 
 * @category    Portfolio
 * @package     portfolio
 * @author      Michael Hamann <info@michaelhamann.org>
 * @copyright   2024 michaelhamann.org
 * @link        https://www.michaelhamann.org
 * 
 */

:root {
    /* Text */
    --main-text: "Lucida Console", "Courier New", monospace; /* Schriftart */
    --main-font-size: 0.9rem; /* Haupt-Schriftgröße */
    --color-content-text: rgba(255, 255, 255, 0.9); /* Textfarbe für den Hauptinhalt mit Transparenz */
    --color-footer-text: rgba(255, 255, 255, 1); /* Textfarbe für den Fußbereich */
    --headline-color: #000; /* Textfarbe für Überschriften */
    
    /* Farben */
    --main-background: #f0f0f0; /* Hintergrundfarbe der Seite */
    --primary-color: #1e90ff; /* Hauptfarbe für Akzente */
    --secondary-color: #003366; /* Dunklere Akzentfarbe */
    --divs-background: rgba(0, 0, 0, 0.5); /* Hintergrundfarbe für Abschnitte */
    --color-row-background: rgba(0, 0, 0, 0.2); /* Hintergrundfarbe für Reihen */
    --color-body-background: rgba(0, 0, 0, 0.3); /* Hintergrundfarbe für den Hauptbereich */
    --color-footer-background: rgba(45, 45, 45, 1); /* Hintergrundfarbe des Fußbereichs */
    --color-success: #28a745; /* Erfolgsfarbe */
    --color-error: #dc3545; /* Fehlerfarbe */
    --color-warning: #ffc107; /* Warnfarbe */
    --color-info: #17a2b8; /* Informationsfarbe */

    /* Verläufe */
    --headline-background: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.2)); /* Seitentitel */
    --headline-gradient: linear-gradient(to bottom, #1e90ff, #003366); /* Blaue Farbtöne für Überschriften */
    
    /* Abstände */
    --padding-large: 2rem; /* Großer Abstand */
    --padding-medium: 1.5rem; /* Mittlerer Abstand */
    --padding-small: 1rem; /* Kleiner Abstand */
    --gap-large: 2rem; /* Großer Abstand zwischen Elementen */
    --gap-medium: 1.5rem; /* Mittlerer Abstand zwischen Elementen */
    --gap-small: 1rem; /* Kleiner Abstand zwischen Elementen */

    /* Schriftgrößen */
    --font-size-large: 2.5rem; /* Große Schrift */
    --font-size-medium: 1.25rem; /* Mittlere Schrift */
    --font-size-small: 1rem; /* Kleine Schrift */
    --font-size-xsmall: 0.9rem; /* Sehr kleine Schrift */

    /* Abmessungen */
    --content-width: 1000px; /* Maximale Inhaltsbreite */
    --vertical-height: 100vh; /* Höhe für volle Ansicht */
    --hero-height: 100vh; /* Höhe des Hero-Bereichs */
    --about-picture-size: 300px; /* Größe des Profilbildes */
    --about-picture-mobile-size: 120px; /* Größe des Profilbildes auf Mobilgeräten */
    
    /* Ecken und Schatten */
    --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Textschatten für besseren Kontrast */
    --border-radius: 8px; /* Abgerundete Ecken */
    --box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.3); /* Schatten */
    --box-shadow-hover: 0 6px 8px rgba(0, 0, 0, 0.3); /* Schatten bei Hover */
}