@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



:root {
    --spacing-0: 0px;
    --spacing-100: 8px;
    --spacing-200: 16px;
    --spacing-300: 24px;
    --spacing-400: 32px;
    --spacing-500: 40px;

    --purple-600: hsl(246, 80%, 60%);

    --orange-300: hsl(15, 100%, 70%);
    --blue-300: hsl(195, 74%, 62%);
    --pink-400: hsl(348, 100%, 68%);
    --green-400: hsl(145, 58%, 55%);
    --purple-700: hsl(264, 64%, 52%);
    --yellow-300: hsl(43, 84%, 65%);

    --navy-950: hsl(226, 43%, 10%);
    --navy-900: hsl(235, 46%, 20%);
    --navy-800: #33397A;
    --Purple-500: hsl(235, 45%, 61%);
    --navy-200: hsl(236, 100%, 87%);

    --radius: 15px;
    /* - Weights: 300, 400, 500 */
    /* 18px (card titles e.g. Work, Play)*/
}


body {
    font-family: "Rubik", sans-serif;
    letter-spacing: 0px;
    font-weight: 300;
    height: 100vh;
    align-content: center;
    background-color: var(--navy-950);
    color: #fff;
    padding: 80px 0;
}

img {
    display: block;
    width: 21px;
    height: 5px;
}

/* mobile, tablet, desktop */
.text-present-5-medium {
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
}

.text-present-5-regular {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
    color: var(--navy-200);
}

.text-present-6 {
    font-size: 15px;
    line-height: 18px;
    color: var(--navy-200);
    font-weight: 400;
}



/* mobile */
.text-present-title {
    font-size: 32px;
    line-height: 38px;
    font-weight: 300;
}

/* mobile, tablet */
.text-present-subtitle {
    font-size: 24px;
    line-height: 28px;
    font-weight: 300;
}


.wrapper {
    width: 327px;
    margin-inline: auto;
}

.name {
    border-radius: var(--radius);
    background-color: var(--navy-900);
    height: 203px;
}

.name__container {
    background-color: var(--purple-600);
    border-radius: var(--radius);
    padding: var(--spacing-400);
    display: flex;
    gap: var(--spacing-300);
    align-items: center;
}

.name__img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
}


.name__format {
    padding: var(--spacing-300);
    display: flex;
    justify-content: space-between;
}

.over {
    cursor: pointer;
}

.over:hover {
    color: #fff;
}


.activities { /* recuerda eliminar el margin-t9pdesktop*/
    margin-top: var(--spacing-300);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.activity {
    position: relative;
    background-repeat: no-repeat;
    background-position: top right;
    width: 100%;
    height: 160px;
    border-radius: var(--radius);
}

.activity__container {
    border-radius: var(--radius);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 122px;
    padding: var(--spacing-300);
    background-color: var(--navy-900);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    cursor: pointer;
}

.activity__container:hover {
    background-color: var(--navy-800);
}

.part-up {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ellipsis:hover path {
    fill: #fff;
}

.part-down {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38px;
}

.work {
    background-color: var(--orange-300);
    background-image: url('../images/icon-work.svg');
}

.play {
    background-color: var(--blue-300);
    background-image: url('../images/icon-play.svg');
}

.study {
    background-color: var(--pink-400);
    background-image: url('../images/icon-study.svg');
}

.exercise {
    background-color: var(--green-400);
    background-image: url('../images/icon-exercise.svg');
    
}

.social {
    background-color: var(--purple-700);
    background-image: url('../images/icon-social.svg');
    
}

.self-care {
    background-color: var(--yellow-300);
    background-image: url('../images/icon-self-care.svg');

}


/* -------------------------------------------> */
.selection {
    color: #fff;
}



@media screen and (min-width: 768px) {
    body {
        padding: 0;
    }
    .wrapper {
        width: 615px;
    }

    .text-present-title {
        font-size: 56px;
        line-height: 66px;
    }

    .name__format {
        justify-content: space-evenly;
    }

    .activities {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .activity {
        width: 188px;
        height: 213px;
    }

    .activity__container {
        height: 180px;
        gap: var(--spacing-200);
    }
    
    .part-down {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 92px;
    }
}

@media screen and (min-width: 1024px) {
    .wrapper {
        width: fit-content;
        height: auto;
        display: flex;
        gap: var(--spacing-400);
    }

    .name__container {
        flex-direction: column;
        align-items: flex-start;
        height: 354px;
        gap: var(--spacing-500);
    }

    .name__img {
        width: 78px;
        height: 78px;
    }

    .name__format {
        margin-top: var(--spacing-400);
        margin-left: var(--spacing-400);
        padding: 0;
        width: fit-content;
        height: 106px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .name {
        width: 255px;
        height: auto;
    }

    .activities {
        margin-top: 0;
        width: 830px;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 255px);
        grid-template-rows: repeat(2, 244px);
        gap: var(--spacing-400);
    }

    .activity {
        width: auto;
        height: auto;
    }

    .activity__container {
        height: 200px;
        padding: var(--spacing-400);
        gap: var(--spacing-400);
    }

    .text-present-subtitle {
        font-size: 40px;
        line-height: 47px;
        
    }

    .part-down {
        gap: var(--spacing-100);
    }
}