@import 'speedee.css';

body {
  margin: 0;
  font-family: Speedee, "Noto Sans", serif !important;
  color: #292929;
  display: initial;
  background: white;
  border: 10px solid red !important;
}

.button {
  /* display: inline-block;
  border: none;
  padding: .8125rem 1.5625rem;
  border-radius: .25rem;
  margin: 0;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background 250ms ease-in-out, transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none; */
  position: relative;
  padding: clamp(14px, 2vh, 40px) clamp(0px, 5vw, 10px);
  margin: 0.4em 0;
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #b80404;
  background: linear-gradient(0deg, #5b1815 0%, #730f0f 50%, #b80404 100%); 
  border: 2.5px solid var(--colors-cta-border);
  border-radius: 20px 0 20px 0;
}

.button > * {
  font-size: clamp(1.1rem, 4vmin, 36px);
  color: var(--colors-fg);
}

.button a {
  text-decoration: none;
  background: none;
  color: #fff;
  font-weight: bolder;
}

.button:focus {
  outline: 1px solid var(--colors-fg);
  outline-offset: -0.25rem;
}

.button:active {
  transform: scale(0.99);
}

.button--primary {
background: #f6bd44;
color: #272727;
}

.button--primary:hover,
.button--primary:focus {
  background: #f4ac13;
}

body {
    margin: 0;
    font-family: Speedee, "Noto Sans", serif;
    color: #292929;
    display: initial;
    background: white;
  }
  body > div {
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    
    > * {
      flex: 1 0 auto;
    }
  }
  #root {
    display:none;
    visibility: hidden;
  }
  header {
    background-color: #292929;
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding: 0.75rem 2rem;
  }
  header .logo svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  div.main {
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 2rem;
    height: 100vh;
    background: url("../media/global/img/backgrounds/Background-compressed.png") no-repeat 50% 50%;
    color: var(--colors-fg);
    font-family: "Speedee", "Noto Sans", sans-serif;
  }

  main .noscript-content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
  }

  p {
    text-align: left;
  }

  h1, h2 {
    text-align: left;
    margin: 0;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h2:last-of-type {
    margin-block-end: 2rem;
  }