/* general html */

.i18n {
  display: contents;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

html {

  background-color: var(--HTML_BG);
  color: var(--text);
  font-family: var(--font-body);
  width: 100%;
  height: auto;
}

@keyframes fadeInFromBottom {

  /* load in animation */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

mark {
  color: var(--HTML_BG);
  background-color: var(--nav-a-hover_BG);
}

hr {
  border-color: var(--hr);
  border-style: solid;
  height: 0%;
  width: 100%;
}

/*To be able to add hidden-link to h1-h5*/

h1,
h2,
h3,
h4,
h5,
.hidden-link {
  display: inline;
}

.hidden-link {
  display: none;
  position: absolute;
  padding-left: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
:hover+.hidden-link,
.hidden-link:hover {
  display: inline;
}


a[href] {
  color: var(--aqua);
  /* link color */
  color: var(--a-href);
  overflow-wrap: break-word;
  /* fixes long links overflowing */
}

a[href]:hover {
  color: var(--a-href-hover);
}

a:focus {
  outline: 2px solid var(--nord10);
  /* outline when tab is pressed */
}

footer {
  padding: 10px;
  text-align: center;
  justify-content: center;
  /* to fix the tab selection */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

footer>a {
  text-decoration: none;
  /* for tab selection */
  width: 88px;
  height: 31px;
}

/* navegation bar */

nav {
  text-align: center;
  justify-content: center;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInFromBottom 500ms ease forwards;
}

nav>a {
  background-color: var(--card_BG);
  box-shadow: 4px 4px 2px 1px var(--gray1);
  text-decoration: none;
  padding: var(--spacing-md) var(--spacing-xl);
  margin: var(--spacing-sm);
  margin-top: 0%;
  border-radius: var(--radius-sm);
  transition: background-color 300ms;
}

nav>a>span {
  color: var(--text);
}

nav>a.current {
  background-color: var(--nav-a-current_BG);
}

nav>a:hover {
  background-color: var(--nav-a-hover_BG);
  transition: 200ms;
}

nav>a:hover>span {
  color: var(--nav-a-hover-span_color);
}

/* button */

button {
  background-color: var(--button_BG);
  border: 2px solid var(--button_border);
  color: var(--button_color);
  box-shadow: 4px 4px 2px 1px var(--gray1);
  margin: var(--spacing-sm);
  padding: var(--spacing-lg);
  margin-top: 0%;
  border-radius: var(--radius-full);
  transition: background-color 0.3s;
}

nav>a:active,
button:active {
  transform: scale(1.2);
  transition: 100ms;
}

button:hover {
  border: 2px solid var(--btn-hover_border);
  background-color: var(--btn-hover_BG);
  color: var(--btn-hover_color);
  transition: 200ms;
}

img {
  max-width: 18rem;
  height: auto;
}

input {
  appearance: none;
  vertical-align: middle;
  outline: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--nav-a-hover_BG);
  border-color: var(--nav-a-hover_BG);
  border-radius: 4px;
  transition: background-color 0.3s, border-color 0.3s;
}

input[type="radio"] {
  border-radius: 50%;
}

input:checked {
  background-color: var(--nav-a-hover_BG);
}

/* divs classes */

.progress-bar {
  width: 100%;
  height: 1rem;
  background-color: var(--white);
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: var(--green);
  width: 0%;
  transition: width 0.5s ease;
}

.img-88x31 {
  box-shadow: 2px 2px 2px 1px var(--gray1);
  image-rendering: pixelated;
  width: 88px;
  height: 31px;
}

.img-88x31:hover {
  transform: scale(2);
  transition: 200ms;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 60rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInFromBottom 500ms ease forwards;
}

.max-width {
  min-width: calc(70% + 3rem);
  max-width: max-content !important;
}

.card {
  background-color: var(--card_BG);
  box-shadow: 4px 4px 2px 1px var(--gray1);
  padding: var(--spacing-md);
  margin: var(--spacing-md);
  border-radius: var(--radius-md);
  min-width: 20rem;
  max-width: 20rem;
}

.card>p {
  margin-bottom: 1rem;
  /*adds space in between paragraphs ''*/
}

.card>img {
  padding: 10px;
  /*adds space in between card and image*/
  display: grid;
  /*centers image*/
  margin-left: auto;
  /*centers image, needs grid*/
  margin-right: auto;
  /*centers image, needs grid*/

}

.grid>.card {
  /*Fixes text alignent with images on cards*/
  display: grid;
}

#blog .card {
  display: block;
  width: 20rem;
}

#themeButton {
  /*for the moon/sun icon width*/
  white-space: pre;
  font-size: 1.1rem;
}

#filter-checks {
  display: inline-block;
}

#filter-checks label {
  display: inline-flex;
  line-height: 1.4;
  margin-right: 5px;
}

@media (max-width: 600px) {
  .row {
    display: flex !important;
    flex-wrap: wrap;
  }

  .row>* {
    width: 50%;
    box-sizing: border-box;
  }
}

.center {
  margin-top: auto;
  text-align: center;
}

.justify {
  text-align: justify;
}

.column {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--HTML_BG);
}

::-webkit-scrollbar-thumb {
  background: var(--button_BG);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--btn-hover_color);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--button_BG) var(--HTML_BG);
}


/*resonsiveness on mobile*/

@media screen and (max-width: 670px) {
  nav>a {
    width: calc(50% + 3rem);
  }

  .blog {
    min-width: calc(70% + 3rem) !important;
    max-width: calc(70% + 3rem) !important;
  }

  .card {
    min-width: calc(70% + 3rem);
    max-width: calc(70% + 3rem);
  }

  img {
    max-width: calc(70% + 3rem);
  }

  .img-88x31:hover {
    transform: scale(1);
  }

  #filter-checks label {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    width: 45%;
  }
}

.pixelify-sans-a {
  font-family: var(--font-display);

  font-size: 1.2em;
  /* Increase the text size */
  font-weight: 700;
  font-style: normal;
}