diff --git a/css/style.css b/css/style.css
index 3100b88..1b3d00c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -46,6 +46,177 @@ body::before {
100% { transform: translateX(0px); }
}
+/* ===========================
+ Dark Mode Styles
+ =========================== */
+
+/* Dark Mode Toggle Button */
+.dark-mode-toggle {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 9999;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: rgba(255, 20, 147, 0.9);
+ color: white;
+ border: 2px solid #ff69b4;
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.dark-mode-toggle:hover {
+ transform: scale(1.15) rotate(20deg);
+ box-shadow: 0 8px 25px rgba(255, 20, 147, 0.5);
+}
+
+.dark-mode-toggle:active {
+ transform: scale(0.95);
+}
+
+/* Dark Mode Styles */
+body.dark {
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f1929 100%);
+ color: #e2e8f0;
+}
+
+body.dark header {
+ background-color: #0f172a;
+ border-bottom-color: #334155;
+}
+
+body.dark header h1,
+body.dark header h2 {
+ color: #60a5fa;
+}
+
+body.dark nav {
+ background-color: rgba(15, 23, 42, 0.95);
+ border-color: #334155;
+}
+
+body.dark nav a {
+ color: #93c5fd;
+}
+
+body.dark nav a:hover,
+body.dark nav a.active {
+ color: #60a5fa;
+}
+
+body.dark main {
+ background-color: rgba(15, 23, 42, 0.5);
+}
+
+body.dark section {
+ background: rgba(30, 41, 59, 0.85);
+ border-color: #334155;
+ color: #e2e8f0;
+}
+
+body.dark section h2,
+body.dark section h3 {
+ color: #60a5fa;
+}
+
+body.dark .card {
+ background: rgba(30, 41, 59, 0.85);
+ border-color: #334155;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .card:hover {
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+}
+
+body.dark .card h3 {
+ color: #60a5fa;
+}
+
+body.dark button {
+ background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+ color: white;
+ border-color: #1e40af;
+}
+
+body.dark button:hover {
+ background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+}
+
+body.dark input,
+body.dark textarea,
+body.dark select {
+ background-color: rgba(51, 65, 85, 0.5);
+ border-color: #475569;
+ color: #e2e8f0;
+}
+
+body.dark input::placeholder,
+body.dark textarea::placeholder {
+ color: #94a3b8;
+}
+
+body.dark input:focus,
+body.dark textarea:focus,
+body.dark select:focus {
+ border-color: #60a5fa;
+ box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
+}
+
+body.dark .progress-bar {
+ background: rgba(96, 165, 250, 0.2);
+ border-color: #3b82f6;
+}
+
+body.dark .progress-fill {
+ background: linear-gradient(90deg, #3b82f6, #60a5fa);
+}
+
+body.dark table {
+ background-color: rgba(30, 41, 59, 0.8);
+ border-color: #334155;
+}
+
+body.dark table thead {
+ background-color: rgba(15, 23, 42, 0.9);
+ color: #60a5fa;
+}
+
+body.dark table tbody tr:hover {
+ background-color: rgba(59, 130, 246, 0.1);
+}
+
+body.dark footer {
+ background-color: #0f172a;
+ border-top-color: #334155;
+ color: #94a3b8;
+}
+
+body.dark footer a {
+ color: #60a5fa;
+}
+
+body.dark footer a:hover {
+ color: #93c5fd;
+}
+
+/* Dark Mode Toggle Button in Dark Mode */
+body.dark .dark-mode-toggle {
+ background: rgba(59, 130, 246, 0.9);
+ border-color: #3b82f6;
+ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+}
+
+body.dark .dark-mode-toggle:hover {
+ box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
+}
+
/* ===========================
Typography
=========================== */
diff --git a/eis_projekt.html b/eis_projekt.html
index cdb1ff6..24b7936 100644
--- a/eis_projekt.html
+++ b/eis_projekt.html
@@ -9,6 +9,11 @@
+
+
+