@charset "UTF-8";

:root {
    --open-sans: 'Open Sans', sans-serif;
    --oswald: 'Oswald', sans-serif;

    --max-width: 1200px;

    /* THEME COLORS */
    --accent-color-1: red;
    --accent-color-2: black;
    --pink-light: #feeaee;
    --pink: #fadce0;

    /* BACKGROUND */
    --background: white;
    --background-alt: linear-gradient(100deg, #b90d07 0%, #168ce3 100%);
    --item-background: white;

    /* HEADER */
    --header-background: linear-gradient(100deg, #7f0002 30%, #0b408e 80%);
    --header-text: aliceblue;
    --header-text-hover: white;

    /* BUTTON COLORS */
    --button-color: red;
    --button-text: white;
    --button-hover-color: black;
    --button-hover-text: white;

    /* FONTS */
    --font-default: "Work Sans", Arial, Helvetica, sans-serif;
    --font-heading: "Work Sans", Impact, Arial, Helvetica, sans-serif;

    /* TEXT COLOR */
    --text-default: #1d1d1d;
    --text-default-dark: white;
    --text-default-link: #87bae4;
    --text-default-link-hover: #ff807c;

    /* FILE UPLOADER */
    --file-uploader-border: var(--pink);
    --file-uploader-border-hover: var(--pink);
    --file-uploader-bg: none;
    --file-uploader-bg-hover: var(--pink);
    --file-uploader-text: #1d1d1d;
    --file-uploader-text-hover: #000;

    /* FORMS */
    --searchbox-background: white;
    --searchbox-border: 1px solid lightgray;
    --searchbox-text: black;
    --input-text-border: #000;

    /* FEATURE CARDS */
    --feature-card-bg: var(--pink);

    /* FOOTER */
    --footer-background: linear-gradient(100deg, #c95758 0%, #64a8e8 50%);
    --footer-text: white;
    --footer-text-hover: rgb(255, 210, 219);
    --footer-text-active: rgb(255, 210, 219);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:hover {
    text-decoration: none !important;
}

body {
    margin: 0;
    font-family: var(--font-default);
    width: 100%;

    /* CUSTOMIZE */
    background: var(--background);
    color: var(--text-default);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    font-weight: bold;
}

a,
.button {
    cursor: pointer;
    text-decoration: none;
}

/* Quick classes */

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}

.u-pull-right {
    float: right;
}

.u-pull-left {
    float: left;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #e1e1e1;
}

hr.spacer {
    border: none;
    margin: 25px;
}

ul {
    margin: 1em;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
  display: inline-block !important;
}

/* DEFAULTS */

#content {
  margin: auto;
  width: 100%;
}

#content p a {
  color: var(--text-default-link);
}

#content p a:hover {
  color: var(--text-default-link-hover);
}

section {
  padding: 50px 30px;
  font-family: var(--font-default);
}

.container {
  width: 100%;
  margin: auto;
  max-width: var(--max-width);
}

.grid,
.list {
  display: grid;
  gap: 15px;
}

.btn {
  border: none;
  width: auto;
  padding: 8px 20px;
  background: var(--button-color);
  border: none;
  font-family: var(--font-heading);
  color: var(--button-text);
  border-radius: 5px;
  transition: all 0.2s;
}

.btn:hover {
  background: var(--button-hover-color);
  color: var(--button-hover-text);
}

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {
  section {
    padding: 50px 20px;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}