/* Custom Properties and Utility Classes  */
:root{
    /* Light Theme  */
    --clr-bg: hsl(0,0%, 100%);   /*(BG)*/
    --clr-secondary-400:  hsl(225, 100%, 98%);    /*(Top BG Pattern)*/
    --clr-primary-400:  hsl(227, 47%, 96%); /*(Card BG)*/
    --clr-primary-500:  hsl(227, 47%, 92%); /*(Hover Card BG Only)*/
    --clr-text-400: hsl(228, 12%, 44%);    /*(Text)*/
    --clr-text-450: hsl(228, 12%, 44%);    /*(Overview Text Hover Only)*/
    --clr-text-500: hsl(230, 17%, 14%);    /*(Dark Blue Text)*/

    --clr-lime: hsl(163, 72%, 41%);
    --clr-red: hsl(356, 69%, 56%);
    --clr-facebook: hsl(208, 92%, 53%);
    --clr-twitter: hsl(203, 89%, 53%);
    --clr-insta: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    --clr-youtube: hsl(348, 97%, 39%);

    
    --clr-btn: hsl(230, 22%, 74%);  /* (Button Toggle) */

    --fs-200: 0.875rem; /* 14px*/
    --fs-300: 1rem; /* 16px*/
    --fs-400: 1.25rem; /* 20px*/
    --fs-500: 1.5rem; /* 24px*/
    --fs-600: 1.75rem; /* 28px*/
    --fs-700: 2rem; /* 32px*/
    --fs-800: 2.5rem; /* 40px*/
    --fs-900: 3rem; /* 48px*/

    --ff-primary: 'Inter', sans-serif;

    --fw-400: 400;
    --fw-500: 500;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    --transition-delay: all 1s ease;
} 
/* For Dark Mode Toggle Class  */
.darkMode{
    /* Dark Theme  */
    --clr-bg: hsl(230, 17%, 14%);   /*(BG)*/
    --clr-secondary-400:  hsl(232, 19%, 15%);    /*(Top BG Pattern)*/
    --clr-primary-400:  hsl(228, 28%, 20%); /*(Card BG)*/
    --clr-primary-500:  hsl(228, 28%, 25%); /*(Hover Card BG Only)*/
    --clr-text-400: hsl(228, 34%, 66%);    /*(Text)*/
    --clr-text-450: hsl(0, 0%, 100%);    /*(Overview Text Hover Only)*/
    --clr-text-500: hsl(0, 0%, 100%);    /*(Dark Blue Text)*/

    --clr-btn: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));      /* (Button Toggle) */
}
/* Utility Classes */
.red{
    color: var(--clr-red);
    font-size: var(--fs-200);
    font-weight: var(--fw-700);
}
.green{
    font-size: var(--fs-200);
    color: var(--clr-lime);
    font-weight: var(--fw-700);
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding-bottom: 0.4rem;
}

/* CSS Reset  */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* General Styling  */
body{
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
    background-color: var(--clr-bg);
    font-family: var(--ff-primary);
    transition: var(--transition-delay);
}
.container{
    width: 90%;
    max-width: 90rem;
    margin-block: 2rem;
}
/* Background Pattern  */
.bg-pattern{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 15rem;
    border-radius: 0 0 1.5rem 1.5rem;
    animation: title-down-rev 2s ease;
    animation-delay: 150ms;
    transition: var(--transition-delay);
    background-color: var(--clr-secondary-400);
}
/* Heading  */
.heading h2{
    font-weight: var(--fw-700);
    font-size: var(--fs-500);
    color: var(--clr-text-500);
    animation: title-left 2s ease;
}
.heading p{
    font-size: var(--fs-200);
    font-weight: var(--fw-700);
    color: var(--clr-text-400);
    padding-bottom: 1rem;
    animation: title-left 2s ease;
    animation-delay: 100ms;
}
/* Dark Mode  */
.dark-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--clr-text-500);
    padding-top: 1rem;
}
.dark-btn p{
    color: var(--clr-text-400);
    font-weight: var(--fw-700);
    font-size: var(--fs-200);
    animation: title-left1 1.5s ease;
    animation-delay: 105ms;
}
/* Dark Mode Button  */
.btn-bg{
    position: relative;
    background: var(--clr-btn);
    border-radius: 2rem;
    cursor: pointer;
    padding: .1rem;
    width: 50px;
    height: 25px;
    animation: title-right 2s ease;
    animation-delay: 100ms;
}

