/* Custom Properties */
:root {
    --white-color: hsl(0, 0%, 100%);
    --bg-top-light: hsl(225, 100%, 98%);
    --bg-card-light: hsl(227, 47%, 96%);
    --bg-hover-light: hsl(232, 33%, 91%);
    --bg-hover-dark: hsl(228, 26%, 27%);
    --normal-txt-light:  hsl(228, 12%, 44%);
    --bg-dark: hsl(230, 17%, 14%);
    --bg-top-dark: hsl(232, 19%, 15%);
    --bg-card-dark: hsl(228, 28%, 20%);
    --normal-txt-dark:  hsl(228, 34%, 66%);
    --toggle-dark: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
    --toggle-light: hsl(230, 22%, 74%);
    --insta-border: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    --youtube-border: hsl(348, 97%, 39%);
    --twitter-border: hsl(203, 89%, 53%);
    --fb-border: hsl(208, 92%, 53%);
    --green: hsl(163, 72%, 41%);
    --red: hsl(356, 69%, 56%);
}

/* Reset default browser settings */
*, 
*::before, 
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* Light Theme */

/* Body */
body {
    font-family: "Inter", sans-serif;
}

/* Background top */
body::before {
    background-color: var(--bg-top-light);
    border-radius: 0 0 25px 25px;
    content: "";
    position: absolute;
    height: 200px;
    left: 0;
    top: 0;
    width: 100%;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 88%;
    padding: 3% 0;
    position: relative;
}

/* Main heading */
.main-heading h1 {
    font-size: 1.8rem;
}

.main-heading h3 {
    color: var(--normal-txt-light);
    font-size: .8rem;
    font-weight: 700;
    padding-top: .2rem;
}

/* Switch / Toggle */
.switch {
    font-size: .8rem;
    margin-right: 4rem;
}

.switch label {
    color: var(--normal-txt-light);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    position: relative;
}

.switch input {
    display: none; /* hide checkbox */
}

/* Switch / Toggle box (pill-shape) */
.switch label::before {
    background-color: var(--toggle-light);
    border-radius: 10px;
    bottom: 0;
    content: "";
    height: 20px;
    left: 110%;
    position: absolute;
    width: 50px;
}

.switch label:hover::before {
    background-image: var(--toggle-dark);
}

/* Toggle inner button */
.switch label::after {
    background-color: var(--white-color);
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 115%;
    position: absolute;
    top: calc((20px - 14px) / 2);
    transform: translate(27px, -5.5px);
    transition: 
        transform 500ms ease,
        background-color 500ms ease
    ;
    width: 14px;

    -webkit-transform: translate(27px, -5.5px);
    -moz-transform: translate(27px, -5.5px);
    -webkit-transition: 
        transform 500ms ease,
        background-color 500ms ease
    ;
    -moz-transition: 
        transform 500ms ease,
        background-color 500ms ease
    ;
}

/* Move button when toggle clicked */
.switch input:checked + label::after {
    transform: translate(1px, -5.5px);
    background-color: var(--bg-dark);
    -webkit-transform: translate(1px, -5.5px);
    -moz-transform: translate(1px, -5.5px);
}

/* Tab focus on the switch button and links */
.switch:focus-visible {
    outline: var(--red) solid 1px;
}

a:focus-visible {
    outline: var(--red) solid 1px;
}

/* Cards */
.cards {
    display: grid;
    gap: calc((100% - (800px)) / 4);
    grid-template-columns: repeat(4, 1fr);
}

.card {
    background-color: var(--bg-card-light);
    border-radius: 5px;
    cursor: pointer;
    max-width: 240px;
    min-width: 200px;
    overflow: hidden;
    padding: 10%;
    position: relative;
    text-align: center;
}

.card:hover,
.card:focus {
    background-color: var(--bg-hover-light);
    box-shadow: 0 1px 3px var(--bg-top-dark);
}

/* Percentage and daily count */
.green,
.red {
    font-size: .756rem;
    font-weight: 700;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
}
.green {
    color: var(--green);
}

.red {
    color: var(--red);
}

/* Total Section */
main {
    max-width: 88%;
    margin: auto;
}

.facebook {
    border-top: solid 4px var(--fb-border);
}

.twitter {
    border-top: solid 4px var(--twitter-border);
}

/* --Instagram border-top */
.instagram::before {
    background-image: var(--insta-border);
    content: "";
    left: 0;
    padding-top: 5px;
    position: absolute;
    top: -1px;
    width: 100%;
}

