@font-face {
  font-family: "Rokkitt-Thin";
  src: local("Rokkitt-Thin"), url("../Assets/Fonts/Rokkitt-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Rokkitt-Light";
  src: local("Rokkitt-Light"), url("../Assets/Fonts/Rokkitt-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Rokkitt-Medium";
  src: local("Rokkitt-Medium"), url("../Assets/Fonts/Rokkitt-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Rokkitt-Regular";
  src: local("Rokkitt-Regular"), url("../Assets/Fonts/Rokkitt-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rokkitt-SemiBold";
  src: local("Rokkitt-SemiBold"), url("../Assets/Fonts/Rokkitt-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Rokkitt-Bold";
  src: local("Rokkitt-Bold"), url("../Assets/Fonts/Rokkitt-Bold.ttf") format("truetype");
}

:root {
  --input-shadow: #90cef1;
}

.transition {
  transition-duration: 300ms;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, visibility, height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.highlight::after { 
  content: '';
  display: block;
  margin-top: .3125rem;
  height: .1875rem;
  width: 1.875rem;
  background-color: var(--bluebird);
}

.glow:focus {
  background-color: var(--sky);
  color: var(--evergreen);
  outline: none;
  box-shadow: 0 0 0.5rem 0 var(--input-shadow);
}

::-webkit-scrollbar {
  width: .625rem;
}

::-webkit-scrollbar-track {
  background-color: var(--cloud);
  border-radius: .625rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--slate);
  border-radius: .625rem;
}

.app {
  position: relative;
  min-height: 100vh;
  padding-bottom: 4rem;
}

.transition {
  transition-duration: .3s;
  transition-property: background-color,opacity,box-shadow;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.py-3 {
  padding-bottom: 1rem!important;
  padding-top: 1rem!important;
}

.px-3 {
  padding-left: 1rem!important;
  padding-right: 1rem!important;
}

a {
  color: #0d6efd;
  color: var(--bs-link-color);
  text-decoration: underline;
}