@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(226, 43%, 10%);
    font-family: 'Rubik', sans-serif;
}

/* Container */
.container {
    gap: 30px;
    width: 1130px;
    height: 520px;
    display: flex;
}

.container-profile {
    width: 255px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: hsl(235, 46%, 20%);
    border-radius: 0px 0px 1rem 1rem;
}

.profile {
    width: 100%;
    height: 360px;
    display: flex;
    padding: 32px;
    flex-direction: column;
    border: 1px solid transparent;
    border-radius: 1rem; 
    background-color: hsl(246, 80%, 60%);
}

.profile img {
    width: 78px;
    height: 78px;
    object-fit: cover;
    cursor: pointer;
    border: 3.5px solid #ffffff;
    border-radius: 50%;
    margin: 0px 0px 40px;
}

.name {
    width: 100%;
    height: auto;
}

.name span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: start;
}

.name h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 300;
    text-align: start;
    margin: 5px 0px 0px;
}

.description-profile {
    width: 100%;
    height: 160px;
    padding: 32px;
    border: 1px solid transparent;
}

.description-profile ul {
    gap: 20px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
}

.description-profile ul li {
    list-style: none;
    transition: .3s ease;
}

.description-profile ul li a {
    color: hsl(236, 100%, 87%);
    font-size: 16px;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    transition: .3s ease;
}

.description-profile ul li:hover {
    color: #ffffff;
    transform: translateX(10px);
}

.description-profile ul li a:hover {
    color: #ffffff;
}

/* Container - Cards */
.container-times {
    gap: 28px;
    width: 855px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: 255px;
    height: 245px;
    border: 1px solid transparent;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: hsl(235, 46%, 20%);
    transition: .3s ease;
}

.work {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(15, 100%, 70%);
}

.play {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(195, 74%, 62%);
}

.study {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(348, 100%, 68%);
}

.exercise {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(145, 58%, 55%);
}

.social {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(264, 64%, 52%);
}

.self {
    width: 100%;
    height: 47.16px;
    border: 1px solid transparent;
    background-color: hsl(43, 84%, 65%);
}

.header-work {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-work.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.header-play {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-play.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.header-study {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-study.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.header-exercise {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-exercise.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.header-social {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-social.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.header-self {
    width: 239px;
    height: auto;
    background-image: url(../images/icon-self-care.svg);
    background-repeat: no-repeat;
    background-position: right 0 top -10px;
    min-height: 2.875rem;
    margin-right: 1rem;
}

.description-card {
    gap: 1.5rem;
    width: 100%;
    height: auto;
    padding: 32px;
    display: flex;
    border: 1px solid transparent;
    flex-direction: column;
}

.description-card .title-description {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.description-card .title-description p {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-align: start;
}

.description-card .title-description .points {
    gap: 5px;
    width: auto;
    height: auto;
    display: flex;
    cursor: pointer;
}

.description-card .title-description .points .point {
    width: 4px;
    height: 4px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: #ffffff;
}

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

.time h3 {
    color: #ffffff;
    font-size: 53px;
    font-weight: 400;
    text-align: start;
    margin: 0px 0px 10px;
}

.time p {
    color: hsl(236, 100%, 87%);
    font-size: 15px;
    font-weight: 600;
    text-align: start;
}