@font-face {
    font-family: 'GT Flexa';
    src: url('/assets/fonts/GT-Flexa-Expanded-Regular.woff2') format('woff2'),
        url('/assets/fonts/GT-Flexa-Expanded-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Littera Textbook';
    src: url('/assets/fonts/litteratextbook-webfont.woff2') format('woff2'),
        url('/assets/fonts/litteratextbook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html{
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

:root{
    --primary-font-family: 'GT Flexa', helvetica, arial, sans-serif;
    --secondary-font-family: 'Littera Textbook', helvetica, arial, sans-serif;

    --primary-color: #000;
    --secondary-color: #fff;

    --basicfontsize: 1rem;

    --space-s: 1rem;
    --space-m: calc(var(--space-s) * 1.618);
    --space-l: calc(var(--space-m) * 1.618);
    --space-xl: calc(var(--space-l) * 1.618);
    --space-xxl: calc(var(--space-xl) * 1.618);
}

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

/* Remove tap highlight color on iOS devices */
* {
  -webkit-tap-highlight-color: transparent;
}


body{

    background-color: var(--secondary-color);
    color: var(--primary-color);

    font-family: var(--primary-font-family);
    line-height: 1;
    -webkit-font-smoothing: antialiased; /* For Chrome and Safari*/
    -moz-osx-font-smoothing: grayscale; /* For Firefox on Mac*/

    min-height: 100svh;
    display: flex;
    flex-direction: column;

}

body.no-scroll {
    overflow: hidden!important; /* This stops the body from scrolling */
}

main{
    flex: 1;
    background-color: var(--secondary-color);
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

img, video{
    display: block;
    width: 100%;
    height: auto;
}

/* Remove thin video outline on iOS devides*/
@supports (-webkit-touch-callout: none) {
  video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
  }
}

/* Header start */

    #header{
        display: block;
        justify-content: space-between;
        position: relative;
        top: 0;
        z-index: 1000;
        margin-bottom: var(--space-m);
    }

    #header a.logo:hover{
        text-decoration: underline;
    }

    header .nav-menu{
        display: flex;
        flex-direction: row;
        gap: calc(var(--space-s) * 1.618 * 1.618);
    }

    header .nav-menu ul{
        display: flex;
        flex-direction: row;
        gap: var(--space-s);
    }

    header .nav-menu .nav-menu-item a:hover{
        text-decoration: underline;
    }

    header .nav-menu .nav-menu-item a.active{
        text-decoration: underline;
    }

/* Header end */



.footer{
    padding: var(--space-s);
}

.cursor-pointer {
    cursor: pointer;
}


.padding-top-none  { padding-top: 0; }
.padding-top-s     { padding-top: var(--space-s); }
.padding-top-m     { padding-top: var(--space-m); }
.padding-top-l     { padding-top: var(--space-l); }
.padding-top-xl    { padding-top: var(--space-xl); }
.padding-top-xxl   { padding-top: var(--space-xxl); }

.list-block { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.list-vertical { flex-direction: column; }
.list-horizontal { flex-direction: row; }

.list-item-space-none { gap: 0; }
.list-item-space-s { gap: var(--space-s); }
.list-item-space-m { gap: var(--space-m); }
.list-item-space-l { gap: var(--space-l); }
.list-item-space-xl { gap: var(--space-xl); }
.list-item-space-xxl { gap: var(--space-xxl); }

.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.align-items-stretch { align-items: stretch; }

.justify-content-flex-start { justify-content: flex-start; }
.justify-content-flex-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-space-around { justify-content: space-around; }
.justify-content-space-evenly { justify-content: space-evenly; }

.col-gap-none { column-gap: 0; }
.col-gap-s    { column-gap: var(--space-s); }
.col-gap-m    { column-gap: var(--space-m); }
.col-gap-l    { column-gap: var(--space-l); }
.col-gap-xl   { column-gap: var(--space-xl); }
.col-gap-xxl  { column-gap: var(--space-xxl); }

.row-gap-none { row-gap: 0; }
.row-gap-s    { row-gap: var(--space-s); }
.row-gap-m    { row-gap: var(--space-m); }
.row-gap-l    { row-gap: var(--space-l); }
.row-gap-xl   { row-gap: var(--space-xl); }
.row-gap-xxl  { row-gap: var(--space-xxl); }