:root {
  --background: hsl(85, 79%, 96%);
  --links:hsl(339,53%,93%);
  --card: hsl(338, 86%, 85%);
  --color:  hsl(343, 56%, 50%);
  --hover: hsl(336, 91%, 61%);
}
@font-face {
    font-family:Inter ;
    src: url(assets/fonts/Inter-VariableFont_slnt\,wght.ttf);
    font-weight: 100 900;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family:'Inter',Verdana, Geneva, Tahoma, sans-serif;
    font-size: clamp(1.5rem,2vw+1rem,1.75rem);
    background-color: var(--background);
    color: var(--color);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    main{
        margin: 10%;
        background-color: var(--card);
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        max-width: 500px;
    }   
        .card__user img{
            margin-top: 2rem;
            max-width: 100px;
            border-radius: 50%;
        }

        .card__text p{
        text-align: center;
        margin-bottom: 0.5rem;
        }
        .card__text p:last-child{margin-top: 1.5rem; margin-bottom: 0;}
            .card__text .name{
            font-size:1.5rem;
            font-weight: 700;
            }
            .card__text .location{
            font-size:1rem; 
            color: var(--hover); 
            font-weight: 600;}

        .card__links{
            margin: 1.5rem 0;
            width: 100%;
            max-width: 400px;
            text-align: center;
        }   
            .card__links ul{
                margin:1rem;
                list-style: none;
            }
                    .card__links ul li a {
                    display: block;
                    background-color: var(--links);
                    border-radius: 5px;
                    margin: 1.5rem 0;
                    padding: 1rem;
                    text-decoration: none;
                    color: var(--color);
                    transition: background-color 0.3s ease;
                    }

                    .card__links ul li a:hover {
                    background-color: var(--hover);
                    color: var(--background);
                    }

    footer .attribution{ 
        font-size: 1rem; 
        text-align: center;
        color: black;
    }
        footer .attribution a
        { 
            color:var(--color); 
            text-decoration: none; 
        }
        footer .attribution a:hover{ 
            text-decoration: underline; 
        }