@font-face {
  font-family: 'Aileron';
  src: url('/fonts/Aileron-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Aileron';
  src: url('/fonts/Aileron-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Aileron';
  src: url('/fonts/Aileron-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* 1. Give the background some depth */
body {
    background-color: #0E1416;
    background-image: radial-gradient(circle at 50% 0%, #162226 0%, #0B1012 100%);
    background-attachment: fixed;
    color: #F2E8CF;
    font-family: "Aileron", sans-serif;
    font-weight: 400;
}

/* 2. Make buttons look like the logo's "hoodie" style */
.btn-primary {
    background-color: #31B9B6;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #0B1012;

    &:hover {
        background-color: #F2E8CF;
        box-shadow: 0 0 15px rgba(49, 185, 182, 0.4);
    }
}

/* 3. Typography */
h1, h2, h3 {
    letter-spacing: -0.5px;
    font-weight: 900;
}

.navbar-brand, .display-1 {
    font-weight: 900;
    letter-spacing: -1px;
}