.placeholder {
	position: relative;
	text-align: center;
}

.placeholder img {
	width: 100%;
	height: auto;
	opacity: 0.7; /* Dark opacity */
}

.play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#playButton {
    background-color: rgb(213, 63, 145); /* Белый фон */
    border: 2px solid #000000; /* Золотая окантовка */
    color: #ffffff; /* Золотой текст */
    font-weight: bold; /* Жирный текст */
    padding: 10px 20px; /* Просторные отступы */
    border-radius: 8px; /* Скругленные края */
    transition: all 0.3s ease; /* Плавный переход эффектов */
  }

  #playButton:hover {
    background-color: #FFD700; /* Золотой фон при наведении */
    color: white; /* Белый текст при наведении */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Лёгкое свечение */
  }

  #playButton:active {
    background-color: #FFC107; /* Более тёмный оттенок золота при клике */
    color: white; /* Белый текст при клике */
    box-shadow: none; /* Убираем свечение */
  }


.play-btn {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-size: 1.5rem;
}
/* Any additional custom styles can go here */
.btn-success {
    background-color: rgb(213, 63, 145); /* Белый фон */

    border: 2px solid #000000 !important; /* Золотая окантовка */
    color: #ffffff !important; /* Золотой текст */
    font-weight: bold; /* Жирный текст */
    padding: 10px 20px; /* Просторные отступы */
    border-radius: 8px; /* Скругленные края */
    transition: all 0.3s ease; /* Плавный переход эффектов */
}

/* Эффект при наведении */
.btn-success:hover {
    background-color: #FFD700 !important; /* Золотой фон при наведении */
    color: white !important; /* Белый текст при наведении */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); /* Лёгкое свечение */
}

/* Эффект при нажатии */
.btn-success:active {
    background-color: #FFC107 !important; /* Более тёмный оттенок золота */
    color: white !important; /* Белый текст */
    box-shadow: none !important; /* Убираем свечение */

}
.table-responsive {
    max-width: 600px; /* Optional: limits the table width for readability */
}

.table th, .table td {
    text-align: left;
    padding: 10px;
}
@media screen and (min-width: 992px) {
  .img-fluid {
      width: 500px; 
      height: auto; 
      margin: 0 auto; 
      display: block; 
  }
}