.counselor-timer-container {
max-width: 1200px;
margin: 2rem auto;
padding: 2rem;
background-color: #f8f9fa;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
.timer-title {
text-align: center;
color: #2c3e50;
margin-bottom: 2rem;
font-size: 2.2rem;
font-weight: 700;
}
.contestants {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.contestant {
flex: 1;
min-width: 350px;
padding: 1.5rem;
border-radius: 12px;
transition: transform 0.3s ease;
}
.contestant:hover {
transform: translateY(-5px);
}
.contestant-1 {
background-color: #e8f4f8;
border: 2px solid #3498db;
}
.contestant-2 {
background-color: #eafaf1;
border: 2px solid #2ecc71;
}
.contestant-name {
text-align: center;
margin-top: 0;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.contestant-1 .contestant-name {
color: #2980b9;
}
.contestant-2 .contestant-name {
color: #27ae60;
}
.timers {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.timer {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.timer-display {
flex: 1;
font-size: 2.5rem;
font-weight: 700;
text-align: center;
padding: 0.8rem;
border-radius: 6px;
background-color: white;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.contestant-1 .timer-display {
color: #3498db;
border: 2px solid #3498db;
}
.contestant-2 .timer-display {
color: #2ecc71;
border: 2px solid #2ecc71;
}
.time-up {
color: #e74c3c !important;
border-color: #e74c3c !important;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.timer-input {
width: 70px;
padding: 0.6rem;
font-size: 1.1rem;
border: 2px solid #ddd;
border-radius: 6px;
text-align: center;
}
.timer-label {
color: #7f8c8d;
font-weight: 500;
}
.timer-control, .timer-reset {
padding: 0.6rem 1.2rem;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.timer-control {
background-color: #3498db;
color: white;
}
.contestant-2 .timer-control {
background-color: #2ecc71;
}
.timer-control:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.timer-reset {
background-color: #f1c40f;
color: #333;
}
.timer-reset:hover {
background-color: #f39c12;
transform: translateY(-2px);
}
.timer-footer {
text-align: center;
margin-top: 2rem;
font-size: 1.2rem;
color: #7f8c8d;
font-style: italic;
padding-top: 1rem;
border-top: 1px dashed #ddd;
}
@media (max-width: 768px) {
.timer {
flex-wrap: wrap;
}
.timer-display {
width: 100%;
order: 1;
}
.timer-input, .timer-label, .timer-control, .timer-reset {
order: 2;
}
.timer-title {
font-size: 1.8rem;
}
}