/* style2.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #000, #676b6b);
    color: #111827;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #e3e8f9, #676b6b);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    margin-bottom: 20px;
    color: #1f2937;
}

.event-list {
    list-style-type: none;
    padding: 0;
}

.event-item {
    margin: 10px 0;
    padding: 15px;
    border-radius: 6px;
    animation: fadeIn 0.5s ease-in-out;
    position: relative;
}

.event-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 6px 0 0 6px;
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-item.age-5 {
    background-color: #ff5ae6; /* Lilla */
	border: 6px solid #ef4444;
	border-radius: 6px 0 0 6px;
	animation: redAlarm 1s infinite;
}

.event-item.age-10 {
    background-color: #e86464; /* Rød */
	border: 6px solid #ff5ae6;
	border-radius: 6px 0 0 6px;
	animation: redAlarm 1s infinite;
}

.event-item.age-20 {
    background-color: #eff976; /* Gul */
	border: 6px solid#bedeba;
	border-radius: 6px 0 0 6px;
	
}

.event-item.age-30 {
    background-color: #b6e89b; /* Grøn */
	border: 6px solid #bedeba;
	border-radius: 6px 0 0 6px;
	
}

.event-item.age-40 {
    background-color: #bedeba; /* Lys grøn */
	border: 6px solid #bedeba;
	border-radius: 6px 0 0 6px;
	
}

.event-item.age-50 {
    background-color: #baded6; /* Lys blå */
	border:6px solid #bedeba;
	border-radius: 6px 0 0 6px;
	
}

.event-item.age-60 {
    background-color: #e3e8e7; /* Lys grå */
	border: 6px solid #bedeba;
	border-radius: 6px 0 0 6px;
	
}

.event-item.very-old {
    background-color: #cccccc; /* Grå */
	
}

 /* Fremhævning af bestemte ord */
        .highlight {
            color: red;
            font-weight: bold;
        }
		.green-text {
            font-weight: bold;
            animation: blinkGreen 1s infinite;
        }
        .purple-text {
            color: purple;
			font-weight: bold;
        }
        .black-text {
            color: black;
			font-weight: bold;
        }
        .orange-blink {
            color: orange;
			font-weight: bold;
            animation: blinkOrange 1s infinite;
        }
        .bold-red-yellow-blink {
            font-weight: bold;
            animation: blinkRedYellow 1s infinite;
        }
        .bold-red-green-blink {
            font-weight: bold;
            animation: blinkRedGreen 1s infinite;
        }
        @keyframes blinkOrange {
            0% { color: orange; }
            50% { color: transparent; }
            100% { color: orange; }
        }
        @keyframes blinkRedYellow {
            0% { color: red; }
            50% { color: yellow; }
            100% { color: red; }
        }
        @keyframes blinkRedGreen {
            0% { color: orange; }
            50% { color: yellow; }
            100% { color: red; }
        }
        @keyframes blinkGreen {
            0% { color: green; }
            50% { color: transparent; }
            100% { color: green; }
        }
		
		.purple-alarm {
			background-color: green;
            animation: purpleAlarm 1s infinite;
        }		
		
        @keyframes purpleAlarm {
            0% { color: purple; }
            50% { color: transparent; }
            100% { color: purple; }
        }	

		.red-alarm {
            background-color: green;
            animation: redAlarm 1s infinite;
        }		
		
        @keyframes redAlarm {
            0% { color: #000; }
            50% { color: transparent; }
            100% { color: #000; }
        }		
		
		.yellow-alarm {
            color: green !important;
            animation: yellowAlarm 1s infinite;
        }		
		
        @keyframes yellowAlarm {
            0% { background-color: yellow; }
            50% { background-color: black; }
            100% { background-color: yellow; }
        }			
		
		.recent-event {
            border: 3px solid;
            border-radius: 5px;
            animation: blinkPurple 1s infinite;
        }
        @keyframes blinkPurple {
            0% { background-color: purple; }
            50% { background-color: transparent; }
            100% { background-color: purple; }
        }