@import './reset.css';

:root {
    --white: #e7ecef;
    --night: #131119;
    --peach: #FFE8AD;
    --bittersweet: #FA6464;
    --tiffany-blue: #97C7C7;
    --silver: #A6A6A6;
    --melon: #E6A8A8;
    
    --width: 760px;
    

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    --text-9xl: 8rem;
    
    --fs-body: var(--text-xl);
    --fs-primary-heading: var(--text-xl);
    --fs-secondary-heading: var(--text-xl);
    --fs-nav: var(--text-xl);
    --fs-button: var(--text-xl);

    --open-sans: 'Open Sans', sans-serif;
    --heading: var(--open-sans);
    --color-heading: var(--white);
    --body: var(--open-sans);
    --color-body: var(--white);
    --question: var(--melon);
    --service: var(--orange);

    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
}

*,*:before,*:after { box-sizing: border-box; }

/* *, *:after, *:before { */
/*     outline: 1px solid green; */
/*}*/

html {
    font-size: 100%;
}

/* .home-section { */
/*     --color-body: red; */
/* } */

body {
    padding: 0;
    margin: 0;
    font-family: var(--body);
    font-size: var(--fs-body);
    background-color: var(--night);
    color: var(--color-body);
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
    color: var(--color-heading);
    font-weight: 300;
    letter-spacing: 0px;
    font-size: var(--fs-body);
    color: var(--silver);
    padding-bottom: .25rem;
    width: fit-content;
}

h1, h2 {
    color: var(--green-soft);
    color: var(--bittersweet);
    box-shadow: 0px 4px 0px 0px currentColor;
}

a h1,
a h2,
a h3,
a h4,
a h5,
a h6 {
    box-shadow: none;
}


/* h1 { */
/*     font-size: clamp(1.75em, 2em, 2em); */
/* } */

/* h2 { */
/*     font-size: var(--fs-secondary-heading); */
/* } */

button {
    display: block;
    width: fit-content;
}

nav menu {
    list-style-type: "";
    padding: 0;
    margin: 0;

    a:link {
	text-decoration: none;
    }
}

.main-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--fs-nav);
}

.main-nav-ul {
    display: flex;
    column-gap: 40px;    
}

a,
a:link,
a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    --jasper: #D66853;
    --periwinkle: #ADBDFF;
    color: var(--beaver);
    color: var(--periwinkle);
    color: #758BFD;
    color: #FFBA08;
    color: #C6CA53;
    color: #AC86D5;
    color: #FA6464;
    color: #FCB8FA;
    color: #8232FA;
    color: #4BA37C;
    color: #9E0956;
    color: #C9F2DD; // nyanza
    
    
}

a.btn {
    display: block;
    width: fit-content;
    font-size: var(--fs-button);
    padding: 15px 20px;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 6px;
}

a.btn.btn-knockout,
a:link.btn.btn-knockout,
a:visited.btn.btn-knockout {
    background-color: var(--flamingo);
    color: var(--white);
    border-width: 2px;
}

a:hover.btn.btn-knockout,
a:focus.btn.btn-knockout,
a:active.btn.btn-knockout {
    background-color: var(--valentino);
    color: var(--white);
    border-width: 2px;
    border-color: var(--valentino);
}

a.btn-primary,
a:link.btn-primary,
a:visited.btn-primary {
    background-color: var(--flamingo);
    color: var(--white);
    border: var(--flamingo);
}

a:hover.btn-primary,
a:active.btn-primary,
a:focus.btn-primary {
    background-color: var(--melrose);
    border: var(--melrose);
    color: var(--valentino);
}

.inside-header {
    display: flex;
    justify-content: space-between;
}

.grid-3-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media screen and (width >= 720px) {
    .grid-3-cols {
	grid-template-columns: 1fr 1fr;
    }
}

@media screen and (width >= 1100px) {
    .grid-3-cols {
	   grid-template-columns: 1fr 1fr 1fr;
       }
}

.hero {
    height: 70vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 80px;
}

.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(450px, 1fr));
    gap: 40px;
}

.grid-4-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px, 1fr));
    gap: 40px;
}

.page-home {
    --s1: 1rem;
}

/* Heroes */

.bg-image {
    background-color: white;
}

.bg-image::before {
    --hero-opacity: 0.54;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: inherit;
    pointer-events: none;
    opacity: var(--hero-opacity);
}

/* Utility Classes */
/* Utility Components */
.container {
    width: 100%;
    max-width: var(--width);
}

.container-narrow {
    width: 100%;
    max-width: var(--width-narrow);
}

.bulls-eye {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gutters {
    padding-left: 20px;
    padding-right: 20px;
}

.wrap-balance {
    text-wrap: balance;
}

.stack > * + * {

    margin-top: var(--s1);
}

.stack-line > * + * {
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 1em;
}

.list-none {
    list-style-type: "";
}

.faq ul,
.services-list {
    padding-left: .4rem;
    margin-left: 0;
}

.services-list h3 {
    color: var(--tiffany-blue);
}

.services-list li p {
    padding-left: 1rem;
    color: var(--silver);
}

.services-list > * + * {
    margin-top: .5rem;
}

.faq .question {
    color: var(--question);
}

/* Typography */
.heading {
    font-family: var(--heading);
}

.body {
    font-family: var(--body);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.text-4xl {
    font-size: var(--text-4xl);
}

.text-5xl {
    font-size: var(--text-5xl);
}

.text-6xl,
.home-h2 {
    font-size: var(--text-6xl);
}

.text-7xl {
    font-size: var(--text-7xl);
}

.text-8xl {
    font-size: var(--text-8xl);
}

.text-9xl {
    font-size: var(--text-9xl);
}

.text-center {
    text-align: center;
}

.center {
    text-align: center;
}

.font-100 {
    font-weight: 100;
}

.font-200 {
    font-weight: 200;
}

.font-300 {
    font-weight: 300;
}

.font-400 {
    font-weight: 400;
}

.font-500 {
    font-weight: 500;
}

.font-600 {
    font-weight: 600;
}

.font-700 {
    font-weight: 700;
}

.font-800 {
    font-weight: 800;
}

.font-900 {
    font-weight: 900;
}


.italic {
    font-style: italic;
}

/* Colors */
.text-silver,
.text-gray {
    color: var(--silver);
}

.text-night {
    color: var(--night);
}

.text-peach {
    color: var(--peach);
}

.text-white {
    color: var(--white);
}

.bg-gradient {
    background-image: linear-gradient(175deg, blue 80%, #ad4b2a 80%);
}

/* Spacing */
.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.p-0 {
    padding: 0;
}

.p-1 {
    padding: .25rem;
}

.p-2 {
    padding: .5rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-8 {
    padding: 2rem;
}
.pl-0 {
    padding-left: 0;
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5,
.pv-20 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-12 {
    padding-top: 3rem;
    padding-top: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}



.p-20 {
    padding: 5rem;
}

.px-10 {
    padding-right: 10px;
    padding-left: 10px;
}


.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}
.my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem;
}
.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
.m-0 {
    margin: 0;
}

.mt-1 {
    margin-top: .25rem;
}
.mt-2 {
    margin-top: .5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-16 {
    margin-top: 4rem;
}

.ml-0 {
    margin-left: 0;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* Positioning */ 
.z-99 {
    z-index: 99;
}

.relative {
    position: relative;
}