*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: Inter;
}

@font-face {
    font-family:Inter ;
    src: url(/assets/fonts/static/Inter-Regular.ttf) format("ttf");
}


body{

    background-color: hsl(0,0%,8%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

ul {
    list-style-type: none;
}
.container{
    background-color: hsl(0,0%,12%);
    max-width: 400px;
    width: 100%;
    padding: 24px;
    border-radius: 10px;

}

.container p{
    color:#ffff;
    text-align:center;
}
.container h1 span {
    color:hsl(75,94%,57%);
    display:block;
    font-size: 1rem;
    margin:0.5rem 0 1rem; 
}

.container ul {
    display: grid;
    gap:0.5rem;
    margin-top:2rem;
}


.container h1 {
    font-size:1.5rem;
    color:#ffff;
    text-align:center;
}

.container img  {
    width:80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin-inline: auto;
    margin-bottom: 1.25rem;
}

.attribution {
    font-size: 13px;
    text-align: center;
    color:#fff;
    margin-top:1rem;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

.container ul li button:hover {
    background-color: hsl(75,94%,57%);
    color:hsl(0,0%,8%);
}

.container ul li button {
    width:100%;
    padding: 1rem;
    background-color: hsl(0, 0%, 18%);
    font-size:1rem;
    font-weight: bold;
    border:none;
    border-radius: 0.5rem;
    outline:none;
    color:#ffff;
    cursor:pointer;
    transition:all 0.15s ease-in-out;
}