@font-face {
  font-family: 'Inter';
  src: url('../../assets/fonts/inter/Inter-Regular.ttf');
}

@font-face {
  font-family: 'InterThin';
  src: url('../../assets/fonts/inter/Inter-Thin.ttf');
}

p, h1, h2, h3 {
	font-family: inter;
	color: white;
}

/* center it */
h1 {
  margin-top: 50px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;

}

.list {
  background-color: hsl(266, 0%, 16%);
  border-radius: 15px;
  margin: auto;
  margin-top: 0;
  width: 80%;
  padding: 5px;
  padding-bottom: 10px;
}

.listOption {
  background-color: hsl(267, 0%, 20%);
  border-radius: 15px;
  padding: 5px;
  margin: auto;
  margin-top: 10px;
  width: 95%;
  height: 48px;
  display: flex;
  box-shadow: 0px 0px 20px #00000030;
  transition-duration: 0.2s;
}

.listOptionText {
  text-align: left;
  margin-top: -10px;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
}

.listOption:hover {
  scale: 1.02;
  background-color: hsl(267, 0%, 22%);
}

.listOption:active {
  scale: 0.99;
  background-color: hsl(268, 0%, 19%);
}

.mini {
  margin-top: -12px;
  font-size: 10px;
}