/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background-image: url('https://i.pinimg.com/736x/7e/df/eb/7edfebe75301674f4625f269879220d5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #fff;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    padding: 40px 20px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(255, 105, 180, 0.5);
}

.card img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.7);
    margin-bottom: 20px;
}

.card h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.card p {
    font-size: 1.1rem;
    line-height: 1.4;
}

footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 50px;
    border-top: 2px dashed rgba(255, 255, 255, 0.5);
}

footer p {
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 2rem;
}

/* Анимации для Y2K стиля */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.card {
    animation: float 6s ease-in-out infinite;
}

/* Стили для разных карточек */
.card:nth-child(1) {
    border-color: #ff69b4;
}

.card:nth-child(2) {
    border-color: #ff69b4;
}

.card:nth-child(3) {
    border-color: #ff69b4;
}