:root {
  --color: #ffffff;
  --background-color: #000000;

  --accent-color: #3280e8;
  --accent-color-contrast: #ffffff;
}

html {
  background-color: var(--background-color);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(
    --background-color
  ); /* wird von "background:" überschrieben, daher nochmal im "html {}" */
  color: var(--color);
  margin: 0px;
  padding: 0px;
  font-size: 22px;

  min-height: 100vh;
  background: radial-gradient(
    circle,
    rgb(145, 12, 70) 0%,
    rgb(5, 54, 111) 100%
  );
  background-size: 200% 200%; /* Größe des Hintergrunds für den Übergang festgelegt */

  /* animation: gradientAnimation 20s ease infinite; */ /* braucht viel leistung */
}

main {
  --padding_top_bottom: 30px;
  --padding_left_right: 20px;
  padding: max(env(safe-area-inset-top), var(--padding_top_bottom))
    max(env(safe-area-inset-right), var(--padding_left_right))
    max(env(safe-area-inset-bottom), var(--padding_top_bottom))
    max(env(safe-area-inset-left), var(--padding_left_right));

  max-width: calc(900px - 2 * var(--padding_left_right));
  margin: 0 auto; /* Vertikal Zentrieren */
  box-sizing: border-box; /* Bezieht Padding in die Breite mit ein */
}

@media (max-width: 900px) {
  body {
    font-size: 20px;

    /* animation: gradientAnimation_phone 20s ease infinite; */ /* braucht viel leistung */
  }
  h1 {
    font-size: 36px;
  }
}

button {
  font-size: 20px;
  padding: 10px 16px;
  margin: 8px 8px 8px 0px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background-color: var(--accent-color);
  color: var(--accent-color-contrast);
  font-weight: bold;
}
button {
  touch-action: manipulation;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientAnimation_phone {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

input[type="text"],
input[type="password"],
input[type="file"],
input[type="number"],
input[type="search"],
input[type="email"],
textarea {
  resize: none;
  width: 300px;
  width: calc(300px - 16px - 4px); /* padding: 2x8=16; border: 2x2=4*/

  padding: 8px;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: 2px solid var(--color);
}

@media screen and (max-width: 800px) {
  input[type="text"],
  input[type="password"],
  input[type="file"],
  input[type="number"],
  input[type="search"],
  input[type="email"],
  textarea {
    width: 100%;
    width: calc(100% - 16px - 4px); /* padding: 2x8=16; border: 2x2=4*/
  }
}

a {
  color: orange;
}