@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* Mobile */
@media screen and (max-width: 73.0625em) {

    html,
    body {
        width: 100vw;
        margin: 0;
    }

    img {
        min-width: 0;
    }

    .container {
        padding: 20% 6%;
        box-sizing: border-box;
        background-color: hsl(226, 43%, 10%);
    }

    main {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    main>div {
        width: 100%;
    }

    .top {
        display: flex;
        flex-direction: column;
        height: 12rem;
        border-radius: 1rem;
        background-color: rgba(29, 32, 75, 255);
    }

    .top * {
        margin: 0;
    }

    .head {
        flex-basis: 60%;
        display: flex;
        padding: 0 8%;
        gap: 1.5rem;
        align-items: center;
        border-radius: 1rem;
        background-color: hsl(246, 80%, 60%);
        position: relative;
        z-index: 2;
    }

    .head>img {
        min-width: 0;
        aspect-ratio: 1;
        width: 20%;
        outline: 0.1875rem solid white;    /* was 3px */
        border-radius: 50%;
    }

    .name>p {
        color: hsl(236, 100%, 87%);
        font-weight: 500;
    }

    .name>h2 {
        font-family: "Rubik", sans-serif;
        font-weight: 300;
        color: hsl(236, 100%, 87%);
    }

    h1 {
        font-family: "Rubik", sans-serif;
        font-weight: 300;
    }

    .duration {
        display: flex;
        flex-basis: 40%;
        align-items: center;
        border-radius: 1rem;
        font-family: "Rubik", sans-serif;
        font-weight: 500;
        color: hsl(235, 45%, 61%);
        background-color: hsl(235, 46%, 20%);
        justify-content: space-around;
    }

    .duration>p:nth-of-type(2) {
        color: hsl(236, 100%, 87%);
    }

    /* 2nd phase */
    .data {
        height: 9rem;
        position: relative;
        overflow: hidden;
    }

    .bg {
        height: 100%;
        position: relative;
        border-radius: 1rem;
        background-color: hsl(15, 100%, 70%);
    }

    .bg>img {
        position: absolute;
        left: 70%;
        top: -10%;
    }

    .common {
        display: flex;
        gap: 0.4rem;
        flex-direction: column;
        justify-content: center;
        color: white;
        width: 100%;
        height: 76%;
        position: absolute;
        background-color: hsl(235, 46%, 20%);
        top: 25%;
        border-radius: 1rem;
        padding: 0 6%;
        box-sizing: border-box;
    }

    .common>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .common * {
        margin: 0;
    }

    .header {
        gap: 8rem;
    }

    .header>p {
        font-size: 1.125rem;   /* was 18px */
    }

    .console {
        background-color: hsl(195, 74%, 62%);
    }

    .book {
        background-color: hsl(348, 100%, 68%);
    }

    .jogging {
        background-color: hsl(145, 58%, 55%);
    }

    .chat {
        background-color: hsl(264, 64%, 52%);
    }

    .heart {
        background-color: hsl(43, 84%, 65%);
    }

    .console>img {
        top: -5%;
    }

    .book>img {
        top: -5%;
    }

    .jogging>img {
        top: -2%;
    }

    .heart>img {
        left: 73%;
    }
}

/* Desktop */
@media screen and (min-width: 73.0625em) {

    body,
    html {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100%;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: hsl(226, 43%, 10%);
    }

    main {
        display: grid;
        gap: 1.5rem;
        grid-template-rows: 12.5rem 12.5rem;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .top {
        grid-row: 1/3;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        border-radius:1rem;
        background-color: hsl(235, 46%, 20%);
    }

    .top * {
        margin: 0;
    }

    .head {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 10% 8%;
        flex-basis: 60%;
        background-color: hsl(246, 80%, 60%);
        border-radius: 1rem;
        position: relative;
        z-index: 1;
    }

    .head>img {
        aspect-ratio: 1;
        width: 40%;
        outline: 0.1875rem solid hsl(236, 100%, 87%);  /* was 3px */
        border-radius: 50%;
    }

    h2 {
        font-size: 2rem;
        line-height: 2.2rem;
        font-family: "Rubik", sans-serif;
        font-weight: 300;
        color: hsl(236, 100%, 87%);
    }

    .duration {
        background-color: hsl(235, 46%, 20%);
        flex-basis: 40%;
        align-content: end;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        padding-left: 2rem;
        padding-bottom: 1rem;
        box-sizing: border-box;
        font-family: "Rubik", sans-serif;
        font-weight: 500;
        color: hsl(235, 45%, 61%);
    }

    .duration>p {
        margin-bottom: 6%;
    }

    .duration>p:hover {
        cursor: pointer;
    }

    .duration>p:nth-of-type(2) {
        color: hsl(236, 100%, 87%);
    }

    .name>p {
        color: hsl(236, 100%, 87%);
        font-weight: 500;
    }

    .data {
        display: flex;
        flex-direction: column;
        position: relative;
        /* overflow: hidden; */
        background-color: hsl(15, 100%, 70%);
        border-radius: 1rem;
    }

    .bg {
        overflow: hidden;
        border-radius: 1rem;
    }

    .common {
        color: hsl(236, 100%, 87%);
        background-color: hsl(235, 46%, 20%);
        padding: 5% 10%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: relative;
        border-radius: 0.9rem;
        cursor: pointer;
        z-index: 2;
        flex-basis:80%;
    }

    .header {
        display: flex;
        align-items: center;
        font-size: 1.125rem;  /* was 18px */
        justify-content: space-between;
    }

    .header>p {
        font-size: 1.125rem;  /* was 18px */
        margin: 0;
    }

    .bg>img {
        position: relative;
        left: 60%;
        top: -4%;
    }

    .worked {
        display: flex;
        gap: 0.5rem;
        flex-direction: column;
    }

    .worked * {
        margin: 0;
    }

    h1 {
        font-size: 3rem;
        font-family: "Rubik", sans-serif;
        font-weight: 300;
    }

    /* Structural & color classes */
    .handbag { background-color: hsl(15, 100%, 70%); }
    .data1 { grid-column: 2; grid-row: 1/2; }
    .data2 { background-color: hsl(195, 74%, 62%); grid-column: 3; grid-row: 1/2; }
    .data3 { background-color: hsl(348, 100%, 68%); grid-column: 4; grid-row: 1/2; }
    .data4 { background-color: hsl(145, 58%, 55%); grid-column: 2; grid-row: 2/3; }
    .data5 { background-color: hsl(264, 64%, 52%); grid-column: 3; grid-row: 2/3; }
    .data6 { background-color: hsl(43, 84%, 65%); grid-column: 4; grid-row: 2/3; }
    .console { background-color: hsl(195, 74%, 62%); }
    .book    { background-color: hsl(348, 100%, 68%); }
    .jogging { background-color: hsl(145, 58%, 55%); }
    .chat    { background-color: hsl(264, 64%, 52%); }
    .heart   { background-color: hsl(43, 84%, 65%); }

    .handbag>img { top: -30%; }
    .console>img { top: -20%; }
    .book>img    { top: -20%; }
    .jogging>img { top: -2%; }
    .heart>img   { left: 60%; top: -20%; }
    .chat>img    { top: -40%; }
}