body{
	background-color:black;
	color:white;
	font-size: 25px;


}
.but1{
	align-content: center;
	font-size: 34px;
	background-color: #33FF33;
	border-radius: 20px;
	transition: background-color 2s  ease;
}
.but1:hover{
	background-color: #FF6633;
}

#img{
	
	border-radius: 15px;
	height: 60vh;
	width: 80vh;
	animation: scal1 1s ease-in forwards;

}
#img:hover{
	animation: scal2 1s ease-in forwards;
}
@keyframes scal1 {
	0%{
		transform: scale(1.2);
	}
	100%{
		transform: scale(1);
	}
}
@keyframes scal2 {
	0%{
		transform: scale(1);
	}
	100%{
		transform: scale(1.2);
	}
}
#khungimg{
	height: 60vh;
	width: 80vh;
	overflow: hidden;
	border: 3px solid brown;
	border-radius: 20px;
}

.underline-effect {
    display: inline-block; 
    position: relative;
    font-size: 26px;
	background: linear-gradient(#007bff, #007bff) no-repeat left bottom / 0 2px;
    transition: background-size 1s ease ;
}



.underline-effect:hover {
    background-size: 100% 2px;
}

.sp{
	width: 25vw;
	height: 45vw;
	background-color: gray;
	overflow: hidden;
	border: 2px solid green;
	border-radius: 10%;
	font-size: 1.2rem;
	margin: 10px;	
	animation: disappear 0.5s ease-in  forwards;

}
#spimg{
	height: 20vw;
	width: 35vw;
}
#dssp{
	margin: 10px;
	font-size: 20px;
	text-align: center;
}
.sp:hover{
	animation: appear 0.5s ease-in  forwards;

}
@keyframes appear {
	0%{
		transform: translatey(0px);
	}
	100%{
		transform: translatey(-10px);
	}
	
}
@keyframes disappear {
	0%{
		transform: translatey(-10px);
	}
	100%{
		transform: translatey(0px);
	}
}

#banner{
animation: oppa 2s forwards ;
}

@keyframes oppa {
	0%{
		opacity: 0%;
	}
	100%{
		opacity: 100%;
	}
}