:root{
    --white: #fff;
    --lightblue: #8ed1fc;
    --lightpink: #f17db1;
    --black: #000;
    --mainfont: 'Segoe UI';
    --main-border-radius: 5px;
    --red: #cf2e2e;
    --lavender: #f0e7f8;
    --pastelblue: #dbeefa;
    --pastelpink: #f9daea;
    --gray: #f0f0f0;

}

:root{
    scrollbar-color: var(--black) var(var(--white));
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--black);
        border-radius: 7px;
        }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar {
        background-color: var(--white);
    } 



body, *, html {
    font-size: var(--step-0);
    font-weight: 400;
}
strong, .strong {
    font-weight: 700;
}
p{
    margin-bottom: var(--step-5);
}
h1 {
    font-size: var(--step-6);
    font-weight: 900;
    margin-bottom: var(--step-5);
}

h2 {
    font-size: var(--step-5);
    font-weight: 700;
    margin-bottom: var(--step-5);
}
h3 {
    font-size: var(--step-4);
    font-weight: 600;
    margin-bottom: var(--step-5);
}
h4 {
    font-size: var(--step-3);
    font-weight: 500;
    margin-bottom: var(--step-5);
}
h5 {
    font-size: var(--step-2);
    font-weight: 400;
    margin-bottom: var(--step-5);
}
h6 {
    font-size: var(--step-1);
    font-weight: 300;
    margin-bottom: var(--step-5);
}

/* Responsive Font sizes:*/
:root {
    --step--2: clamp(0.7901rem, 0.7729rem + 0.0859vw, 0.8395rem);
  --step--1: clamp(0.8889rem, 0.8696rem + 0.0966vw, 0.9444rem);
  --step-0: clamp(1rem, 0.9783rem + 0.1087vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.1005rem + 0.1223vw, 1.1953rem);
  --step-2: clamp(1.2656rem, 1.2381rem + 0.1376vw, 1.3447rem);
  --step-3: clamp(1.4238rem, 1.3929rem + 0.1548vw, 1.5128rem);
  --step-4: clamp(1.6018rem, 1.567rem + 0.1741vw, 1.7019rem);
  --step-5: clamp(1.802rem, 1.7629rem + 0.1959vw, 1.9147rem);
  --step-6: clamp(2.0273rem, 1.9832rem + 0.2204vw, 2.154rem);
  }