/* 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 {
  background-color: white;
  color: black;
  font-family: Verdana;
}/* Общие настройки */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    background: linear-gradient(145deg, #6dd5ed 0%, #2193b0 100%); /* Градиент неба */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden; /* Скрываем скролл для фона */
}

/* Анимированные пузырьки */
.bubbles span {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: float 15s infinite;
    pointer-events: none;
}

.bubbles span:nth-child(1) { left: 10%; animation-duration: 12s; width: 50px; height: 50px; }
.bubbles span:nth-child(2) { left: 30%; animation-duration: 18s; width: 20px; height: 20px; animation-delay: 2s; }
.bubbles span:nth-child(3) { left: 50%; animation-duration: 14s; width: 60px; height: 60px; animation-delay: 4s; }
.bubbles span:nth-child(4) { left: 70%; animation-duration: 20s; width: 40px; height: 40px; }
.bubbles span:nth-child(5) { left: 90%; animation-duration: 16s; width: 25px; height: 25px; animation-delay: 1s; }
.bubbles span:nth-child(6) { left: 20%; animation-duration: 22s; width: 70px; height: 70px; animation-delay: 3s; }
.bubbles span:nth-child(7) { left: 60%; animation-duration: 13s; width: 35px; height: 35px; animation-delay: 5s; }
.bubbles span:nth-child(8) { left: 80%; animation-duration: 19s; width: 15px; height: 15px; animation-delay: 2.5s; }

@keyframes float {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Контейнер (эффект стекла) */
.container {
    width: 100%;
    max-width: 800px;
    z-index: 10;
}

/* Окно в стиле Vista */
.window {
    background: rgba(255, 255, 255, 0.2); /* Прозрачный фон */
    backdrop-filter: blur(10px); /* Размытие (стекло) */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

/* Строка заголовка */
.title-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.window-controls {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}

.window-controls span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.close { background: #ff5f56; }
.minimize { background: #ffbd2e; }
.maximize { background: #28c840; }

.title-text {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Контент */
.content {
    padding: 40px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 300;
    letter-spacing: 1px;
}

p {
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Карточки */
.card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.card h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 400;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

ul li:last-child {
    border-bottom: none;
}

.footer {
    text-align: center;
    margin-top: 30px;
    opacity: 0.7;
    font-size: 0.9rem;
}