article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    outline: none;
}

audio, canvas, video {
    display: inline-block;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: #161616;
    font-family: Campton, Arial, sans-serif;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

p {
    margin: 0;
}

#root {
    max-width: 90rem;
    margin: 0 auto;
}

:root {
  --brand-red: #ff2211;
  --brand-red-darken: #88120a;
  --background-black: #161616;
  --background-grey: #1f1f1f;
  --background-light-grey: #313737;
  --border-color: #3d3d3d;
  --border-color-2: #2c2c2c;
  --scrollbar-width: 4px;
  --page-padding-on-sides: 8.375rem;
}

/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
  width: var(--scrollbar-width); /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  z-index: 100;
  position: absolute;
  background-color: rgba(0,0,0,0);
  -webkit-border-radius: 100px;
  scrollbar-x-position: top;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
  /* This is the EXACT color of Mac OS scrollbars. 
     Yes, I pulled out digital color meter */
  background: var(--brand-red-darken);
  -webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: var(--brand-red); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

/* INPUTS AUTOFILL */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0 1000px #161616 inset;
}

input:-webkit-autofill:active {
  /* Hack from http://stackoverflow.com/a/29350537 */
  transition: background-color 999999s ease-in-out 0s;
}
input:-webkit-autofill {
  /* Expose a hook for JavaScript when autofill is shown
      JavaScript can capture 'animationstart' events.
      Set minimal duration for Safari. */
  animation-name: onAutofillStart;
  animation-duration: 0.01s;
}
input:not(:-webkit-autofill) {
  /* Expose a hook for JS onAutofillCancel
      JavaScript can capture 'animationstart' events.
      Set minimal duration for Safari. */
  animation-name: onAutofillCancel;
  animation-duration: 0.01s;
}

/* Autofill detection workaround
   https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7 */
/* stylelint-disable block-no-empty */
@keyframes onAutofillStart {
    from {}
    to {}
}
 @keyframes onAutofillCancel {
    from {}
    to {}
}

.close-button {
    background: url('./assets/images/clearX.svg') no-repeat center;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.close-button:hover {
    background: url('./assets/images/clearX-red.svg') no-repeat center;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.default-button {
    font-size: 1.375rem;
    width: 100%;
    height: 5rem;
    background-color: var(--brand-red);
    outline: 0;
    border: 0;
    margin-top: 2.5rem;
    color: white;
    cursor: pointer;
}

.default-button:hover {
  background-color: #d81d0e;
}

.default-button--grey {
  background-color: #292929;
}

.default-button--grey:hover {
  background-color: #353535;
}

.Toastify .Toastify__toast-container {
    width: auto;
}

.Toastify .Toastify__toast {
    background: #1f1f1f;
    border: 1px solid white;
}

.page {
    padding: 2.5rem 8.4375rem;
}

.page-header {
    color: var(--brand-red);
    font-size: 3.5rem;
    font-weight: bold;
}

.no-information {
  font-size: 3rem;
  font-weight: 200;
  color: var(--brand-red);
}

@media screen and (min-width: 55rem) and (max-width:90rem) {
    html {
        font-size: .75rem;
    }
    #root {
        margin: 0 4rem;
        max-width: 100%;
    }
    .page {
        padding: 2.5rem 4rem;
    }
}

@media screen and (max-width: 55rem) {
    html {
        font-size: .5rem;
    }
    #root {
        margin: 0 2rem;
    }
    .page {
        padding: 2.5rem 2rem;
    }
    .Toastify .Toastify__toast-container {
        width: calc(100vw - 2rem);
        margin: 1rem;
    }
}

@font-face {
    font-family: 'Campton';
    src: url('./assets/fonts/Campton-Medium/Campton-Medium.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Campton';
    src: url('./assets/fonts/Campton-Light/Campton-Light.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Campton';
    src: url('./assets/fonts/Campton-Bold/Campton-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Campton';
    src: url('./assets/fonts/Campton-SemiBold/Campton-SemiBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Campton';
    src: url('./assets/fonts/Campton-Book/Campton-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}