.youtube {
    border-top: solid 4px var(--youtube-border);
}

.user {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
}

.user h3 {
    color: var(--normal-txt-light);
    font-size: 0.882rem;
    font-weight: 700;
}

.user + p {
    font-size: 3.528rem;
    font-weight: 700;
    margin-bottom: .503rem;
    margin-top: 1rem;
    letter-spacing: -0.15rem;
    line-height: 1;
}

.user ~ p:nth-of-type(2) {
    color: var(--normal-txt-light);
    font-size: 0.756rem;
    font-weight: 400;
    letter-spacing: .378rem;
    margin-bottom: 2.5rem;
    text-transform: uppercase;
}

/* Overview Section */
.overview {
    margin-top: 3rem;
    row-gap: 1.75rem;
}

.overview h2 {
    color: var(--normal-txt-light);
    font-size: 1.512rem;
    grid-column: 1 / 5;
    margin-bottom: 2rem;
}

.overview .card:first-of-type {
    padding: 10%;
}

.overview .user {
    justify-content: space-between;
}

.overview-counter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1rem;
}

.overview-counter > p {
    font-size: 2rem;
    font-weight: 700;
}

/* Attribution */
footer {
    color: var(--normal-txt-light);
    font-size: 0.886rem;
    margin: 1rem auto;
    min-width: 360px;
    line-height: 2;
    text-align: center;
}

.attribution a:hover { 
    color: var(--normal-txt-dark);
}

/* Dark theme */

/* body */
body.dark {
    background-color: var(--bg-dark);
}

/* Background top */
body.dark::before {
    background-color: var(--bg-top-dark);
}

/* Main heading */
.dark .main-heading {
    border-bottom-color: var(--normal-txt-light);
}

/* Switch */
.switch input:checked + label::before{
    background-image: var(--toggle-dark);
}

/* Tab focus on the switch button and links */
.dark .switch:focus-visible {
    outline: var(--bg-top-light) solid 1px;
}

.dark a:focus-visible {
    color: var(--bg-top-dark);
    outline: var(--bg-top-light) solid 1px;
}

/* Card */
.dark .card {
    background-color: var(--bg-card-dark);
    color: var(--normal-txt-dark);
}

.dark .card:hover,
.dark .card:focus {
    box-shadow: 0 1px 3px var(--bg-hover-dark);
    background-color: var( --bg-hover-dark);
}

/* Dark theme text colours */
.dark .attribution a,
.dark .main-heading h1,
.dark .overview h2,
.dark .overview-counter > p,
.dark .user + p {
    color: var(--white-color);
}

.dark .attribution a:hover,
.dark .attribution a:focus,
.dark footer,
.dark .main-heading h3,
.dark .switch label,
.dark .user h3,
.dark .user ~ p:nth-of-type(2) {
    color: var(--normal-txt-dark);
}


/* Media Queries */

/* Large Screen */
@media only screen and (max-width:900px) {

    /* Header */
    main,
    .header {
        width: 90%;
    }

    /* Cards / Card */
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: calc((100% - (400px)) / 4);
        row-gap: 2rem;
    }

    .card {
        min-width: 100%;
    }

    /* Overview Section */
    .overview h2 {
        grid-column: 1 / 3;
    }

}

/* Medium Screen */
@media only screen and (max-width:660px) {

    /* Header */
    .header {
        align-items: flex-start;
        flex-direction: column;
    }

    .main-heading {
        border-bottom: solid 1px var(--normal-txt-dark);
        padding: 5% 0;
        width: 100%;
    }

    .main-heading h1 {
        font-size: 1.6rem;
    }

    /* switch */
    .switch {
        padding: 5% 0;
    }

    .switch label::before {
        left: 150%;
    }

    .switch label::after {
        left: 157%;
    }

    /* Cards / Card */
    .cards ,
    .card {
        width: 100%;
    }

}

/* Small Screen */
@media only screen and (max-width:550px) {

    /* Header */
    .header {
        max-width: 340px;
    }

    .switch label::before {
        left: 440%;
    }

    .switch label::after {
        left: 446%;
    }

    /* Total Section */
    main {
        max-width: 340px;
        margin-top: 8%;
    }

    /* Cards */
    .cards {
        grid-template-columns: 1fr;
        max-width: 340px;
        row-gap: 1.89rem;
    }

    /* Overview Section */
    .overview h2 {
        font-size: 1.5rem;
        grid-column: 1;
    }

}