* {
  margin: 0;
  padding: 0;

  font-family: "Ubuntu", Helvetica, Arial;
  font-weight: 500;
  color: var(--col-foreground-text);

  z-index: 10;
}

html {
  font-size: 16px;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3rem;
  /*background: repeating-linear-gradient(360deg, var(--col-minimum) 1rem, var(--col-background) 3rem, var(--col-minimum) 5rem);*/
  /*background: repeating-conic-gradient(at -2% 50%, var(--col-minimum) 5deg, var(--col-background) 6deg, var(--col-minimum) 7deg);*/
  /* hintergrundkacheln:
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent),
              url("http://localhost/ressourcen/bilder/hg-tb.png");*/
  /*background-repeat: repeat;*/
  /*background-attachment: fixed;*/

  position: relative;

  background-color: var(--col-minimum);
}

img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

main {
  padding: 2rem 5rem;
  min-height: 31.6rem;
}

kbd {
  &::before {
    content: "[";
  }
  
  &::after {
    content: "]";
  }
}

button {
	background-color: var(--col-foreground);
	color: var(--col-foreground-text);
	padding: 0.7rem;
	border-radius: 0.5rem;
  width: max-content;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  &:hover {
    background-color: var(--col-logo);
    color: var(--col-background);
  }
}


.titel {
  padding: 3rem;
  font-size: 1.7rem;
}

.titel h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: letter-spacing 1s ease-in-out;

  &::after, &::before {
  content: "";
  flex: 1;
  height: 0.2rem;
  background: linear-gradient(90deg, var(--col-border-rainbow));
  }

  &::after {
    transform: scaleX(-1);
  }

  &:hover {
  letter-spacing: 0.5rem;
  }

}

.aktuell {
  position: relative;
  color: inherit;
  text-decoration: underline var(--col-logo);
  font-weight: 700;

  &::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: calc((100% - 1rem) / 2 );
    background: url("https://rosa-vielfalt.at/ressourcen/bilder/stern.svg");
    background-size: 1rem 1rem;
    height: 1rem;
    width: 1rem;
  }

}

.link {
  color: inherit;
  text-decoration: underline var(--col-logo);
  font-weight: 700;

  &:hover {
    color: var(--col-logo);
  }
}

.fehler {
  margin-top: 1rem;
  color: var(--col-foreground-text);
  border-radius: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  font-size: 0.85rem;

  & > p {
    position: relative;
    margin: 0;
    &::before {
      content: '!';
      font-size: 3rem;
      color: var(--col-highlight);
      position: absolute;
      left: -1rem;
      top: 0;
    }
  }
}


@media screen and (max-width: 1000px) {

  main {
    padding: 2rem 0;
  }

}

@media screen and (max-width: 750px) {

  :root {
    font-size: 13px;
  }
	
  body {
    padding: 0;
  }

}