/* Імпортуємо гарний шрифт з Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Скидання стандартних відступів браузера */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    /* Градієнтний фон: від фіолетового до синього */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh; /* На всю висоту екрану */
    display: flex; /* Вмикаємо Flexbox для центрування */
    justify-content: center; /* Центр по горизонталі */
    align-items: center; /* Центр по вертикалі */
    color: #333;
}

/* Стилі для картки з анекдотом */
.container {
    background: rgba(255, 255, 255, 0.95); /* Майже білий, трохи прозорий */
    padding: 2rem; /* Внутрішні відступи (32px) */
    border-radius: 20px; /* Закруглені кути */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Тінь знизу */
    width: 90%;
    max-width: 500px;
    text-align: center;
    
    /* Анімація появи */
    animation: slideUp 0.8s ease-out;
}

/* Заголовок */
h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #4a4a4a;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Текст анекдоту */
.joke-text {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #2d3748;
    min-height: 100px; /* Мінімальна висота, щоб картка не стрибала */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кнопка */
.btn {
    background-color: #764ba2;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    text-decoration: none; /* Прибираємо підкреслення, якщо це посилання */
    display: inline-block;
}

/* Ефекти при наведенні на кнопку */
.btn:hover {
    background-color: #5a3b7e;
    transform: scale(1.05); /* Трохи збільшується */
}

.btn:active {
    transform: scale(0.95); /* Натискається */
}

/* Визначення анімації (ключові кадри) */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px); /* Починаємо трохи нижче */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Стаємо на місце */
    }
}