/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

live-component {
  display: contents;
}

body {
  color: #FFF;
  background-color: #000;
  font-family: monospace;
  margin: 0;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.75rem;
}

.mb-3 {
  margin-bottom: 1.25rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.w-full {
  width: 100%;
}

a:hover {
  text-decoration: underline;
}

.Layout {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  height: 100%;
}

.Row {
  display: flex;
  justify-content: center;
  color: #FFF;
}

.Container {
  display: flex;
  padding: 0 25px 0 25px;
}

.Container--center {
  justify-content: center;
}

@media (max-width: 419px) {
  .Container {
    width: 100%;
  }
}

@media (min-width: 420px) {
  .Container {
    width: 420px;
  }
}

@media (max-width: 767px) {
  .Container {
    width: 767px;
  }
}

@media (min-width: 768px) {
  .Container {
    width: 768px;
  }
}

@media (min-width: 1024px) {
  .Container {
    width: 1024px;
  }
}

.Container--lg {
  max-width: 1012px;
}

.Container--md {
  max-width: 768px;
}

.Container--sm {
  max-width: 544px;
}

.Header {
  padding: 20px 0 20px 0;
}

.Footer {
  padding: 50px 0 50px 0;
  color: #666;
  font-size: 14px;
}

.Footer a {
  color: #666;
}

.Footer .FooterHeading {
  color: #6a6ad1;
}

.Nav {
  display: flex;
  width: 100%;
}

.Nav * {
  color: #FFF;
}

.NavItems {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.NavItem {
  font-size: 15px;
}

.FormLabel {
  font-size: 18px;
}

.TextField {
  font-size: 0.875rem;
  line-height: 1.4285;
  border-radius: 0.375rem;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color, background-color, box-shadow, border-color;
  padding-inline: 0.5rem;
  padding-block: 0.375rem;
  border: 0.0625rem solid #d1d9e0;
  outline: none;
  color: #FFF;
  background-color: #000;

  &:focus-visible {
    border-color: #6a6ad1;
  }
}

.Button--link {
  text-decoration: none;
  border: 0;
  background-color: transparent;
  color: #FFF;
  cursor: pointer;
  font-family: monospace;
  font-size: 15px;

  &:hover {
    text-decoration: underline;
  }
}