:root {
    --lightred: hsl(15, 100%, 70%);
    --softBlue: hsl(195, 74%, 62%);
    --lightRed: hsl(348, 100%, 68%);
    --Limegreen: hsl(145, 58%, 55%);
    --Violet: hsl(264, 64%, 52%);
    --softOrange: hsl(43, 84%, 65%);
    --veryDarkBlue: hsl(226, 43%, 10%);
    --darkBlue: hsl(235, 46%, 20%);
    --desaturatedBlue: hsl(235, 45%, 61%);
    --paleBlue: hsl(236, 100%, 87%);

    --fontSize: 18px; /*(card titles e.g. Work, Play)*/
    --fontFamily: Rubik;
}

* {
    border: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fontFamily);
}

body {
    background-color: var(--veryDarkBlue);
    color: rgb(240, 240, 240);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
    grid-template-rows: repeat(4, 1fr);
    
}

.hide {
    display: none;
}

.user-card {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    width: 270px;
    height: 570px;;
    border-radius: 20px;
    background-color: var(--darkBlue);
    position: relative;
    z-index: 2;
}

.user-card::before {
    content: "";
    display: block;
    width: 100%;
    height: 68%;
    background-color: #5746EA;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 20px;
    z-index: 1;
}

.user-card .user-image {
    position: absolute;
    top: 35px;
    left: 25px;
    width: 90px;
    border-radius: 45px;
    z-index: 4;
    border: 3px solid white;
}

.user-card-content {
    z-index: 3;
    position: absolute;
    top: 170px;
    left: 20px;
}

.user-card-content p {
    color: rgb(190, 190, 190);
    margin: 8px;
}

.user-card-content h2 {
    font-size: 2.7rem;
    margin: 8px;
    font-weight: 100;
}


.user-card ul {
    padding-left: 25px;
    padding-top: 10px;
    list-style: none;   
}

.user-card ul li {
    padding: 12px;
   
}

button {
    font-size: 18px;
    font-weight: 500;
    color: #60639E;
    text-decoration: none;
    background: none;
    cursor: pointer;
}

.active {
    color: white
}

.template-card {
    width: 270px;
    height: 270px;
    border-radius: 20px;
    margin: 0 0 30px 30px;
    overflow: hidden;
}

.card-icon {
    position: relative;
    height: 80px;
    top: -230px;
    left: 170px;
    z-index: 3;
}

.template-card::before {
    content: "";
    display: block;
    width: 102%;
    height: 80%;
    background-color: var(--darkBlue);
    position: relative;
    top: 23%;
    left: -3px;
    border-radius: 20px;
    z-index: 4;
}

.template-card .card-content {
    z-index: 3;
    position: relative;
    top: -220px;
    left: 20px;
    z-index: 5;
}

.template-card h1 {
 font-weight: 100;
 font-size: 3rem;
 margin: 8px;
}

.work-card {
    background-color: var(--lightred);
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.play-card {
    background-color: var(--softBlue);
    grid-column: 4 / 5;
    grid-row: 2 / 3;
}

.study-card {
    background-color: var(--lightRed);
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

.exercise-card {
    background-color: var(--Limegreen);
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
.social-card {
    background-color: var(--Violet);
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.self-card {
    background-color: var(--softOrange);
    grid-column: 5 / 6;
    grid-row: 3 / 4;
}


@media (max-width: 800px) {
    body{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .study-card {
        background-color: var(--lightRed);
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }

    .self-card {
        background-color: var(--softOrange);
        grid-column: 3 / 4;
        grid-row: 4 / 5;
    }
    .template-card {
        margin: 0 30px 30px 0px;
    }
}

@media (max-width: 500px) {
    body{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(5, 1fr);
    }

    .play-card {
        background-color: var(--softBlue);
        grid-column: 2 / 3;
        grid-row: 5 / 6;
    }

    .social-card {
        background-color: var(--Violet);
        grid-column: 3 / 4;
        grid-row: 5 / 6
    }
}