/* Sve za Požegu! */
/* Root */
@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&display=swap");
:root {
  color-scheme: light dark;
  --theme: light-dark(#0362FA, #FFFFFF);
  --background: light-dark(#C0D8FE, #01193F);
  --text: light-dark(#01193F, #C0D8FE);
}

/* Page */
html {
  touch-action: pan-y;
  overflow-y: auto;
  overscroll-behavior: none;
}
body {
  background: var(--background);
  margin: 2.5rem 0 2.5rem 0;

  color: var(--text);
  text-align: center;
  font-family: "Varela Round", "Chiron GoRound TC", "Arial Rounded MT Bold", system-ui;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
div {
  display: flex;
  flex-direction: column;
  place-items: center;
}
div > p, a, button, input, .text {
  width: 65%;
  margin: 0.25rem;
  padding: 0.65rem;
}
.horizontal {
  flex-direction: row;
  gap: 0.5rem;
}
.text {
  display: inline;
}
.text > * {
  display: inline;
  margin: 0px;
  padding: 0px;

  background: none;

  color: var(--text);
}
.text > a {
  text-decoration: underline;
}

/* Text */
p {
  text-align: justify;
  hyphens: auto;
}
h1 {
  color: var(--theme);
  font-size: 3rem;
}

/* Icons */
img {
  width: 5rem;
  
  content: url(https://assets.sp-here.com/images/sphere/default.svg);
  @media (prefers-color-scheme: dark) {
    filter: brightness(0) invert(1);
  }
}
.icon {
  width: 5rem;
  height: auto;

  stroke: var(--theme);
}

/* Interaction */
a, button {
  display: flex;
  gap: 0.5rem;

  background: var(--text);
  border: none;
  border-radius: 15px;

  color: var(--background);
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
input {
  width: calc(65% - 6px);

  background: var(--background);
  border: solid var(--text);
  border-radius: 15px;
  outline: none;

  color: var(--text);
  font-size: inherit;
  font-family: inherit;
}
input::placeholder {
  color: var(--text);
}