@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Lato:wght@300&family=Roboto+Mono:wght@400&family=Roboto:wght@300&display=swap");

body {
  max-width: 1500px;
  margin: 0 auto !important;
  float: none !important;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
}


@media (prefers-color-scheme: light) {
	body {
		background-color: #f5f5f5;
		color: #222;
	}
  a,a:hover {
    color: #0d6efd;
  }
  .hover-underline-animation:after {
    background-color: #0d6efd;
  }
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #222831;
		color: #DDDDDD;
	}
  a,a:hover {
    color: #ffd800;
  }
  .hover-underline-animation:after {
    background-color: #ffd800;
  }
}


.code {
  font-family: "Roboto Mono", monospace;
  font-weight: 300;
  font-size: 1.1rem;
}

a {
  text-decoration: none !important;
}

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline:none;
  box-shadow:none;
}

.form-check-input:focus, .form-check-input:active:focus, .form-check-input.active:focus{
  outline:none;
  box-shadow:none;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}