*{
    margin: 0;
    padding:0;
    background-color:black;
}

nav{
    width:100%;
    position:relative;
    display: flex;
    justify-content:center;
    align-items: center;
    background:transparent;
    gap:30px;
    padding:15 60px;
    top:0;
    left:0;
    
    }
    nav a{
        position:relative;
        text-decoration: none;
        font-style: italic;
        font-size: 2.5em;
        z-index: 2;
        color:#fffdd0;
        border-radius: 50px;
        box-sizing: border-box;
        
    
}

.hero{
    width:50%;
    height: 50vh;
    position:relative;
    padding:0 5%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.content{
    text-align: center;

}

.content a{
    text-decoration: none;
    display: inline-block;
    color: wheat;
    font-size: 30px;
    border: 2px solid black;
    padding: 14px 70px;
    border-radius: 50px;
    margin-top: 20px;
    transform:translateY(-6rem);
}
/*Content h1&h2 ensure that the text is over the video*/
.content h1{
    font-size: 60px;
    color:whitesmoke;
    background: none;
    font-weight: 600;
    font-style: italic;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transform: translateY(-5rem);
    top: 0;
    bottom: 0;
   left: 0;
   right: 0;
    
}

.content h2{
    font-size: 20px;
    color:#FFFDD0;
    background: none;
    font-style: italic;
    font-weight: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transform: translateY(-4rem);
    top: 0;
    bottom: 0;
   left: 0;
   right: 0;

}
.content p{
    font-size: 15px;
    color: #FFA500;
    background: none;
    padding:5px;
    margin:10px;
    gap:10px;
    font-weight:900;
    display:flex;
    justify-content:center ;
    text-align:center;
    transform: translateY(-4rem);
    top:0;
    bottom:0;
    left:0;
    right:0;
}

video {
    
    video {
    
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        max-width: 50%;
        max-height: 100%;
        object-fit: 90vh;
    }
}