/* Colors */

:root {

    --sitewidth: 47rem;

    --color-main-1: #1F2125;
    --color-main-2: #343A49;
    --color-main-3: #E2E2E2;
    --color-main-4: #FFFFFF;

    --color-accent-1: #66c6f3;
    --color-accent-1-darker: #517ddb;
    --color-accent-1-darkest: #2458c9;
    --color-accent-1-darkest-h2: #3468d6;

    --color-accent-2: #e9e9e7;
    --color-accent-2-darker: hsl(202, 22%, 17%);
    --color-accent-2-lighter: hsl(202, 22%, 37%);
    --color-accent-2-lightest: #c8d0d4;

    --footer-height: 3em;
    --background-gradient: linear-gradient(to right, var(--color-accent-1), var(--color-accent-1-darkest-h2), var(--color-accent-1));
  }

/* Fonts */

body {
  font-family: 'barlowlight', Helvetica, sans-serif;
}

body p {
    font-size: 1.1rem;
}

body h4, body h5 {
  font-family: 'barlow', Helvetica, sans-serif;
}

@font-face {
  font-family: 'barlow';
  src: url('/assets/fonts/Barlow-Medium.otf');
}

@font-face {
  font-family: 'barlowlight';
  src: url('/assets/fonts/Barlow-Light.otf');
}

    /* H's */

    h1{
        font-size: 6rem;
        font-family: 'Courgette';
        color: var(--color-main-4);
        transform: rotate(-2.5deg);
        text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
        text-align: center;
    }

    h2 {
        font-family: 'Courgette';
        font-size: 3rem;
        text-align: center;
        transform: rotate(-1deg);

        background: var(--background-gradient);
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
    }

    h3 {
        font-family: 'Courgette';
        font-size: 1.5rem;
        color: var(--color-main-1);
        text-align: center;
    }


/*elements*/

video {
    width: 100%;
    margin-bottom: 3em;
    border-radius: 15px;
}

.column {
    float: left;
    width: 33.33%;
}
    /* column Links */
    .column a {
        text-decoration: none;
        color: var(--color-main-1);
    }

    .column a:hover, .column a:focus {
        color: var(--color-accent-1-darkest);
    }

.grey-background {
    background-color: var(--color-main-3);
    margin-left: calc(100vh - 57rem / 2);
    margin-right: calc(100vh - 57rem / 2);
}