@font-face {
  font-family: "Lilita One";
  src:
    local("Lilita One"),
    url('/fonts/LilitaOne.woff2') format("woff2");
}

:root {

    --width-breakpoint: 720px;
    --max-inline-size: 1200px;


    /* Fonts */
    /* Modern Font Stacks */
    --mfs-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --mfs-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    font-weight: normal;

    --font-body: Asap, var(--mfs-humanist);
    --font-display: Lilita One, var(--mfs-classical-humanist);


    /* Colour Schemes */
    color-scheme: light dark;

    --colour-base: #f7fafc;
    --colour-pale: rgb(255, 250, 233);
    
    --colour-paleblue: #8ecae6;
    --colour-lightblue: rgb(6,147,227);
    --colour-darkblue: rgb(20,39,109);
    --colour-brightblue: #0a43f0;
    --colour-text-darkblue: rgb(0, 23, 136);

    --colour-orange: rgb(253, 187, 49);
    --colour-deep-orange: #e38f14;
    --colour-red-orange: #df5640;

    --colour-green: #439539;
    --colour-red: #e31837;
    --colour-light-red: #eea397;

    --colour-link: #a60215;
    --colour-link-active: #e31837;

    --blue-gradient: linear-gradient(270deg,var(--colour-lightblue) 27%,var(--colour-darkblue) 100%);



    /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

    /* @link https://utopia.fyi/type/calculator?c=360,12,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */  --step--2: clamp(0.5208rem, 0.4394rem + 0.3621vw, 0.72rem);
    --step--2: clamp(0.6076rem, 0.5617rem + 0.2043vw, 0.72rem);
    --step--1: clamp(0.7292rem, 0.6593rem + 0.3106vw, 0.9rem);
    --step-0: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
    --step-1: clamp(1.05rem, 0.9043rem + 0.6477vw, 1.4063rem);
    --step-2: clamp(1.26rem, 1.0563rem + 0.9051vw, 1.7578rem);
    --step-3: clamp(1.512rem, 1.2317rem + 1.2459vw, 2.1973rem);
    --step-4: clamp(1.8144rem, 1.4331rem + 1.6949vw, 2.7466rem);
    --step-5: clamp(2.1773rem, 1.6635rem + 2.2835vw, 3.4332rem);


}


/* Dark scheme: follows the OS unless a manual theme is set */
/* @media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

  }
} */

/* Manual override for a theme toggle */
/* :root[data-theme="dark"] {

} */


* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--colour-text-darkblue);


    margin: 0;
    padding: 0;

    background-color: var(--colour-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: normal;
    line-height: 1.1;
}

h1 {
    font-size: var(--step-4);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
}

h4 {
    font-size: var(--step-1);
}

img {
    max-inline-size: 100%;
    display: block;
}

a {
    color: var(--colour-link);
    text-decoration: none;
    &:hover, &:active {
        color: var(--colour-link-active);
    }
    &:hover {
        text-decoration: dotted underline;
    }
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-grow: 1;
  max-inline-size: var(--max-inline-size);
  /* min-block-size: 100vh; */
  margin-inline: auto;
  margin-block: 0;
  padding-inline: var(--space-2xs-xs);

  /* main {
    flex-grow: 1;
  } */
}

header {
    padding-block: var(--space-2xs);  
    background-image: var(--blue-gradient);
}

/* section.two-column {
    &>div.wrapper {
        display: grid;
        gap: 20px;
        padding-block: var(--space-l);
        justify-items: center;
        align-items: center;

        @media (width > 720px) {
            grid-template-columns: 1fr 1fr;
            text-align: start;
        }
    }
} */

.two-column {
    display: grid;
    gap: var(--space-l);
    padding-block: var(--space-l);
    justify-items: center;
    align-items: center;

    @media (width > 720px) {
        grid-template-columns: 1fr 1fr;
        text-align: start;
    }
}

.three-column {
    display: grid;
    gap: var(--space-l);
    padding-block: var(--space-m);
    justify-items: center;
    align-items: center;

    @media (width > 720px) {
        grid-template-columns: 1fr 1fr 1fr;
        text-align: start;
    }
}

