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

* {
  /* border: size-border type-border color-border         */
    /* border: 1px solid white; */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/*variales*/
:root {

    /* Colors */

    /* Primary */

    --Blue: hsl(246, 80%, 60%);
    --Light-orange: hsl(15, 100%, 70%); /* (work) */
    --Soft-blue: hsl(195, 74%, 62%); /* (play) */
    --Light-red: hsl(348, 100%, 68%); /* (study) */
    --Lime-green: hsl(145, 58%, 55%); /* (exercise) */
    --Violet: hsl(264, 64%, 52%); /* (social) */
    --Soft-orange: hsl(43, 84%, 65%); /* (self care) */

     /* Neutral */

    --Very-dark-blue: hsl(226, 43%, 10%); 
    --Dark-blue: hsl(235, 46%, 20%); 
    --Desaturated-blue: hsl(235, 45%, 61%); 
    --Pale-Blue: hsl(236, 100%, 87%); 
    --White: hsl(0, 0%, 100%);

}

body {
    background-color: var(--Very-dark-blue);
    color: var(--Pale-Blue);    
    font-family: 'Rubik', sans-serif;
}

.main-container {
    width: 328px;
    margin: 80px auto;    
}

.first-section {
    position: relative;
}

.main-card {
        
}

.main-card__user {
    background-color: var(--Blue);
    display: flex; 
    border-radius: 16px;      
    padding: 30px;
    position: absolute;    
    width: 100%;
    z-index: 1;
}

.main-card__image {
    width: 72px;
    margin-right: 10px;
    border: 3px solid var(--White);
    border-radius: 50%;
}

.main-card__title {
    font-size: 0.9em;
    margin: 10px 0 4px;
}

.main-card__name {
    font-size: 1.5em;
    font-weight: 300;
    color: var(--White);
}

.main-card__dates {
    background-color: var(--Dark-blue);
    border-radius: 16px;    
    display: flex;
    justify-content: space-around;    
    height: 100px;
    padding-top: 52px;
    font-size: 1.2em;
    position: absolute;    
    width: 100%;
    top: 110px;    
}

.main-card__frequency:hover {
    cursor: pointer;
    color: var(--White);
}

.second-section {
    padding-top: 235px;
}

.card {
    /* padding-top: 20px; */
    position: relative;
    margin-bottom: 105px;
}

.card__background {
    background-color: var(--Light-orange);
    height: 80px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.card__image {
    margin-top: -10px;
    padding-left: 235px        
}

.card__details {
    background-color: var(--Dark-blue);
    display: flex;
    flex-direction: column;
    height: 122px;
    justify-content: space-between;
    padding: 25px;
    border-radius: 16px;
    position: absolute;
    width: 100%;
    bottom: -86px;
}

.card__details:hover {
    background-color: var(--Desaturated-blue);
    cursor: pointer;
}

.card__activity, .card__time{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__title {
    color: var(--White);
    font-size: 1.2em;    
    font-weight: 500;
}

.card__hours {
    font-size: 2em;
    font-weight: 300;
    color: var(--White);
}

.attribution {
    font-size: 18px;
    text-align: center;
    padding: 20px;
    margin-bottom: 60px;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width: 1200px) {

    .main-container {
        width: 1150px;
        display: flex;        
    }

    .first-section {
        width: 280px;
        height: 564px;
        padding-top: 24px;
    }
    .second-section {
        height: 564px;
        width: 860px;
        padding: 24px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);        
    }

    .main-card__user {
        height: 350px;
        flex-direction: column;
    }

    .main-card__image {
        width: 85px;
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .main-card__title {
        font-size: 1em;
    }

    .main-card__name {
        font-size: 2.4em;
    }

    .main-card__dates {
        margin-top: 228px;
        height: 200px;
        flex-direction: column;
        padding: 40px 32px 18px;
    }

    .card {
        width: 240px;
        height: 244px;
        margin-bottom: 25px;        
    }

    .card__image {        
        padding-left: 140px;
    }

    .card__details{
        height: 200px;
        bottom: 0px;
    }

    .card__time{
        height: 300px;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }

    .card__hours {
        font-size: 3em;
    }
}