:root{
    --Blue: hsl(246, 80%, 60%);
    --work: hsl(15, 100%, 70%);
    --play: hsl(195, 74%, 62%);
    --study: hsl(348, 100%, 68%);
    --exercise: hsl(145, 58%, 55%);
    --social: hsl(264, 64%, 52%);
    --self_care: hsl(43, 84%, 65%);

    /* neutrals */
    --neutral_one: hsl(226, 43%, 10%);
    --neutral_two: hsl(235, 46%, 20%);
    --neutral_three: hsl(235, 45%, 61%);
    --neutral_four: hsl(236, 100%, 87%);
    --neutral_white: white;

    /* header colors */
    --color1: rgb(241, 227, 203);
    --color2: rgb(249, 179, 132);
    --color3: rgb(202, 81, 22);
    --color4: rgb(88, 28, 12);

    --colorBlack: rgb(0, 0, 0);
    --colorWithe: white;
    --colorGray: gray;
}

*{
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

#container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 85vh 30px;
    gap: 1em;
}

body{
    font-size: 18px;
    background-color: var(--neutral_one);
}

/* cont */

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

.elipsis{
    height: 5px;

    margin-right: 20px;

    cursor: pointer;
}

h2{
    color: var(--neutral_white);
    font-size: 13px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 25px;
}

.hours{/* tiene display flex */
    color: var(--colorWithe);
    width: 100%;

    font-size: 35px;
    margin-left: 20px;
    margin-bottom: 10px;
}
.previ{/* tiene display flex */
    color: var(--neutral_four);
    width: 100%;

    font-size: 11px;
    margin-left: 20px;
}

#svg-work{
    width: 50px;
    height: 50px;
}
#work-img{
    background-color: var(--work);
}

/* main code */

main{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

#component-main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1em;

    margin-top: 9em;
    width: 740px;
    height: 300px;
}

/* organizador */
#jeremy{
    background-color: var(--neutral_two);
    border-radius: 10px;

    grid-row: 1 / 3;
}
#data-jeremy{
    background-color: var(--Blue);
    border-radius: 10px;
    height: 65%;
}

#work, #play, #study, #exercise, #social, #self_care{
    background-color: var(--neutral_two);
    border-radius: 10px;
    height: 150px;
    margin-top: 0px;
}


/* #work:hover, #play:hover, #study:hover, #exercise:hover, #social:hover, #self_care:hover{
    background-color: var(--neutral_three);
    cursor: pointer;
} */


/* other */
.attribution { 
    font-size: 11px; text-align: center; 
    width: 100%;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.attribution a { 
    color: hsl(228, 45%, 44%); 
}

/* images */

#avatar {
    width: 50px;
    height: 50px;

    border: 1px solid var(--neutral_white);
    border-radius: 50%;

    margin: 20px;
}

.img-config{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    height: 35px;
}

#work-img{
    background-color: var(--work);
}
#play-img{
    background-color: var(--play);
}
#study-img{
    background-color: var(--study);
}
#exercise-img{
    background-color: var(--exercise);
}
#social-img{
    background-color: var(--social);
}
#self-care-img{
    background-color: var(--self_care);
}

.img{
    transform: translate(-0.5em, -0.5em);
    height: 50px;
    width: 50px;
}


/* text */

#report{
    font-size: 10px;
    color: hsl(246, 80%, 90%);

    margin-left: 20px;
}

#name{
    color: var(--neutral_white);
    font-weight: 400;
    font-size: 27px;

    margin-left: 20px;
}

#list{
    list-style: none;
    color: var(--neutral_three);
    font-size: 15px;
    cursor: pointer;
}
#list li:hover{
    color: var(--neutral_white);
}
#list li{
    margin-left: 20px;
    margin-top: 13px;
}

/* data */

.daily, .weekly, .monthly{
    color: var(--neutral_white);
    flex-flow: row wrap;
}

/* footer*/
.attribution{
    color: var(--neutral_white);
    font-size: 15px;
}
.attribution a{
    color: rgb(0, 153, 255);
}

/* media */
@media (max-width:999px) {
    #component-main{
        grid-template-columns: auto;
        grid-template-rows: auto;
        width: auto;
    }

    #data-jeremy{
        height: auto;
    }

    .attribution{
        display: none;
    }
}