.header{

    text-decoration:none;
    display:inline;
    transform: scale(3, 2.3);
    transition: transform .2s;
}

a{

    text-decoration:none;
    color:black;

}
input{
all: unset;
border: none;
background: none;
box-shadow: none;
outline: none;
    text-decoration: none;
width:80%;
display: flex;
justify-content: center;

}
.shape{
  
width:80%;
height:10%;
display: flex;
justify-content: center;
background-color: gray;
border-radius:50px ;
margin-right: auto;
margin-left:25px;
margin-top:-50px;
position: absolute;
left: 50%; 

transform: translate(-50%, -50%);
}
.image-div img{

display:block;


}

.image-div {
margin-bottom: 0px;


}

.container-image{
display: flex;
justify-content: center;
transform: scale(1.5, 1.5);
margin-top:300px;

    margin-left:60px;
        

}


li{
list-style-type: none;

}
.div-header{
background-color:white;
margin-left:0px;
margin-right:0px;
margin-top:0px;
padding:15px;
height:20px;
}

.li-header{
    width:auto;
    position: absolute;
right: 10%;

}

.li-header ul{

    cursor:pointer;
    transform: scale(0.9);
}

html,body{
margin:0px;
    background-color:rgb(205, 205, 205);
    font-size: large;
    max-width:100%;
    overflow-x: hidden;
}

.menu-icon{
display:inline;
position:absolute;

top:-8px;
left:35px;

}

.menu-icon:hover{

    cursor:pointer;
    
}

.post:hover{

    cursor:pointer;
    transform: scale(0.9);
}

.cat:hover{

 cursor:pointer;
    transform: scale(0.9);
}

.cat{

    border:5px solid black;
}

.cat:nth-child(1){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(255, 255, 255);
border-radius: 10px;
padding:5px;
}

.cat:nth-child(2){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(58, 71, 244);
border-radius: 10px;
padding:5px;
}
.cat:nth-child(3){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: bisque;
border-radius: 10px;
padding:5px;
}
.cat:nth-child(4){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(46, 167, 39);
border-radius: 10px;
padding:5px;
}
.cat:nth-child(5){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(234, 28, 69);
border-radius: 10px;
padding:5px;
}
.cat:nth-child(6){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(197, 112, 9);
border-radius: 10px;
padding:5px;
}
.cat:nth-child(7){
 box-shadow: 0px 10px 20px rgba(1, 1, 1, 1);
     background-color: rgb(200, 22, 22);
border-radius: 10px;
padding:5px;
}

.header:hover{
cursor:pointer;
    transform: scale(0.9);

}
.container{
display: flex;
flex-wrap: wrap;

background-color: white;
width:fit-content;
margin-left: auto;
margin-right: auto;

border-radius: 10px;
max-width: 870px;   
}

.cover{
width:250px;
height:250px;
background-color: rgb(5, 25, 254);

}


.post{
width:250px;
height:500px;
box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3);
margin:10px;
padding:10px;
border-radius: 10px;
}

p span{
    background-color: aliceblue;
    border-radius: 50px;
    padding:7px;
}

.carousel {
position: absolute;
    margin:100px auto;
    width:100%;
    
    display:flex;
    overflow-x:auto;
    
}

.carousel::-webkit-scrollbar{

    display:none;
}

.group{
display:flex;
align-items: center;
justify-content:center;
gap:1em;
animation:spin 50s infinite linear;
padding-right:1em;
}
.card{

    height: 5em;
  
    
    font-size: 3rem;
    border-radius: .2em;
    text-align:center;
    align-content:center; 
    flex: 0 0 5em;
}

@keyframes spin{
from {translate:0;}
to {translate: -100%;}

}

.card img{

    border-radius: 5px;
}