body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'MuseoModerno', sans-serif;
}

.hero-section {
    height: 70vh;
    background: linear-gradient(to right, #007bff, #00c6ff);
    color: white;
    text-shadow: 1px 1px 2px black;
}

.subject-card {
    color: var(--warning);
    background-color: var(--grey-darker);
    border-top: 1px solid var(--grey);
    border-left: 1px solid var(--grey);
    box-shadow: 10px 10px 10px var(--grey);
    border-radius: var(--bs-border-radius);
    padding: 3px;
    cursor: pointer;
    transition: all .5s;
}

.about-card{ 
  color: var(--white);
  background-color: var(--dark-background);
}

.about-card :hover{
  color: var(--soft-blue);
  border-color: var(--flat-blue);
}

.neon-button {
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  background-color: #000;
  border: 4px solid  var(--soft-blue);
  border-radius: 8px;
  /* box-shadow:
  0 0 5px #0ff,
  0 0 10px #0ff,
  0 0 20px #0ff,
  0 0 40px #0ff; */
  transition: all 0.3s ease;
}

.form-control {
    box-shadow: none !important;
    border: 1px solid var(--flat-blue);
}