html{
	 height: 100%;
	 width:100%;
	 
 }
 body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4; /* Светлый фон для страницы */
            margin: 0;
            
		display: flex;
		background-image: url("https://cdn.steamstatic.com/steamcommunity/public/images/items/405640/6b79c58360dc61dd706a7e403bf5235d45b4263e.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
		height: 100%;
	 width:100%;
	 background-attachment: fixed;
	 
		}

        .dashboard {
            width: 50%;
			height: 70%;
			
			#bottom: 50%;
            margin: auto; /* Центрирование дашборда */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для дашборда */
            background-color: rgba(255,255,255, 0.2); /* Белый фон для дашборда */
			color: #fff ;
			
        }

	.right-piece {
		 #background-color: #00ff00;
		width: 25%; /* you could actually just change it to 0px */
		#margin: 100px auto;
		 #max-width: 800px; /* Максимальная ширина дашборда */
            #margin: 0 auto; /* Центрирование дашборда */
            padding: 20px;
            border-radius: 8px;
           # box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для дашборда */
			float: right;
			#background: rgba(161,21,207, 0.2);
			
		
	}
	
	.left-piece {
		#background-color: #00ff00;
		width: 25%; /* you could actually just change it to 0px */
		#margin: 100px auto;
		 #max-width: 800px; /* Максимальная ширина дашборда */
            #margin: 0 auto; /* Центрирование дашборда */
            padding: 20px;
            border-radius: 8px;
            #box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для дашборда */
			float: left;
		
		
	}




        /* Стили для кликабельного блока */
        .clickable-block {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-radius: 8px;
            text-decoration: none;
            color: #fff; /* Белый текст */
            background-color: rgba(0%, 48.24%, 100%, 0.5); /* Цвет фона блока */
            font-size: 20px; /* Размер шрифта */
            font-weight: bold;
            transition: background-color 0.3s, transform 0.2s; /* Плавный переход при наведении */
        }

  .clickable-block-red {
            display: flex;
            align-items: center;
            padding: 20px 20px;
            border-radius: 8px;
            text-decoration: none;
            color: #fff; /* Белый текст */
            background-color: rgba(100%, 0%, 0%, 0.5); /* Цвет фона блока */
            font-size: 20px; /* Размер шрифта */
            font-weight: bold;
            transition: background-color 0.3s, transform 0.2s; /* Плавный переход при наведении */
        }
  .clickable-block-horror {
            display: flex;
            align-items: center;
            padding: 20px 20px;
            border-radius: 8px;
            text-decoration: none;
            color: #f00; /* Red текст */
            background-color: #000000; /* Цвет фона блока */
            font-size: 20px; /* Размер шрифта */
            font-weight: bold;
            transition: background-color 0.3s, transform 0.2s; /* Плавный переход при наведении */
        }

  .block-update {
            display: flex;
            align-items: center;
            padding: 20px 20px;
            border-radius: 8px;
            text-decoration: none;
            #color: #f00; /* Red текст */
            background-color: rgba(0%, 100%, 0%, 0.5); /* Цвет фона блока */
            font-size: 30px; /* Размер шрифта */
            font-weight: bold;
            transition: background-color 0.3s, transform 0.2s; /* Плавный переход при наведении */
        }





        /* Эффект наведения */
        .clickable-block:hover {
            background-color: #0056b3; /* Темнее при наведении */
            transform: translateY(-2px); /* Поднимает блок при наведении */
        }

	.clickable-block-red:hover {
            background-color: #f10550; /* Темнее при наведении */
            transform: translateY(-2px); /* Поднимает блок при наведении */
        }
		
	.clickable-block-horror:hover {
            background-color: #600312; /* Темнее при наведении */
            transform: translateY(-2px); /* Поднимает блок при наведении */
        }



        /* Стиль для круга внутри блока */
        .circle {
            width: 25px; /* Увеличенный размер круга */
            height: 25px;
            border: 2px solid #fff; /* Белая граница */
            border-radius: 50%; /* Круглая форма */
            margin-right: 15px; /* Отступ справа */
            background-color: #007BFF; /* Цвет круга */
        }


 	.circle-red {
            width: 25px; /* Увеличенный размер круга */
            height: 25px;
            border: 2px solid #fff; /* Белая граница */
            border-radius: 50%; /* Круглая форма */
            margin-right: 15px; /* Отступ справа */
            background-color: #ff0001; /* Цвет круга */
        }  
		
		
 	.circle-horror {
            width: 50px; /* Увеличенный размер круга */
            height: 50px;
            border: 0px solid #100; /* Белая граница */
            border-radius: 50%; /* Круглая форма */
            margin-right: 15px; /* Отступ справа */
            #background-color: #fffff1; /* Цвет круга */
			overflow: hidden;
        } 


.circle-horror img {
   # position: absolute;
    #top: 50%;
  #  left: 50%;
   # width: 100%; /* Подгоняем ширину под контейнер */
    #height: auto; /* Сохраняем пропорции */
   # transform: translate(-50%, -50%); /* Центрируем гифку */
   # object-fit: cover; /* Масштабируем под круг */
	
	 width: 100%;
    height: 100%;
    margin: auto;
}


	.circle-update {
            width: 50px; /* Увеличенный размер круга */
            height: 50px;
            border: 0px solid #100; /* Белая граница */
            border-radius: 50%; /* Круглая форма */
            margin-right: 15px; /* Отступ справа */
            #background-color: #fffff1; /* Цвет круга */
			#overflow: hidden;
        } 


.circle-update img {
   # position: absolute;
    #top: 50%;
  #  left: 50%;
   # width: 100%; /* Подгоняем ширину под контейнер */
    #height: auto; /* Сохраняем пропорции */
   # transform: translate(-50%, -50%); /* Центрируем гифку */
   # object-fit: cover; /* Масштабируем под круг */
	
	 width: 100%;
    height: 100%;
    margin: auto;
	
	
}