body {
            background: linear-gradient(135deg, #1d1f20, #5a6e7f);
            color: #ffffff;
            font-family: 'Roboto', sans-serif;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .calculator {
            background-color: rgba(0, 0, 0, 0.85);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
            text-align: center;
            max-width: 450px;
            width: 100%;
            animation: slideIn 1s ease-in-out;
        }

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

        h1 {
            font-size: 2em;
            margin-bottom: 20px;
            color: #1db954;
        }

        label {
            font-size: 1.1em;
            display: block;
            margin-top: 15px;
            text-align: left;
            color: #ccc;
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 10px;
            background: #2b2d42;
            color: #ffffff;
            font-size: 1.2em;
        }

        input[type="number"]:focus {
            outline: none;
        }

        input[type="range"] {
            width: 100%;
            margin: 15px 0;
        }

        .slider-label {
            display: flex;
            justify-content: space-between;
            font-size: 1em;
            color: #ffffff;
            margin-top: -10px;
        }

        .emoji-display {
            font-size: 2em;
            margin-top: 10px;
        }

        .result {
            margin-top: 20px;
            font-size: 1.5em;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.6s ease, transform 0.6s ease;
            position: relative;
            padding: 20px;
            border-radius: 10px;
            background: linear-gradient(135deg, #1db954, #ff5722);
            color: #ffffff;
            display: inline-block;
        }

        .result.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .explanation {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
            margin-top: 15px;
            font-size: 0.9em;
            color: #8ef2c9;
        }

        .explanation.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .result-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .result-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 5px solid #1db954;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            font-size: 1.5em;
            background: rgba(0, 0, 0, 0.5);
        }
		
		.explanation {
			background-color: rgba(40, 40, 40, 0.9); /* Полупрозрачный фон */
			border-left: 5px solid #1db954; /* Зеленая левая граница */
			border-right: 5px solid #1db954; /* Зеленая правая граница */
			padding: 20px; /* Отступы вокруг текста */
			border-radius: 10px; /* Закругленные углы */
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Тень для глубины */
			transition: transform 0.3s ease, opacity 0.3s ease; /* Плавный переход */
			font-family: 'Arial', sans-serif; /* Замените 'Arial' на любой другой шрифт, который вам нравится */
			font-size: 1.2em; /* Увеличенный размер шрифта */
			line-height: 1.25; /* Междустрочный интервал для улучшения читаемости */
			color: #ffffff; /* Цвет текста */
			margin-top: 10px; /* Отступ сверху */
			opacity: 0; /* Изначально невидимо */
			transform: translateY(20px); /* Начальная позиция для анимации */
		}

		.explanation.visible {
			opacity: 1; /* Показать элемент */
			transform: translateY(0); /* Вернуть на место */
		}


		.contact-link {
			display: inline-block;
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #1db954;
			color: #ffffff;
			text-decoration: none;
			border-radius: 10px;
			font-size: 1.2em;
			transition: background-color 0.3s ease, transform 0.3s ease;
		}

		.contact-link:hover {
			background-color: #ff5722; /* Измените цвет при наведении */
			transform: scale(1.05); /* Увеличение при наведении */
		}