@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');

* {
    font-family: 'Rubik', sans-serif;
}

body {
    background-color: hsl(226, 43%, 10%);
    color: hsl(235, 45%, 61%);
}

.profile {
    background-color: hsl(246, 80%, 60%);
}

.report {
    color: hsl(236, 100%, 87%);
}

.card-bg {
    background-color: hsl(235, 46%, 20%);
}

.card-bg:hover {
    background-color: hsl(235, 46%, 25%);
    transition: 0.6s;
    /* cursor: pointer; */
}

.work {
    background-color: hsl(15, 100%, 70%);
}

.play {
    background-color: hsl(195, 74%, 62%);
}

.study {
    background-color: hsl(348, 100%, 68%);
}

.exercise {
    background-color: hsl(145, 58%, 55%);
}

.social {
    background-color: hsl(264, 64%, 52%);
}

.self-care {
    background-color: hsl(43, 84%, 65%);
}