@font-face {
  font-family: 'Bebas Neue';
  src: url('/user/themes/quark/fonts/BebasNeue-Regular.woff2') format('woff2'),
       url('/user/themes/quark/fonts/BebasNeue-Regular.woff') format('woff'),
       url('/user/themes/quark/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Teko';
  src: url('/user/themes/quark/fonts/Teko-Variable.woff2') format('woff2'),
       url('/user/themes/quark/fonts/Teko-Variable.woff') format('woff'),
       url('/user/themes/quark/fonts/Teko-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: Teko, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    text-transform: uppercase;
    margin-top: 3rem;
    margin-bottom: 0.1em;
}


/******************************************************************************
*                                                                             *
*                             FONT SIZES                                      *
*                                                                             *
* These all MUST be defined under mobile-first media queries; the theme       *
* seems to not do a good job, natively, of scaling font sizes with viewport   *
* dimensions.                                                                 *
*                                                                             *
******************************************************************************/

@media only screen {

    body section.container p {
        font-size: 1em;
    }

    body section.container h1 {
        font-size: 3em;
    }

    body section.container h2 {
        font-size: 2.2em;
    }

    #home-hero-and {
        font-size: 1.5em;
        margin-top: -0.6em;
    }

    #home-hero-bullets {
        font-size: 1.2em;
    }

}

@media only screen and (min-width: 320px) {

    body section.container p {
        font-size: 1.4em;
    }

    body section.container h1 {
        font-size: 5em;
    }

    body section.container h2 {
        font-size: 2.5em;
    }

    #home-hero-and {
        font-size: 1.5em;
        margin-top: -0.6em;
    }

    #home-hero-bullets {
        font-size: 1.3em;
    }

}

@media only screen and (min-width: 650px) {

    body section.container p {
        font-size: 1.2em;
    }

    body section.container h1 {
        font-size: 7em;
    }

    body section.container h2 {
        font-size: 3.5em;
    }

    #home-hero-and {
        font-size: 2em;
        margin-top: -1em;
    }

    #home-hero-bullets {
        font-size: 1.5em;
    }

}


/******************************************************************************
*                                                                             *
*                           EVERYTHING ELSE                                   *
*                                                                             *
******************************************************************************/

#header {
    background: #a9d8f0 !important;
  	height: 8rem;
  	font-size: 1rem;
}

#header section.navbar-section {
  	height: 8rem;
}

#header nav.navbar a.navbar-brand img {
    position: absolute;
    top: 1rem;
    height: 70%;
}

.mobile-menu .button_container {
	top: 3.4rem;
  	right: 1.5rem;
}

body.header-fixed.header-animated #header.scrolled .logo img, body.header-fixed.header-animated #header.scrolled .logo svg {
    top: 0.4em;
}

/*
.hero #to-start {
    display: none;
}
*/

#top section.hero {
    /*
    background-image: linear-gradient(56deg, rgba(43, 46, 224, 0.15) 0%,rgba(26, 218, 182, 0.15) 100%),linear-gradient(336deg, rgb(50, 52, 221),rgb(60, 239, 241));
    */
    /*
    background-image: linear-gradient(306deg, rgba(54, 54, 54, 0.05) 0%, rgba(54, 54, 54, 0.05) 33.333%,rgba(85, 85, 85, 0.05) 33.333%, rgba(85, 85, 85, 0.05) 66.666%,rgba(255, 255, 255, 0.05) 66.666%, rgba(255, 255, 255, 0.05) 99.999%),linear-gradient(353deg, rgba(81, 81, 81, 0.05) 0%, rgba(81, 81, 81, 0.05) 33.333%,rgba(238, 238, 238, 0.05) 33.333%, rgba(238, 238, 238, 0.05) 66.666%,rgba(32, 32, 32, 0.05) 66.666%, rgba(32, 32, 32, 0.05) 99.999%),linear-gradient(140deg, rgba(192, 192, 192, 0.05) 0%, rgba(192, 192, 192, 0.05) 33.333%,rgba(109, 109, 109, 0.05) 33.333%, rgba(109, 109, 109, 0.05) 66.666%,rgba(30, 30, 30, 0.05) 66.666%, rgba(30, 30, 30, 0.05) 99.999%),linear-gradient(189deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 33.333%,rgba(55, 55, 55, 0.05) 33.333%, rgba(55, 55, 55, 0.05) 66.666%,rgba(145, 145, 145, 0.05) 66.666%, rgba(145, 145, 145, 0.05) 99.999%),linear-gradient(90deg, rgb(9, 201, 186),rgb(18, 131, 221))
    */
    /*background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);*/
    /*
    background-color: #a9d8f0;
    */
    /* padding-bottom: 4rem; */
  	background-color: #f8f9fa !important;
}

#top section.hero section.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left !important;
}

#top section.hero section.container > div:nth-child(1) {
    flex: 1;
}

#top section.hero section.container > img.hero-image {
    flex: 0.75;
    box-shadow: 5px 5px 12px #292929;
}

#home-donate-top {
    margin-top: 2.2em;
    color: white;
    text-align: center;
    margin-bottom: 2.2em;
}

#home-donate-top a.button {
    padding: 0.7rem 2rem;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 0.2em;
    background-color: #481ac9;
    color: white;
    border: 1px solid transparent;
    height: auto;
}

#home-donate-top a.button b {
    font-weight: bolder;
}

#home-donate-top span {
    font-size: 1.5em;
    margin-left: 0.7em;
    display: inline-block;
    vertical-align: middle;
}

#home-donate-top p {
    margin-top: 2em;
}

#home-page-news + section {
    padding-top: 1rem;
    padding-bottom: 0;
}