:root {
    /* ### Primary */
    --clr-purple-600: hsl(246, 80%, 60%);
    --clr-orange-300: hsl(15, 100%, 70%);
    --clr-blue-300: hsl(195, 74%, 62%);
    --clr-pink-400: hsl(348, 100%, 68%);
    --clr-green-400: hsl(145, 58%, 55%);
    --clr-purple-700: hsl(264, 64%, 52%);
    --clr-yellow-300: hsl(43, 84%, 65%);

    /*  ### Neutral  */
    --clr-navy-950: hsl(226, 43%, 10%);
    --clr-navy-900: hsl(235, 46%, 20%);
    --clr-purple-500: hsl(235, 45%, 61%);
    --clr-navy-200: hsl(236, 100%, 87%);
    --clr-primary-100: hsl(0, 0%, 100%);
}

*, *::before, *::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

body {
    margin: 1rem;
    background-color: var(--clr-navy-950);
    min-height: 100vh;
    font-family: "Rubik", sans-serif;
    color: var(--clr-primary-100);
}

.tck-page-wrapper {
    display: grid;
    gap: 1rem;
    padding: 0;
}


/* #####   Profile + Tabs   ######*/
.tck-profile-wrap {
    background-color: var(--clr-navy-900);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tck-info {
    background-color: var(--clr-purple-600);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.tck-img {
    max-width: 5rem;
    max-height: 5rem;
    border-radius: 50%;
    border: 0.15rem solid var(--clr-primary-100);
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.report {
    font-size: 0.95rem;
    font-weight: 300;
}

.profile-name {
    font-size: 1.35rem;
    font-weight: 300;
}

.tck-time-tabs {
    margin: 0;
    padding: 1rem 2rem 1.5rem;
    list-style: none;

    color: var(--clr-navy-200);

    display: flex;
    justify-content: space-between;
}


.tck-daily:hover,
.tck-weekly:hover,
.tck-monthly:hover {
    color: var(--clr-primary-100);
    cursor: pointer;
}


/* #####   Time Frames   ######*/

.tck-timeframe-wrap {
    display: grid;
    border-radius: 0.725rem;
    overflow: hidden;
    transition: transform 500ms ease;
}

.tck-timeframe-wrap:hover {
    transform: scale(1.03);
}

.tck-timeframe-wrap .tck-category-img,
.tck-timeframe-wrap .tck-tf-deatil {
    grid-area: 1/1;
}

.tck-category-img {
    display: flex;
    justify-content: end;
}

.tck-category-img img {
    max-width: 4rem;
    max-height: 4rem;
    margin-right: 1rem;
}


.tck-category-img.work {
    background-color: var(--clr-orange-300);
}

.tck-category-img.play {
    background-color: var(--clr-blue-300);
}


.tck-category-img.study {
    background-color: var(--clr-pink-400);
}

.tck-category-img.exercise {
    background-color: var(--clr-green-400);
}

.tck-category-img.social {
    background-color: var(--clr-purple-700);
}

.tck-category-img.care {
    background-color: var(--clr-yellow-300);
}

.tck-tf-deatil {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--clr-navy-900);
    border-radius: 0.725rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tck-tf-header {
    display: flex;
    justify-content: space-between;
}

.tck-category-title {
    font-size: 1.25rem;
}

.tck-tf-periods {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.tck-category-hrs {
    font-size: 2rem;
    font-weight: 300;
}

.tck-tf-header img {
    max-width: 1.5rem;
    max-height: 1.5rem;
    object-fit: contain;
}

.tck-category-last {
    font-size: 1rem;
    color: var(--clr-navy-200);
    font-weight: 100;
}

.active {
    color: var(--clr-primary-100);
}


@media(min-width:1024px) {

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tck-page-wrapper {
        grid-template-columns: repeat(4,1fr);
    }

    .tck-profile-wrap {
        grid-row: 1/3;
    }

    .tck-info {
        padding: 2rem 6rem  6rem 2rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .report {
        font-size: 1.2rem;
        font-weight: 200;
    }

    .profile-name {
        font-size: 2rem;
    }

    .tck-time-tabs {
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap:1rem;
    }

    .tck-tf-periods {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .tck-category-hrs {
        font-size: 4rem;
    }
}