@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');

body{
    background-color: hsl(233, 47%, 7%);
    font-size: 15px;
}
.stats-card{
    background-color: hsl(244, 38%, 16%);
    border-radius: 10px;
    max-height: 70%;
    height: auto;
    width: 80%;
    margin: auto;
    margin-top: 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr 2fr;
}
.stats-data{
    color: hsl(0, 0%, 100%);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 25px;
}
.heading{
    color: hsl(0, 0%, 100%);
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    padding: 12% 15% 0% 15%;
}
.paragraph{
    color: hsla(0, 0%, 100%, 0.6) ;
    font-family: 'Lexend Deca', sans-serif;
    text-align: left;
    padding: 4% 15% 0% 15%;
}
.stats-head{
    display: inline;
    color: hsla(0, 0%, 100%, 0.6) ;
    font-family: 'Inter', sans-serif;
}
.violet-text{
    color: hsl(277, 64%, 61%);
    display: inline;
}
.stat-image{
    background-image: url(images/image-header-desktop.jpg);
    background-size: cover;
    grid-row: span 3;
    border-radius: 0px 10px 10px 0px;
}
.statistics{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    padding: 10% 10% 0% 15%;
}
.violet-accent{
    background-color: hsla(277, 84%, 47%, 0.5);
    height: 100%;
    width: 100%;
    border-radius: inherit;
}
.attribution{
    position: fixed;
    right: 0%;
    bottom: 0%;
}