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

:root {
    /* || COLORS || */
    --clr-primary-400: hsl(246, 80%, 60%);
    --clr-primary-900: hsl(226, 43%, 10%);
    --clr-primary-800: hsl(235, 46%, 20%);
    --clr-primary-500: hsl(235, 45%, 61%);
    --clr-primary-200: hsl(236, 100%, 87%);
    --clr-primary-100: hsl(0, 0%, 100%);


    --clr-card-header-work: hsl(15, 100%, 70%);
    --clr-card-header-play: hsl(195, 74%, 62%);
    --clr-card-header-study: hsl(348, 100%, 68%);
    --clr-card-header-excersie: hsl(145, 58%, 55%);
    --clr-card-header-social: hsl(264, 64%, 52%);
    --clr-card-header-self-care: hsl(43, 84%, 65%);

    /* || FONTS || */
    --ff-primary: 'Rubik', sans-serif;

    /* || FONT-SIZE || */
    --fs-300: 0.9375rem;
    --fs-400: 1.125rem;
    --fs-600: 1.5rem;
    --fs-700: 2rem;

    /* || FONT-WEIGHT || */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;

    /* || OTHERS || */
    --border-radius: 1rem;
    --padding-main: 1.5rem;

}

/* || UTILITIES || */
.bg-primary-400 {
    background-color: var(--clr-primary-400);
}

.bg-card-800 {
    background-color: var(--clr-primary-800);
}

.bg-card-header-work {
    background-color: var(--clr-card-header-work);
    background-image: url("../images/icon-work.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.bg-card-header-play {
    background-color: var(--clr-card-header-play);
    background-image: url("../images/icon-play.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.bg-card-header-study {
    background-color: var(--clr-card-header-study);
    background-image: url("../images/icon-study.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.bg-card-header-excersie {
    background-color: var(--clr-card-header-excersie);
    background-image: url("../images/icon-exercise.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.bg-card-header-social {
    background-color: var(--clr-card-header-social);
    background-image: url("../images/icon-social.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.bg-card-header-self-care {
    background-color: var(--clr-card-header-self-care);
    background-image: url("../images/icon-self-care.svg");
    background-repeat: no-repeat;
    background-position: top right;
}

.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-600 {
    font-size: var(--fs-600);
}

body {
    background-color: var(--clr-primary-900);
    color: var(--clr-primary-100);
    min-height: 100vh;
    font-family: var(--ff-primary);
}

main {
    justify-content: center;
    display: grid;
}

a {
    text-decoration: none;
    color: var(--clr-primary-500);
}

a:hover, a.activated {
    color: var(--clr-primary-100);
}

/* || CARD || */
.card {
    display: grid;
    border-radius: var(--border-radius);
}

.card-top {
    min-height: 2.875rem;
}

.card-bottom {
    background-color: var(--clr-primary-800);
    border-radius: var(--border-radius);
    padding: 30px 20px;
}

.card-bottom-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    .card-type {
        font-weight: var(--fw-medium);
    }
}

.card-bottom-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .current-hours {
        font-size: var(--fs-700);
        font-weight: var(--fw-light);
    }

    .previous-hours {
        font-size: var(--fs-300);
        color: var(--clr-primary-200)
    }
}

/** Text size */
.card h2 {
    font-size: var(--fs-400);
}

.card h3 {
    font-size: var(--fs-700);
}

.card p {
    font-size: var(--fs-300);
}

.container {
    grid-template-columns: 1fr;
    grid-template-rows: auto min-content;
    gap: 1.5rem;
    margin-inline: auto;
    display: grid;
    padding: 60px 0;
}

/** Main card */
.profile__card {
    border-radius: var(--border-radius);
}

.profile__top {
    border-radius: var(--border-radius);
    height: 120px;
    align-content: center;

    .top-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-inline: 20px;
        align-items: center;
        gap: 10px;
        img {
            width: 78px;
            aspect-ratio: 1/1;
            border: 3px solid var(--clr-primary-100);
            border-radius: 50%;
        }
    }
}

.profile__bottom {
    padding: var(--padding-main);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* || BUTTON || */
.button {
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
    position: relative;
}

.button .dots {
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 8px;
}

.button::before,
.button::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background-color: var(--clr-primary-100);
    border-radius: 50%;
    position: absolute;
}

.button::before {
    top: 6px;
    left: 0;
}

.button::after {
    top: 6px;
    right: 0;
}

/* ||MEDIA QUERIES || */
@media screen and (min-width: 594px) {
    .container {
        width: calc(100% - 10rem * 2);
        grid-template-columns: repeat(4, 1fr);
    }

    .profile__card {
        grid-area: 1 / 1 / 3 / 2;
        .profile__top {
            height: 315px;
        }
        .profile__bottom {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    }
    .card-bottom-container {
        align-items: initial;
        flex-direction: column;
    }
}