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

body {
    font-family : 'Design-Fonts', sans-serif;
    font-size : 0.825rem; /* 14px */
    font-weight: 400;
}

.no-bullets{
    list-style-type: none;
}

a{
    text-decoration: none;
    color : var(--white);
}

p{
    font-size: 1em;
}

/** Styles to center the card component on the screen  */
.body-container{
    display : grid;
    place-items : center;
    height: 100vh;
    background : var(--background-black);
    color : var(--white);
    
    position : relative;
}


/** Styles for the card begins  */
.card{
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    
    background : var(--card-black);
    border-radius : 0.625rem;
    /*width :28%;*/
}

.card >  *{
    margin : 0.4rem 1.5rem;
}

.card > img{
    margin-top : 2rem;
    width : 5rem;
    border-radius: 50%;
}

.card>:nth-child(4){
    margin-top :1.5rem;
    
}

.name-tag{
    font-size: 1.7em;
    font-weight: 600;
    margin-top: 1em;
    
}

.btn {
    background-color : var(--button-black);
    border-radius : 0.4rem;
    padding : 0.5rem 1.5rem;
    margin : 1rem;
    font-weight : 600;
    justify-content: center;
    align-items : center;
    text-align : center;
    transition: all 0.3s ease-in;
}


.btn:hover{
    background-color: var(--lime-green);
    color: var(--button-black);
    cursor: pointer;
}
.btn:hover a{
    color: var(--button-black);
}

.btn:focus{
    outline : 0.125rem solid var(--lime-green);
    box-shadow: 3px 0.25rem 3px rgba(255,255,255, 0.8),
        3px 0.2rem 2px rgba(255,255,255, 0.9);
}

.btn-long{
    padding : 0.8rem 5rem;
}

.location-tag{
    color : var(--lime-green);
    font-weight : 600;
}


.attribution {
    position : absolute;
    bottom : 0.9rem;
}


@media(max-width : 375px){
    .card{
        width: 90%;
        min-width: 300 px;
    }

    ul{
        width:95%;
    }
    .card > img{
        width : 3.5rem;
        margin-top: 1rem;
    }

    .btn-long{
        padding : 0.5rem 3.75rem;
        font-size: 0.8em;
    }

    p{
        font-size: 0.8em;
        text-align: center;
    }

    .name-tag{
        font-size : 1.4em;
    }



}