*{
    margin:0%;
    padding:0%;
    box-sizing: border-box;
}

html,body{
  background-color: black;
    height: 100%;
    width:100%;
  
}




h4{

    color:goldenrod;
    font-size: 15px;
}

.logo{


    width:100%;
    display: flex;
}

.anim-cont{

height:30%;
width:100%;
text-align: center;
position: relative;
padding-top: 20px;
color:rgba(241, 249, 10, 0.767);

}

nav{
    background:linear-gradient(360deg, rgb(111, 76, 76),black);
top:0%;


}


ul{

    background-color:whitesmoke;
}
a{
 margin-left: 30px;
font-family:𝐇𝐎𝐌𝐄;
font-size: 20px;
}

a:hover{

    transform: scale(1.1,1.1);
}


footer{
    display: flex;
    height: 100%;
    width:100%;
    background-color: black;
    color: white;
    padding: 10px;
}


.footer-top{
    width:80%;
    border-radius: 20px;
    margin-left: 10%;
    margin-top: 20px;
   font-size: 30px;
    text-align: center;
    background:linear-gradient(blue,white)
}





.footer-bottom{

    width:100%;
   text-align: center;
    padding: 10px;
}

.footer-end{
 
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content:   space-around;
}

.profile{
    background:linear-gradient(360deg, rgb(111, 76, 76),black);
  font-size: 20px;
 padding-left: 20px;
 padding-right: 20px;
 border: none;
}



@keyframes  anim-cont {
    
    50%{

        opacity:0.2;
  transform:translatey(-100%);
    }

    75%{
        opacity:0.4;
        transform:translatey(-100%);

    }

    to{
        opacity: 1;
  transform:translateY(0%);
    }
}

button{

    padding:20px;
    background-color: blueviolet;
    border:none;
}

button:hover{
    transform: scale(1.1,1.1);
    background-color:rgb(241, 45, 10);
}

.home-slid{
    animation-name:anim-cont ;
    animation-duration: 2s;
    height:30%;
    width: 100%;
    background-color: black;
}

p{
    font-size: 20px;
    
}