.toggle-btn{
    position: absolute;
    top: 2.5px;
    right: 3.5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateX(0);
    transition: all 0.8s ease;
    background-color: var(--clr-secondary-400);
    animation: opacity 2s ease;
    animation-delay: 0.7s;
}
.shift-btn {
    transition: all .8s ease;
    transform: translateX(-23.5px);
}
.media-grid {
    display: grid;
    gap: 1.5rem;
    /* grid-auto-columns: 1fr; */
    margin-block: 2.5rem;
}
/* Media Grid  */
@media (min-width: 35em) {
    .media-grid, .report-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 50em) {
    .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .dark-btn{
        gap: 0.8rem;
        border-top: none;
        padding: 0;
        /* justify-content: flex-end; */
    }
   .media-grid, .report-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (min-width: 70em) {
    .media-grid, .report-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* Borders  */
.media{
    text-align: center;
    padding: 1rem;
    /* border-width: 2px; */
    /* border-image-slice: 1; */
    border-top: 4px solid;
    border-radius: .6rem;
    background-color: var(--clr-primary-400);
    transition: var(--transition-delay);
}
.media:hover, .report:hover {
    transition: all .4s ease;
    cursor: pointer;
    background-color: var(--clr-primary-500);
}
.media h1{
    color: var(--clr-text-500);
    font-weight: var(--fw-800);
    font-size: var(--fs-900);
    line-height: 4rem;
}
.media p:nth-child(3){
    font-size: var(--fs-200);
    font-weight: var(--fw-400);
    letter-spacing: .25rem;
    color: var(--clr-text-400);
    text-transform: uppercase;
    padding-bottom: 1.2rem;
}
.logo-user{
    padding-block: 0.5rem 1rem ;
}
.logo-user p{
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--fs-200);
    color: var(--clr-text-500);
}
/* All the Borders */
.blue-border{
    border-color: var(--clr-facebook);
}
.blue-1-border{
    border-color: var(--clr-twitter);
}
.red-border{
    border-color: var(--clr-youtube);
}
.report{
    background-color: var(--clr-primary-400);
}
/* Instagram Border */
.media:nth-child(3){
    position: relative;
    border-top: 0.5px solid transparent;
    border-radius: 0.6rem;
    top: 3px;
}
.media:nth-child(3)::after{
    content: '';
    position: absolute;
    top: -5px;
    bottom: 5px;
    left: 0px; right: 0px;
    background: var(--clr-insta);
    z-index: -1;
    border-radius: 0.6rem;
    transition: var(--transition-delay);
}
@media (max-width: 425px) {
    .media:nth-child(3)::after {
        left: 1px;
        right: 1px;
    }
}
@media (min-width: 1024px) {
    .media:nth-child(3)::after {
        left: 1px;
    }
}
@media (min-width: 1444px) {
    .media:nth-child(3)::after {
        left: 0px;
    }
}
/* Report Grid  */
h2[data-type = first] {
    font-size: var(--fs-600);
    color: var(--clr-text-450);
    animation: title-scale 1.5s ease;
    animation-delay: 180ms;
}
.report-grid {
    display: grid;
    gap: 1.5rem;
    margin-block: 1.7rem 0.5rem;
}
.report{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    border-radius: .5rem;
    padding: 2rem;
    transition: var(--transition-delay);
}
.report-title{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.report-title p{
    color: var(--clr-text-400);
    font-weight: var(--fw-700);
}
.report-title h3{
    color: var(--clr-text-500);
    font-weight: var(--fw-800);
    font-size: var(--fs-700);
}
.report-number{
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    align-items: center;
}
.up-down-sign{
    display: flex;
    align-items: center;
}
.attribution { 
    font-size: 11px; 
    text-align: center; 
    color: var(--clr-text-450); 
    margin-bottom: 0.5rem;
    font-weight: var(--fw-800);
}
.attribution a { 
    text-decoration: none;
    transition: all .5s ease;
    color: var(--clr-text-450); 
    font-weight: var(--fw-800);
}
.attribution a:is(:hover, :focus-within) {
    color: var(--clr-twitter); 
}