@use "./colors.scss";
@import "https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css";

body {
  font-family: "Noto Sans", "Verdana", sans-serif;
  background-color: colors.$background;
  color: colors.$text;
}

img {
  image-orientation: from-image;
}

a {
  text-decoration-line: underline;
  text-decoration-color: colors.$secondary;
  text-decoration-thickness: .125em;
  color: colors.$text;
}

hr {
  border: 1px solid colors.$highlight;
}

button {
  background-color: colors.$highlight;
  color: colors.$highlight-text;
  border: none;
  height: 2.5em;
  padding: 0.5em;
  border-radius: 0.5em;
  transition-duration: 0.25s;
  font-size: 1em;

  &:hover {
    cursor: pointer;
    background-color: lighten(colors.$highlight, 5%);
  }

  &:active {
    background-color: darken(colors.$highlight, 5%);
  }
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}


.card {
  width: 60%;
  margin: auto;
}

@media (max-width: 500px) {
  .card {
    width: 100%;
  }
}

@media (min-width: 500px) and (max-width: 1000px) {
  .card {
    width: 75%;
  }
}