*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
background:rgba(23, 167, 207, 0.3);
display: flex;
align-items: center;

}
.logo{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
padding-right: 100px;
}
nav a{
display: inline-block;
text-decoration: none;
font-weight: bold;
color: green;
padding: 10px;
transition: all 0.3s ease;
}
nav a:hover{
color: rgb(212, 9, 57);
transform: scale(1.5);
}
#videosection{
position: relative;
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#videosection video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.content{
position: relative;

max-width: 700px;
z-index: 1;
flex-direction: column;
display: inline-block;
text-align: center;
background: rgba(6, 13, 15, 0.1);
}

h1{
background: linear-gradient(45deg,rgb(0, 0, 255),rgb(12, 232, 60),red);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.content h1{
margin-bottom: 10px;
font-size: 2rem;
background: linear-gradient(45deg,yellow,pink,red);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

}.content p{
margin-bottom: 30px;
font-size: 2rem;
background: linear-gradient(45deg,rgb(255, 0, 4),rgb(11, 200, 238),rgb(246, 9, 187));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.btn{
display: inline-block;
margin-top: 20px;
border: 2px solid yellow;
background-color: aqua;
color: rgb(7, 220, 21);
border-radius: 20px;
padding: 10px;
text-decoration: none;
font-weight: bold;
text-shadow: 2px 2px 2px black;
transition: all 0.3s ease-in-out;
}
.btn:hover{
color: brown;
background-color: chartreuse;
transform: scale(1.3);
}