:root {
  --maincolor-gradient: linear-gradient(
    90deg,
    var(--maincolor-blue),
    var(--maincolor-purple),
    var(--maincolor-blue)
  );
  --maincolor-blue: #194bb3;
  --maincolor-purple: #5602c7;
  --contrastcolor: #e08c43;
  --contrastcolor-light: #d69d6b;
  --premiocolor: #29a58d;
  --maingrey: #222222;
  --secondgrey: #333333;
  --thirdgrey: #111111;
  --forthgrey: #444444;
  --mainwhite: #ededed;
  --secondwhite: #e0e0e0;
  --thirdwhite: #c3c3c3;
  --forthwhite: #f9f9f9;

  --backgroundcolor: var(--maingrey);
  --secondbackgroundcolor: var(--secondgrey);
  --thirdbackgroundcolor: var(--thirdgrey);
  --forthbackgroundcolor: var(--forthgrey);
  --fontcolor: var(--mainwhite);
  --secondfontcolor: var(--thirdwhite);

  --bakawecolor: #0982f3;
  --urlcolor: #3193ef;

  color-scheme: dark;
}

.light {
  --backgroundcolor: var(--mainwhite);
  --secondbackgroundcolor: var(--secondwhite);
  --thirdbackgroundcolor: var(--thirdwhite);
  --forthbackgroundcolor: var(--forthwhite);
  --fontcolor: var(--maingrey);
  --secondfontcolor: var(--forthgrey);

  --urlcolor: #0564bc;

  color-scheme: light;
}

* {
  font-family: Raleway, sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--backgroundcolor);
  color: var(--fontcolor);
  transition: 0.3s ease-in-out;
}

a {
  color: var(--urlcolor);
  text-decoration: none;
  outline: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

#mainHeadline {
  text-align: center;
  font-size: 2em;
  text-shadow: 2px 2px 20px black;
  padding: 0px 15px;
}

.premio {
  color: var(--premiocolor);
  letter-spacing: 1px;
  user-select: none;
}

.plvBtn {
  display: block;
  align-self: flex-start;
  text-align: center;
  padding: 5px 12px;
  margin: 10px;
  background-color: var(--forthbackgroundcolor);
  color: var(--fontcolor);
  border: 2px solid var(--thirdbackgroundcolor);
  border-radius: 4px;
  font-size: 0.85em;
  letter-spacing: 1px;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.6);
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
  transition: 0.1s;
}
.plvBtn.lightdanger {
  border: 2px solid red;
}
.plvBtn.danger {
  background-color: red;
  color: white;
  border: 2px solid darkred;
}
.plvBtn.premio {
  border: 2px solid var(--premiocolor);
}
.plvBtn:hover,
.plvBtn:focus {
  scale: 1.1;
  border: 2px solid var(--contrastcolor);
}
.plvBtn:active {
  scale: 0.8;
  border: 2px solid var(--maincolor-blue);
}
.plvBtn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  scale: 1;
  border: 2px solid var(--thirdbackgroundcolor);
}

/* switch */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 25.5px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--thirdbackgroundcolor);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 45px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 19.5px;
  width: 19.5px;
  left: 3px;
  bottom: 3px;
  background-color: var(--mainwhite);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.switchInput:checked + .slider {
  background-color: var(--maincolor-blue);
}
.switchInput:focus + .slider {
  box-shadow: 0 0 2px 2px var(--maincolor-purple);
}
.switchInput:checked + .slider:before {
  -webkit-transform: translateX(19.5px);
  -ms-transform: translateX(19.5px);
  transform: translateX(19.5px);
}

.switch input:disabled ~ .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.plvVerifiedAccount {
  height: 18px;
  width: 18px;
  margin-left: 4px;
  position: absolute;
  margin-top: 3px;
}

/* fonts */
@font-face {
  font-family: "Raleway";
  src: url("https://per-la-vita.de/src/fonts/Raleway/Raleway-VariableFont_wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Raleway";
  src: url("https://per-la-vita.de/src/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src: url("https://per-la-vita.de/src/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("https://per-la-vita.de/src/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: italic;
}