@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

body {
  background-color: rgb(22, 22, 22);
}

.navbar {
  background-color: rgb(24, 24, 24);
}

body, .navbar, .title, .subtitle, .content {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
}

a.white-link {
  color: rgb(168, 194, 255);
}

a.white-link:hover {
  color: rgb(105, 150, 255);
}

.box.background-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  padding: 4rem;
  border-radius: 48px;
  font-weight: 500;
}

.box.background-image.robotevents-api {
  background-image: url('screenshots/roboteventsapi.png');
}

.box.background-image.boost {
  background-image: url('screenshots/boost.png');
}

.box.background-image.improved-quizlet {
  background-image: url('screenshots/improvedquizlet.png');
}

.box.background-image.clicker {
  background-image: url('screenshots/clicker.png');
}

.box.background-image.notes {
  background-image: url('screenshots/notes.png');
}

.box.background-image.flip {
  background-image: url('screenshots/flip.png');
}

.box.background-image.ytdl {
  background-image: url('screenshots/ytdl.png');
}