/*
    * Web Fonts from colophon-foundry.org
    *
    * The fonts included in this stylesheet are subject to the End User License you purchased
    * from Colophon Foundry. The fonts are protected under domestic and international trademark and
    * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
    * distributing this font software.
    *
    * (c) 2023 Colophon Foundry
    *
    * Licenced to Andre Knott, 
    */

    @font-face {
        font-family: 'raisonne-extrabold-pro';
        src: url('../fonts/raisonne/web/pro/raisonne-extrabold-pro.woff2') format('woff2'),
            url('../fonts/raisonne/web/pro/raisonne-extrabold-pro.woff') format('woff'),
            url('../fonts/raisonne/web/pro/raisonne-extrabold-pro.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }


    body {
        background: #151f6d;
        background-image: url("../img/bg-img.png");
        background-repeat: no-repeat, repeat;
        background-position: top, center;
        background-size: 145%;
    }

    h1 {
        font-family: 'raisonne-extrabold-pro', sans-serif;
        font-size: 1.5rem;
        line-height: 1.3;
        color: #FFFFFF;
        margin: 350px 40px 30px 0;
        padding-right: 50px
        /* border: 1px solid white; */
    }

    h1 span.yellow {
        color: #ffc72c;
    }

    p {
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings:"wdth" 100;
        font-size: 0.75rem;
        color: #FFFFFF;
    }

    a.btn-primary {
        font-family: 'raisonne-extrabold-pro', sans-serif;
        font-size: 1.45rem;
        background-color: #81bee8;
        border-radius: 160px;
        margin: 0 0 50px 0;
        padding: 2px 30px;
        line-height: 1.45;
    }
     .btn-primary:visited {
        background-color: #81bee8;
    }

    .no-break {
        display: none;
    }



/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    /* .container { border: 1px solid red; } */
     
    body {
        background-size: 140%;
    }

    h1 {
        font-size: 2rem;
        margin: 400px 40px 50px 0;
    }

    .no-break {
        display: block;
    }

 }

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    /* .container { border: 1px solid yellow; } */

    body {
        background-size: 100%;
    }
    h1 {
        font-size: 2rem;
        margin: 350px 40px 30px 0;
    }

    .no-break {
        display: block;
    }
 }

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    /* .container { border: 1px solid white; } */
    
    body {
        background-size: 78%;
    }
     h1 {
        font-size: 2.2rem;
        margin: 350px 40px 30px 0;
        padding-right: 50px
    }

 }

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    /* .container { border: 1px solid green; } */

    body {
        background-position: top, center;
    }
      h1 {
        font-size: 2.5rem;
        margin: 350px 90px 30px 0;
    }

 }

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    /* .container { border: 1px solid orange; } */

      body {
        background-size: 80%;
        background-position: right top;

    }

     h1 {
        font-size: 2.5rem;
        margin: 550px 190px 30px 0;
    }


 }