<main>

<div class="box">
<div class="text">
<h1>what i know,what i do,what i perform,can be changed by effort</h1>
<br>
<A href="https://youtu.be/x7uLutVRBfI?si=AL96GZahge_v7gAv" class="btn">watch demons Slayers

</A>
<button class="heart-btn"></button>
</div>
</DIV>
<div class="box1">
<video id="vdo" autoplay muted loop playsinline>
<source src="/videos/demonslayers.mp4">
</video>
</div>

</main>

.box {

position: relative;

background : url( '/pics/demonslayers.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.btn {
color: pink;
border: 5px solid red ;
background-color: yellow;
text-decoration: none;
font-weight: bold;
border-radius: 20px ;
padding: 10px;
transition: all 0.3s ease-in ;
display: inline-block;
position: relative;

}
.btn:hover{
border: 5px dotted lightgreen;
background-color: pink;
color: black;
transform: scale(1.7);
}
h1{
display: block;
margin:20px;
text-align: center;

}
.text{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}