@font-face{
    font-family:police;
    src:url(../police.ttf);
}

.txt {
    text-align: center;
    font-family: police;
    width: auto;
    height: 0px;
    align-items: center;
    justify-content: center;
    margin-left :auto;
    margin-right: auto;
    margin-top: 1.5%;
}

.back{
    background: linear-gradient(to bottom, rgb(130, 208, 244) 40%, #1a1a1a);
    background-position: center center;
}


.img{
    display: flex;
    width:40vh;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.3s;
    transition: background-image 0.3s ;
    background-image: url(../assets/images/img.png);
    background-size: 100% 100%;
}

.img:hover{
    transform : scale(1.02);
    background-image: url(../assets/images/ImgGif4.gif);
	cursor: pointer;

}

.img:active{
    background-image: url(../assets/images/explostion.gif);
}

#button_index{
    color: #77081c;
    border-radius: 100px;
    font-weight: bold;
    font-size:larger;
    padding-right: 2% ;
    padding-left: 2% ;
    border: 100% solid;
    border-width: 0px;
    font-family: police;
    cursor: pointer;    
    margin-bottom: 10%;
    background-color: #F0F0F0;
    transition: transform 0.3s;
    transition: box-shadow 0.3s;
    box-shadow: 5px 5px 10px rgba(128,128,128,0.5);
    transition: scale 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

#button_index:hover{
    background-color: #77081c;
    color: #F0F0F0;
    transform: translate(-5px,-5px);
    box-shadow: 5px 5px 5px rgba(128,128,128,0.7);
}

#button_index:active{
    transform: scale(90%);
}

.button_ev {
    font-family: 'creepy-font', sans-serif;
    font-size: 18px;
    color: #ff6666; /* Light red text color */
    background-color: #1a1a1a; /* Dark background color */
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.button_ev:hover {
    background-color: #ff6666; /* Light red background color on hover */
    color: #1a1a1a; /* Dark text color on hover */
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

.button_ev:active {
    transform: scale(0.9);
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
}

.leftd
.middled
.rightd {
  width: 33.3%;
  text-align: center;
}

.imang {
	display: flex;
    width:30vh;
	aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    transition: box-shadow 0.3s ;
    background-image: url(../assets/images/light.png);
    background-size: 100% 100%;
	border-radius: 200px;
}

.imang:hover {
    transform: scale(1.02);
    filter: brightness(120%); /* Increase brightness on hover */
    transition: transform 0.3s, filter 0.3s;
    background-image: url(../assets/images/light.png);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
}

.imang:active {
    filter: brightness(140%); /* Increase brightness on click */
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
    background-image: url(../assets/images/light.png);
}

.chenille {
    position: absolute;
    pointer-events: none; /* Make sure the chenille doesn't interfere with other elements */
}