:root{
    --page-top-height: 6rem;
    --external-container-width: 2100px;

    /*colors*/

    --electric-indigo: #6033F2;
    --deep-purple: #7A41FF;
    --velvet-black: #090006;
    --midnight-black: #050003;
    --dark-grey: #404040;
    --light-grey: #BFBFBF;
    --silk-white: #F9F8FF;
    --pure-white: #FFFFFF;

    --transparent-grey: #40404061;

    /*used in links*/
    --main-text-color: var(--midnight-black);
    --main-bg-color: var(--silk-white);

    /*font sizes*/
    --typeface-size-sm: 1rem;
    --typeface-size-md: 1.125rem;
    --typeface-size-lg: 1.5rem;
    --typeface-size-xl: 2rem;
    --typeface-size-2xl: 2.5rem;
    --typeface-size-3xl: 3rem;
    --typeface-size-4xl: 3.875rem;
}
@media(max-width: 1023px){
    :root{
        --typeface-size-sm: 0.875rem;
        --typeface-size-md: 1rem;
        --typeface-size-lg: 1.25rem;
        --typeface-size-xl: 1.75rem;
        --typeface-size-2xl: 2.25rem;
        --typeface-size-3xl: 2.5rem;
        --typeface-size-4xl: 3rem;
    }
}

@media screen and (min-width: 1600px){
    .container{
        max-width: 1538px !important;
    }
}


/*grid*/

@layer components {
    .container{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.5rem;
    }
    .container>*{
        grid-column: 1 / -1;
    }
    .subgrid{
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }
}

body{
    position: relative;
}
.grid-helper{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999999;
    .container{
        height: 100%;
    }
}


/*website scale*/
@media(max-width: 1600px) and (min-width: 1024px){
    html{
        font-size: 80%;
    }
}

@font-face {
    font-family: 'Haskoy';
    src: url('fonts/Haskoy-variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal italic;
    font-display: swap;
}

body{
    font-family: Haskoy;
    cursor: default;
}

/*font-style: normal;*/
/*font-weight: 400;*/
/*line-height: 130%; !* 2.6rem *!*/

/* font size classes*/
.text-sm{
    font-size: var(--typeface-size-sm);
}
.text-md{
    font-size: var(--typeface-size-md);
}
.text-lg{
    font-size: var(--typeface-size-lg);
}
.text-xl{
    font-size: var(--typeface-size-xl);
}
.text-2xl{
    font-size: var(--typeface-size-2xl);
}
.text-3xl{
    font-size: var(--typeface-size-3xl);
}
.text-4xl{
    font-size: var(--typeface-size-4xl);
}

/*letter spacing*/

.text-is-spaced{
    letter-spacing: 1.28px;
}

/*color classes*/

.color-electric-indigo{
    color: var(--electric-indigo);
}
.color-deep-purple{
    color: var(--deep-purple);
}
.color-velvet-black{
    color: var(--velvet-black);
}
.color-midnight-black{
    color: var(--midnight-black);
}
.color-dark-grey{
    color: var(--dark-grey);
}
.color-light-grey{
    color: var(--light-grey);
}
.color-silk-white{
    color: var(--silk-white);
}
.color-pure-white{
    color: var(--pure-white);
}

/*colors hover*/

.hover-color-electric-indigo:hover {
    color: var(--electric-indigo);
}
.hover-color-deep-purple:hover {
    color: var(--deep-purple);
}
.hover-color-velvet-black:hover {
    color: var(--velvet-black);
}
.hover-color-midnight-black:hover {
    color: var(--midnight-black);
}
.hover-color-dark-grey:hover {
    color: var(--dark-grey);
}
.hover-color-light-grey:hover {
    color: var(--light-grey);
}
.hover-color-silk-white:hover {
    color: var(--silk-white);
}
.hover-color-pure-white:hover {
    color: var(--pure-white);
}

/*--------------*/
*{
    text-underline-offset: 7px;
}

*{
    scroll-padding-top: 120px;
}

button{
    cursor: pointer;
}

@media(min-width: 1024px) and (max-width: 1215px){
    .container{
        max-width: 1000px;
    }
}

.l-external-container{
    max-width: 100% !important;
}

a, button{
    transition: 0.3s;
}

@media(max-width: 1023px){
    .container{
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

body.page-is-dark{
    background-color: var(--midnight-black);
}

.content a{
    text-decoration: underline;
}