@font-face{
    font-family: inter-bold;
    src:url(assets/fonts/static/Inter-Bold.ttf)
}
@font-face {
    font-family: inter-regular;
    src: url(assets/fonts/static/Inter-Regular.ttf);
}
@font-face {
    font-family: inter-semibold;
    src: url(assets/fonts/static/Inter-SemiBold.ttf);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size:14px ;
    min-height: 100vh;
    background-color: hsl(0, 0%, 8%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin:4px;

}
.container{
    width:100%;
    background-color: hsl(0, 0%, 12%);
    max-height: 800px;
    /* height:650px; */
    border-radius: 12px;
    
}
.card{
    padding:16px;
}
.card img{
    border-radius: 50%;
    margin:0 auto;
}
.flex-container{
    display:flex;
    flex-direction: column;
    width:200px;
}
.flex-item {
    background-color: hsl(0, 0%, 20%);
    color:hsl(0, 0%, 100%);
    text-align: center;
    padding:4px;
    margin:8px;
    border-radius: 4px;
    font-family: inter-semibold;
    font-size: 12px;
}
.header{
    text-align: center;
    color: hsl(0, 0%, 100%);
    line-height: 20px;
    font-family: inter-bold;
}
.header p{
    color:hsl(75, 94%, 57%);
    font-size: 8px;
}

.card_text{
    font-family: inter-regular;
    text-align: center;
    color: hsl(0, 0%, 100%);
    margin-top: 10px;
    font-size: 8px;
}
.img_container{
    display: flex;
    height:48px;
    margin:8px;
}
.flex-item:hover{
    cursor: pointer;
    background-color: hsl(75, 94%, 57%);
    color: black;
}

/* @media screen and (max-width:768px) {
    .container{
        margin: 0 5%;
    }
    
} */