:root {

    font-family: Inter;
    font-weight: 400;
    --primary-color: #0072A6;
    --hover-color: #28a9ff;
    --secondary-color: #1b1b1b;
    --medium-grey: #636363;
    --green: #a1ce3f;
    --ash: #f4f4f4;
    --white: white;
    --b-radius: 0.5rem;
    --border: 1px solid var(--medium-grey);
    --shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
      rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

    --breakpoint-xs: 18em;
    --breakpoint-s: 28em;
    --breakpoint-m: 38em;
    --breakpoint-l: 52em;
    --breakpoint-xl: 60em;
    --breakpoint-2xl: 80em;
}

*, *::after, *::before {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
  
html, body {
    font-family: inherit;
    position: absolute;
    font-size: inherit;
    width: 100%;
    color: var(--secondary-color);
    letter-spacing: 0;
    margin: 0px;
    padding: 0px;
    height: 100%;
}


.bg {
    background-size: contain;
    background-color: var(--primary-color);
    background-image: url('../img/bg_logo.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
}

hr {
    display: inline-block;
    margin-left: auto;
    margin-right: 0;
    width: 5em;
    height: .25em !important;
    background-image: -moz-linear-gradient(90deg, var(--hover-color), var(--green)) !important;
    background-image: -webkit-linear-gradient(90deg, var(--hover-color), var(--green)) !important;
    background-image: linear-gradient(90deg, var(--hover-color), var(--green)) !important;
    border: none !important;
    box-shadow: none !important;
}

h2 {
    font-family: 'LPWebfontLight', san-serif;
    font-size: 2rem;
    text-transform: uppercase;
}

p {
    line-height: 1.5rem;
}

i {
    font-size: 1.3rem;
}

.icon {
    height: 2.7rem;
}

.banner {
    position: relative;
    display: flex;
    margin: 0px;
    width: 100%;
    height: 500px;
    align-items: center;
    color: var(--white);
    overflow: hidden;

    h1 {
        font-family: 'LPWebfontLight', san-serif;
        font-size: 5rem;
    }

    p {
        font-family: Inter;
        font-size: 1.8rem;
        line-height: 2.3rem;

        b {
            font-weight: 700;
        }
    }

    .dna {
        position:static;
        z-index: 1;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .note {
        margin-top: 1rem;
    }

    .container{
        position: relative;
        z-index: 3;
    }

    canvas {
        position: absolute;
        z-index: 2;
    }
}

.award {
    width: 80%;
}

.stats {
    .data {
        font-family: 'LPWebfontLight', san-serif;
        font-size: 5rem;
    }

    .label {
        font-family: Inter, san-serif;
        text-transform: uppercase;
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    .bg {
        background-size: contain;
        background-color: var(--primary-color);
        background-image: none;
        background-repeat: no-repeat;
        background-position: right bottom;
    }

    .banner {
        h1 {
            font-family: 'LPWebfontLight', san-serif;
            font-size: 3rem;
        }

        p {
            font-family: Inter;
            font-size: 1.8rem;

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