body {
    background-color: #7c83ca;
    font-family: Arial, sans-serif;
    color: #000000;
    margin: 0;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212; /* Dunkler Hintergrund */
    color: #ffffff; /* Helle Schriftfarbe */
}

.dark-mode .violet-row {
    background-color: #1e1e1e; /* Dunkler Hintergrund für Container */
    color: #ffffff; /* Helle Schriftfarbe */
}

.dark-mode .footer {
    background-color: #1e1e1e; /* Dunkler Hintergrund für Footer */
    color: #ffffff; /* Helle Schriftfarbe */
}

.dark-mode-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: #222;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: #444;
}

body.dark-mode .dark-mode-toggle {
    background: #ffffff;
    color: #000000;
}

.icon {
    transition: opacity 0.3s ease;
}

/* Anfangszustand: Licht-Icon verstecken */
#light-icon {
    display: none;
}

/* Wenn dark-mode aktiv ist */
body.dark-mode #dark-icon {
    display: none;
}

body.dark-mode #light-icon {
    display: inline;
}

.profile-image {
    max-width: 100%; /* Verhindert, dass das Bild die Breite des Containers überschreitet */
    margin: 10px; /* Abstand vom oberen Rand */
    margin-left:20% ; 
    right: 10px; /* Abstand vom rechten Rand */
    padding: 5%;
    width: 250px; /* Größe des Bildes anpassen */
    height: auto; /* Proportionen beibehalten */
    border-radius: 50px; /* Rundes Bild */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Schatten für das Bild */
}

/* Reset styles to make sure everything looks consistent */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Center the main title */
.title {
    text-align: center;
    margin-top: 20px;
}

/* Style for the name paragraph */
.name-title {
    text-align: center;
    font-size: 2.5em; /* Change the font size */
    font-family: 'Times New Roman'; /* Change the font family */
    margin-top: 20px;
}

/* List style */
.list {
    list-style-type: none;
    padding-left: 0;
    text-align: center;
    margin-top: 10px;
}

.list li {
    margin: 5px 0;
}

/* Style for clear */
.clear {
    clear: both;
}

.content-box {   /* Container for the content */
    border: 5px solid #b2b7ff;
    padding: 1%;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
    
}

.violet-row {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten */
    border-radius: 10px; /* Abgerundete Ecken */
    margin-bottom: 20px; /* Abstand nach unten */
    padding: 10px;
    font-size: 20px; /* Change the font size */
    font-family: 'Times New Roman'; /* Change the font family */
}

.violet-col {
    border-radius: 10px; /* Abgerundete Ecken */
    margin-bottom: 20px; /* Abstand nach unten */
    padding: 10px;
}


/* Sprachen-Container */
.image-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Hobbies-Container */
.Hobbies {
    display: flex; /* Bilder in einer Reihe anzeigen */
    justify-content: center; /* Zentriert die Bilder */
    gap: 20px; /* Abstand zwischen den Bildern */
    flex-wrap: nowrap; /* Verhindert, dass die Bilder umbrechen */
    margin-top: 20px; /* Abstand nach oben */
}

/* Kleinere Bilder */
.small-image, .small-image1 {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #b2b7ff;
}

/*HOOVER EFFEKT FÜR ALLE*/
.profile:hover,
.image-box:hover,
.working-item:hover,
.skills-item:hover,
.image-item:hover,
.Hobbies-item:hover,
.violet-row:hover{
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}