*{
    padding: 0;
    margin: 0;
}

body{
    background-color: rgb(22, 22, 22);
}

header div{
    display: block;
    background-color: black;
    width: 100%;
    height: 100px;
    position: relative;
}

.headerImg {
    position: absolute;
    width: 70%;
    height: 70%;
    clip-path: inset(0 1% 0 5%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media (min-width:375px){
    .headerImg{
        position: absolute;
        width: 200px;
        height: 40px;
        clip-path: inset(0 1% 0 5%);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

section{
    display: block;
    width: 300px;
    margin: 40px auto;
    color: black;
}

@media (min-width:675px){
    section{
        width: 1000px;
        margin: 80px auto;
    }
}

.heroImg{
    width: 80%;
    margin:0 auto;
}


.main p{
    margin-top: 20px;
}

p,li,h3,form{
    color: rgb(195, 195, 195);
}

h3{
    margin-top: 60px;
}

footer{
    background-color: black;
    width: 100%;
    position: relative;
    height: 150px;
}

footer .line{
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-30%);
    display: flex;
}

footer .line nav li a{
    margin-right: 10px;
    color:  rgb(195, 195, 195);
    text-decoration: none;
}

footer p{
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%,-70%);
}

@media (min-width:675px){
    footer nav{
        display: flex;
    }
}

.main{
    color:rgb(195, 195, 195);
}

div .vocal{


}




@media (min-width:375px){
div .vocal{
    margin:100px auto;
    width:200%;
    
}
}