#header {
position: fixed;
background-color: transparent;
width: 100%;
height: 20%;
top: 0;
left: 0;
color: #F5DEB3;
font-family: 'Cooper Black', Arial, sans-serif;
line-height: 100px;
z-index: 1000;
padding: 0;
border-bottom: 1px solid #F5DEB3;
transition: background-color 0.3s ease;
}
#header.scrolled {
background-color: black;
}
#main-title{
position:absolute;
font-family:'Cooper Black',Arial,sans-serif;
font-size: 5vw;
margin:0;
}.heading-text {
font-size:5vw;
line-height:15px;
animation: fadeInSlide 3s ease forwards;
}

@keyframes fadeInSlide {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#sub-title{
position:absolute;
top:40%;
font-family:arial;
font-size: 3vw;
left:10%;
margin:0;
color:#F5DEB3;
}
.m1{
position: absolute;
background-color: transparent;
width: 8%;
height: 30%;
text-align: center;
line-height: 50px;
font-family: arial black;
font-size: 1.3vw;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s ease;
}
#a6{left:50%;}
#a7{left:60%;}
#a9{left:70%;}
#a10{left:80%;}
a{
text-decoration:none;
color:black;
display:block;
}
#mainHeader {
background-color: transparent;
transition: background-color 0.3s ease;
position: fixed;
width: 100%;
z-index: 1000;
}

#mainHeader.scrolled {
background-color: black;
}
.m1:hover{background-color:#F5DEB3;}
body {
margin-top: 500px;
}