/**** Importation de la police Inter ****/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/**** Variables CSS ****/

:root {
    /**** primary ****/

    --lime_green: hsl(163, 72%, 41%);
    --bright_red: hsl(356, 69%, 56%);
    --facebook: hsl(208, 92%, 53%);
    --twitter: hsl(203, 89%, 53%);
    --instagram_start: hsl(37, 97%, 70%);
    --instagram_end: hsl(329, 70%, 58%);
    --youtube: hsl(348, 97%, 39%);

    /**** Dark theme ****/

    --toggle_bg_start: hsl(210, 78%, 56%);
    --toggle_bg_end: hsl(146, 68%, 55%);

    /**** light theme ****/

    --toggle_bg_light: hsl(230, 22%, 74%);

    /**** DARK-THEME ****/

    --very_dark_blue_bg: hsl(230, 17%, 14%);
    --very_dark_blue_tbgp: hsl(232, 19%, 15%);
    --dark_desaturated_blue_cardBG: hsl(228, 28%, 20%);
    --desaturated_blue_text: hsl(228, 34%, 66%);
    --white_text: hsl(0, 0%, 100%);

    /**** LIGHT-THEME ****/

    --white_bg: hsl(0, 0%, 100%);
    --very_pale_blue_tbgp: hsl(225, 100%, 98%);
    --light_grayish_blue_cardBG: hsl(227, 47%, 96%);
    --dark_grayish_blue_text: hsl(228, 12%, 44%);
    --very_dark_blue_text: hsl(230, 17%, 14%);
    --font_inter: 'Inter', sans-serif;
    --hover_color: hsl(231, 41%, 93%);
}

html[data-theme="dark"] {
    --white_bg: hsl(230, 17%, 14%);
    --very_pale_blue_tbgp: hsl(232, 19%, 15%);
    --light_grayish_blue_cardBG: hsl(228, 28%, 20%);
    --dark_grayish_blue_text: hsl(228, 34%, 66%);
    --very_dark_blue_text: hsl(0, 0%, 100%);
    --hover_color: hsl(231, 19%, 27%);
}


/**** Reset ****/

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

/**** Style général de la page ****/

body,
html {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font_inter);
    background-color: var(--white_bg);
    font-size: 62.5%;
    position: relative;
}

body::before,
html::before {
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--very_pale_blue_tbgp);
    width: 100%;
    height: 220px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

/**** Header ****/

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 10;
    padding-top: 25px;
    padding-inline: 100px;
}

header .titles {
    display: flex;
    flex-direction: column;
}

header .title {
    font-size: 24px;
    font-weight: 700;
    color: var(--very_dark_blue_text);
    margin-bottom: 8px;
    margin-top: 0;
}

header .text {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark_grayish_blue_text);
}

.border {
    display: none;
}

.toggle__container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

input[type="checkbox"] {
    width: 0;
    height: 0;
    visibility: hidden;
}

label {
    cursor: pointer;
    width: 5.2rem;
    height: 2.4rem;
    background-color: var(--toggle_bg_light);
    border-radius: 100px;
    position: relative;
    align-self: center;
}

label::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 2rem;
    height: 1.9rem;
    background-color: var(--very_pale_blue_tbgp);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

input:checked+label {
    background-image: linear-gradient(90deg, var(--toggle_bg_start), var(--toggle_bg_end));
}

input:checked+label::after {
    right: calc(100% - 45px);
    transform: translateX(-100%);
}

.toggle__container p {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark_grayish_blue_text);
    margin-right: 12px;
}

/**** Main ****/

.main__content {
    flex-grow: 1;
    padding: 25px 100px;
    z-index: 10;
}

/**** Section Card ****/

.card__section {
    margin-bottom: 35px;
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 27rem;
    height: 18rem;
    background-color: var(--light_grayish_blue_cardBG);
    border-radius: 6px;
    transition: background-color 0.3s ease-out,
        transform 0.3s ease-in-out,
        cursor 0.3s ease-in-out;
}

.card:hover {
    background-color: var(--hover_color);
    transform: scale(1.03);
    cursor: pointer;
}

.card__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 20%;
    font-weight: 700;
    color: var(--desaturated_blue_text);
    margin-bottom: 10px;
}

.card__header img {
    scale: 0.9;
}

.card__header p {
    font-size: 11px;
}

.card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40%;
    text-align: center;
    margin-bottom: 10px;
}

.card__body span {
    font-size: 5rem;
    display: inline;
    font-weight: bolder;
    line-height: 0.8;
    color: var(--very_dark_blue_text);
}

.card__body p {
    margin-top: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 100;
    color: var(--dark_grayish_blue_text);
}

.card__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: var(--lime_green);
    font-weight: 700;
    margin-bottom: 10px;
}

.card__footer p {
    font-size: 11px;
}

.card:last-child .card__footer p {
    color: var(--bright_red);
}

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

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

.ig {
    border-top: 4px solid;
    border-image-source: linear-gradient(90deg, var(--instagram_start) 0%, var(--instagram_end) 100%);
    border-image-slice: 1;

}

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

/**** Overview title ****/

.overview__title {
    color: var(--dark_grayish_blue_text);
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/**** Overview section ****/

.overview__section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.overview__card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 12rem;
    width: 27rem;
    background-color: var(--light_grayish_blue_cardBG);
    border-radius: 6px;
    padding: 1rem 3rem;
    transition: background-color 0.3s ease-out,
        transform 0.3s ease-in-out,
        cursor 0.3s ease-in-out;
}

.overview__card:hover {
    background-color: var(--hover_color);
    transform: scale(1.03);
    cursor: pointer;
}

.left,
.right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    height: 70%;
}

.left {
    align-items: flex-start;
}

.left p {
    color: var(--dark_grayish_blue_text);
    font-size: 14px;
    font-weight: 700;
}

.left span {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--very_dark_blue_text);
}

.right {
    align-items: flex-end;
}

.right .growth {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.growth p {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--lime_green);
}

.growth .down {
    color: var(--bright_red);
}

/**** Footer ****/

.attribution {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    margin-block: 3rem;
    padding-inline: 10px;
    color: var(--very_dark_blue_text);
}

.attribution a {
    color: hsl(228, 45%, 44%);
    transition: text-decoration 0.3s ease-in-out;
}

.attribution a:hover {
    text-decoration: underline;
}

/**** Responsive design version tablette ****/

@media screen and (max-width: 1040px) {

    .card__section,
    .overview__section {
        justify-content: space-evenly;
        gap: 3rem;
    }
}

/**** Responsive design version mobile ****/

@media screen and (max-width: 767px) {

    header,
    .main__content {
        padding-inline: 25px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .border {
        display: block;
        margin: 20px 0;
        width: 100%;
        border: 1px solid var(--toggle_bg_light);
    }

    .toggle__container {
        width: 100%;
        position: relative;
    }

    .toggle__container label {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .card__section,
    .overview__title {
        margin-bottom: 35px;
    }

    .card,
    .overview__card {
        width: 100%;
    }
}