@font-face {
    font-family: inter;
    src: url(/assets/fonts/Inter-VariableFont_slnt\,wght.ttf) format("ttf");
 }
 
 
 
 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: inter;
 }

 ul{
  list-style-type: none;  
 }

 img{
    border-radius: 50%;
    display: block;
    margin-inline: auto;
    margin-bottom: 1.3rem;
 }
 body{
background-color:hsl(0,0%,8%);
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;


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

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

 .container h1 span{
    color:hsl(75,94%,57%);
    display: block;
    font-size: 1 rem;
    margin:0.5rem 0 1 rem;



 }

 .container p{
    color:white;
    text-align: center;
 }

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

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

 }
 
  .container ul li button:hover{
    background-color: hsl(75,94%,57%);
    color:hsl(0, 0%, 10%)
  }
 
 
 
 
 
 
 
 
 
 
 
 
 .attribution {
     font-size: 11px;
     text-align: center;
     color:white;
     margin-top: 1rem;
 }


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