:root {
  --blue: #092d9a;
  --bg: #0f0e0e;
}

body {
  font-family: 'Work Sans', sans-serif;
  background-color: var(--bg);
  color: var(--white);
}

.mynavbar {
  backdrop-filter: blur(4px);
}

.mynavbar .navbar-brand {
  font-family: 'Bitcount Grid Single', cursive;
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--blue);
}

.hero {
  min-height: 85vh;
}

.hero h1,
.hero h4 {
  text-shadow: var(--shadow);
}

.hero h1 {
  font-family: 'Bitcount Grid Single', cursive;
  font-size: 6rem;
  color: #66bfe8;
}

.hero h4 {
  font-size: 1.6rem;
}

.hero p {
  font-size: 1.2rem;
}

.hero a {
  color: var(--blue);
  background-color: white;
  box-shadow: var(--shadow);
}

.hero a:hover {
  background-color: var(--blue);
  color: white;
}

footer {
  padding: 3rem;
  background-color: var(--blue);
  color: white;
  padding-bottom: 0.5rem;
  padding-top: 0.7rem;
}

footer a {
  color: #6981ca;
  font-weight: bold;
  text-decoration: none;
}

footer a:hover {
  color: white;
}

/* Media Query */

/* laptop */
@media (max-width: 992px) {
  html {
    font-size: 90%;
  }
}

/* tablet */
@media (max-width: 768px) {
  html {
    font-size: 80%;
  }
}

/* mobile phone */
@media (max-width: 576px) {
  html {
    font-size: 60%;
  }
}