@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;600;700&display=swap');
:root {   
--Purple50 : hsl(260, 100%, 95%);
--Purple300: hsl(264, 82%, 80%);
--Purple500: hsl(263, 55%, 52%);
--White: hsl(0, 0%, 100%);
--Grey100: hsl(214, 17%, 92%);
--Grey200: hsl(0, 0%, 81%);
--Grey400: hsl(224, 10%, 45%);
--Grey500: hsl(217, 19%, 35%);
--DarkBlue: hsl(219, 29%, 14%);
--Black: hsl(0, 0%, 7%);
}
body {
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.fs-7 {
  font-size: 0.65rem;
}
.fw-sb{
    font-weight: 500;
}
.fw-mb{
    font-weight: 600;
}

.card1{
    color: var(--Grey100);
    background-color: var(--Purple500);
    
}


.card2{
    
    color: var(--White);
    background-color: var(--Grey400);
}
.card3{
    color: var(--Grey500);
}
.card4{
    background-color: var(--DarkBlue);
    color: var(--Grey100);
}
.attribution{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bg-pattern{
    position: absolute;
    z-index: 0;
    top: 2px;
    right: 20px;
    opacity: 75%;
    
}