/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */

body {
  font-family: 'Rubik', sans-serif;
  background-color: #192750;
  background-image: asset-url(/assets/background-pattern-header-d8ee5541698939c09904d9815d6b930f3a9af8cff9e60f2b84924876014234ae.svg);
  background-repeat: no-repeat;
  background-position: top center;
  color: white;
}

.btn {
  display: inline-block;
  font-weight: 500;
  font-size: 1.125rem;
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  background-color: #0BA4FF;
  text-transform: uppercase;
}

.text-faded {
  color: #9EAFE2;
}

.input-dark {
  background: #0e1833;
  color: #dde2f4 !important;
  border: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  appearance: none;
  border-radius: 0.375rem;
  width: 100%;
  padding: 1.25rem;
}

.primary-bank {
  color: #253460 !important;
}

.input-dark::placeholder {
  color: #253460 !important;
}

.page {
  position: relative;

  .content {
    z-index: 3;
    position: relative;
    padding-bottom: 200px;
  }

  &::before {
    z-index: 1;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    display: block;
    background: linear-gradient(180deg, #192750 0%, #152146 100%);
  }
  &::after {
    z-index: 2;
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background-color: #192750;
  }
}

.how-does-it-work {
  background-image: asset-url(/assets/background-pattern-small-54705ab1ad3eea7275a80f2499fa1ef85c8d08de5a155cd355b5b1cae2574d45.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 200px;
  line-height: 200px;
}