section.hero {
    background-image: var(--blue-gradient);
    color: var(--colour-pale);

    /* &>div.wrapper {
        display: grid;
        gap: 20px;
        padding-block: var(--space-l);
        justify-items: center;
        align-items: center;
        


        @media (width > 720px) {
            grid-template-columns: 1fr 1fr;
            text-align: start;
        }
    } */

    h2 {
        font-size: var(--step-5);
    }

    h3 { 
        font-size: var(--step-1);
        text-transform: uppercase;
        color: var(--colour-orange)
    }

    div.logo {
        padding-inline: var(--space-m);

        @media (width < 720px) {
            max-width: calc(var(--width-breakpoint)/2);
        }
    }

    div.class-buttons {
        padding-inline: inherit;
        padding-block-start: var(--space-m);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-m);

        a {
            display: inline-flex;
            gap: var(--space-2xs);
            align-items: center;

            font-family: var(--font-display);
            font-size: var(--step-1);
            text-decoration: none;
            text-transform: uppercase;
            color: var(--colour-pale);

            padding: var(--space-xs) var(--space-s);
            border-radius: 50px;
            background-color: var(--colour-green);

            &:hover {
                background-color: var(--colour-red);
            }
        }
    }



  /* clip-path: polygon(0% 0%, 100% 0%, 100.000% 93.000%, 93.750% 94.545%, 87.500% 95.939%, 81.250% 97.045%, 75.000% 97.755%, 68.750% 98.000%, 62.500% 97.755%, 56.250% 97.045%, 50.000% 95.939%, 43.750% 94.545%, 37.500% 93.000%, 31.250% 91.455%, 25.000% 90.061%, 18.750% 88.955%, 12.500% 88.245%, 6.250% 88.000%, 0.000% 88.245%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100.000% 93.000%, 93.750% 94.545%, 87.500% 95.939%, 81.250% 97.045%, 75.000% 97.755%, 68.750% 98.000%, 62.500% 97.755%, 56.250% 97.045%, 50.000% 95.939%, 43.750% 94.545%, 37.500% 93.000%, 31.250% 91.455%, 25.000% 90.061%, 18.750% 88.955%, 12.500% 88.245%, 6.250% 88.000%, 0.000% 88.245%, 0% 100%); */

}


.wave-b {
    /* background-color: var(--colour-red); */
    /* background-image: var(--blue-gradient); */
    mask-image: url("/images/wave-sep.svg");
    /* mask-size: cover; */
    mask-repeat: no-repeat;
    mask-position: center;
}
    /* position: relative;
    bottom: -1px;
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--colour-base);
} */

.wave-bottom {
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /* border: 1px dotted red; */
    /* position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 1; */

    svg {
        position: relative;
        bottom: -1px;
        width: 100.2%;
        height: 100%;
        display: block;
        fill: var(--colour-base);
    }
}

.wave-top {
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;

    svg {
        position: relative;
        top: -1px;
        width: 100.2%;
        height: 100%;
        display: block;
        fill: var(--colour-base);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}



section.intro {
    h2, .socials-cta {
        text-align: center;
    }

    .socials-cta {
        font-size: var(--step-1);

        .icon {
            width: var(--step-4);
            height: var(--step-4);
            vertical-align: middle;
            margin-inline-end: var(--space-2xs);
            padding-block-end: var(--space-3xs);
        }
    }
}



.info-block {
    color: var(--colour-pale);
    background-color: var(--colour-red);
    display: flex;
    padding: var(--space-2xs);
    border-radius: 25px;
    gap: var(--space-s);
    align-items: center;
    margin-block-end: var(--space-s);

    h2 {
        font-size: var(--step-4);
        margin-block-start: var(--space-2xs);
    }

    svg {
        height: calc(var(--step-5) * 2.5);
        width: calc(var(--step-5) * 2.5);
        transition: transform .2s;
    }

    &:hover {
        text-decoration: none;
        color: var(--colour-pale);
        /* background-color: var(--colour-light-red); */

        svg {
            transform: scale(1.2);
        }
    }
}

section.info {
    background-color: var(--colour-paleblue);
    text-align: center;

    h2 a {
        color: var(--colour-pale);

        &:hover {
            color: var(--colour-link-active);
        }
    }
}

.card {
    background-color: var(--colour-pale);
    padding: 0;
    border-radius: 30px;
    width: 100%;
    align-self: stretch;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 14px 0px;

    > * {
        margin: var(--space-s);
    }

    h3 {
        text-align: center;
        text-transform: uppercase;
        font-size: var(--step-1);
        letter-spacing: 1px;
    }

    figure {
        margin: var(--space-3xs) 0;
        padding: 0;
        background-color: var(--colour-lightblue);
        aspect-ratio: 4/3;
    }


    a.button {
            display: block;
            gap: var(--space-2xs);
            align-items: center;

            font-family: var(--font-display);
            font-size: var(--step-0);
            text-decoration: none;
            text-align: center;
            color: var(--colour-pale);

            padding: var(--space-s) var(--space-s);
            border-radius: 50px;
            background-color: var(--colour-brightblue);

            &:hover {
                background-color: var(--colour-red-orange);
            }
        }
}