* {
  margin: 0px;
  padding: 0px;
}

/*
body mit Hintergrundbild, was für jede Seite zunächst angezeigt wird.
*/
body {
  background-image: url("../pictures/stage-233085_1920.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: top;
  background-size: cover;
  height: 100vh;
}

/*
main stylt die Anordnung der Elemente auf der Hauptseite.
*/
.main {
  margin-top: 27%;
  text-align: center;
  background-attachment: scroll;
  height: 85vh;
  line-height: 120px;
  background-color: linear-gradient(
    to bottom,
    rgb(59, 56, 56),
    rgb(37, 35, 35)
  );
}

/*
explain stylt die Erklärtexte, die fast auf jeder Seite unten zu sehen sind.
*/
.explain {
  background-attachment: scroll;
  height: 100vh;
  font-size: 28px;
  font-family: "Open Sans", sans-serif;
  padding-top: 1%;
  padding-left: 1%;
  line-height: 65px;
  color: rgb(204, 188, 180);
  background: linear-gradient(to bottom, rgb(117, 112, 112), rgb(37, 35, 35));
  padding-right: 3%;
}

/*
main_DC stylt den Hauptbereich für die Seite "Different Categories".
Hier wird vor allem die Überschrift verändert und Anpassungen an der Größe des Bereichs gemacht.
*/
.main_DC {
  margin-top: 4%;
  text-align: center;
  background-attachment: scroll;
  font-size: 55px;
  font-family: "Open Sans", sans-serif;
  color: rgb(141, 132, 132);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  height: 121vh;
  line-height: 170px;
}

/*
main_TP stylt den Hauptbereich für die Seite "Take Part".
*/
.main_TP {
  height: 100%;
  width: 100%;
  margin-top: 3%;
  background-attachment: scroll;
  color: rgb(204, 188, 180);
  font-size: 35px;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  line-height: 60px;
}

/*
Bereich für Form auf Seite "Take Part".
Die Elemente dieser Form werden könnnen direkt in die Mitte der Seite eingerückt werden.
*/
.headline {
  text-align: center;
  line-height: 55px;
}

/*
Bereich für Form auf Seite "Take Part".
Die Elemente dieser Form werden müssen ein bisschen verschoben werden, um auf der Mitte der Seite zu erscheinen.
*/
.send {
  margin-left: 35%;
}

/*
stats stylt den Hauptbereich für die Seite "statistics", wo die Teilnehmer Namen im Ranking eingefügt werden.
*/
.stats {
  margin-top: 4%;
  text-align: center;
  background-attachment: scroll;
  height: 130vh;
  line-height: 50px;
}

/*
profile stylt den Bereich für Text und Bilder auf der Seitet "profile".
*/
.profile {
  position: absolute;
  margin: 1%;
  text-align: center;
}

/*
impressum stylt das eher angedeutete Impressum und rückt die Schrift ein bisschen ein.
*/
.impressum {
  margin-top: 10%;
  color: rgb(204, 188, 180);
  font-size: 35px;
  height: 100%;
}

/*
coming stylt einen Bereich für Seiten, die noch nicht fertig sind.
*/
.coming {
  margin-top: 15%;
  text-align: center;
  background-attachment: scroll;
  line-height: 150px;
  height: 100vh;
}

/*
Hauptbutton, von dem alle anderen erben.
Dient in der normalen Form vor allem für die "Back" Buttons.
*/
.button_nav {
  width: 300px;
  background-color: rgb(39, 26, 19);
  border: 1px solid;
  color: #ffffff;
  overflow: hidden;
  margin: 0 100px;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  padding: 20px 40px;
  cursor: pointer;
  border-color: black;
  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 50%);
}

/*
Button der Startseite, mit Aufschrift "Weekly Tournament". Nur Farbe verändert.
*/
.button_WK {
  background-color: rgb(39, 27, 21);
}

/*
Button der Startseite, mit Aufschrift "Take Part". Nur Farbe verändert.
*/
.button_TP {
  background-color: rgb(29, 18, 12);
}

/*
Hier Buttons für die Seite "Different Categories". Die Buttons haben alle nur eine leicht andere Farbe für jede Kategorie.
*/
.button_winter {
  background-color: rgb(29, 18, 12);
}

.button_nature {
  background-color: rgb(39, 28, 22);
}

.button_city {
  background-color: rgb(39, 26, 19);
}

.button_animals {
  background-color: rgb(49, 40, 34);
}

.button_archi {
  background-color: rgb(41, 31, 26);
}

.button_spring {
  background-color: rgb(56, 47, 42);
}

/*
Button für das Impressum. Erstreckt sich über die ganze Seite.
*/
.button_IM {
  background-color: rgb(34, 26, 22);
  color: #ffffff;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  border-color: black;
  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 50%);
}

/*
Buttons für die Namen auf der Seite "statistics. Das Erben hat hier nicht so funktioniert, wie ich das wollte, deswegen sind
alle Buttons vorerst mit dem gleichen Code, bis auf die font-size.
button_rank ist für alle Namen ab Platz 4 und die anderen für Platz 1,2 und 3 jeweils.
*/
.button_rank {
  background-color: Transparent;
  border: none;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
  color: rgb(204, 188, 180);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
}

.button_rank1 {
  background-color: Transparent;
  border: none;
  font-size: 50px;
  font-family: "Open Sans", sans-serif;
  color: rgb(204, 188, 180);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
}

.button_rank2 {
  background-color: Transparent;
  border: none;
  font-size: 40px;
  font-family: "Open Sans", sans-serif;
  color: rgb(204, 188, 180);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
}

.button_rank3 {
  background-color: Transparent;
  border: none;
  font-size: 30px;
  font-family: "Open Sans", sans-serif;
  color: rgb(204, 188, 180);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
}

/*
Überschrift 1
*/
h1 {
  color: rgb(141, 132, 132);
  font-size: 70px;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  line-height: 120px;
}

/*
Überschrift 2
*/
h2 {
  line-height: 120px;
  color: rgb(39, 27, 21);
  font-size: 70px;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
}

/*
Ab hier oberes Navigationsmenü als Liste.
*/
ul {
  text-align: right;
  margin-right: 1%;
}

ul li {
  list-style: none;
  display: inline-block;
  margin-top: 1.75%;
}

/*
Style der einzelnen Elemente.
*/
ul li a {
  position: relative;
  text-decoration: none;
  font-size: 16px;
  color: #685050;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  padding: 0 20px;
  transition: 0.5s;
}

/*
Style, wenn über das Element gehovert wird. Mit active hat es leider nicht ganz geklappt, das habe ich noch nicht verstanden.
Farbe wird beim Hovern geändert und eine underline wird mit einer Transition eingeblendet.
*/
ul li a:hover {
  color: #8f7d7d;
}

ul li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  top: 100%;
  left: 0;
  background: #333333;
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: right;
}

ul li a:hover::after,
ul li a:active:after {
  transform: scaleX(1);
  transform-origin: left;
}

ul li a:active {
  color: #6b5e5e;
}

/*
From Text wird immer unter einem Gewinner Bild eingeblendet.
*/
from-text {
  color: rgb(141, 132, 132);
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
}

/*
Ab hier Bereich für alle Weekly-Tournament und alle Kategorien-Seiten, bei der man die Teilnehmer-Bilder sehen kann.
*/

/*
main_WT stylt den Hauptbereich für alle Kategorien. Es wird die Überschrift mit "Winner of last week" geformt und die Einrückung gemacht.
*/
.main_WT {
  margin-top: 5%;
  text-align: center;
  background-attachment: scroll;
  font-size: 55px;
  font-family: "Open Sans", sans-serif;
  color: rgb(141, 132, 132);
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  height: 121vh;
  line-height: 100px;
}

/*
wt_pictures1 ist für das generelle Styling des Bereiches für die Teilnehmer-Bilder zuständig. Vor allem stylt es aber den Erklärtext am Anfang.
*/
.wt_pictures1 {
  text-align: center;
  font-size: 40px;
  padding-top: 1%;
  padding-left: 1%;
  line-height: 65px;
  color: rgb(204, 188, 180);
  background: linear-gradient(to bottom, rgb(107, 105, 105), rgb(37, 35, 35));
  padding-right: 3%;
  line-height: 1.6;
}

/*
Ab hier die Struktur für die eingereichten Texte und Bilder.
*/
.content {
  padding: 20px;
}

.content participant {
  display: flex;
  margin-bottom: 30px;
}

/*
Bereich für das Bild wird eingeschränkt.
*/
.content .participant-image {
  width: 50%;
  height: 50%;
  flex-shrink: 0;
  margin-right: 3%;
}

/*
Das Bild soll eine Border bekommen und sich über die ganze Breite seines Bereiches ausdehnen.
*/
.content .participant-image img {
  position: relative;
  width: 100%;
  height: 100%;
  border: 3%;
}

/*
Ort und Beschreibung bekommen eine feste Länge, damit die Bilder alle ungefähr gleich eingerückt werden.
*/
.content .participant-description {
  text-align: left;
  margin-left: 1%;
  margin-right: 1%;
  color: rgb(204, 188, 180);
  font-size: 40px;
  width: 420px;
  line-height: 1.6;
}

/*
Einsendername wird in die Mitte der Bilder jeweils eingerückt.
*/
.content .from_name {
  margin-left: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 48px;
  color: rgb(141, 132, 132);
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  line-height: 120px;
}

/*
radio stylt den Bereich, in dem die Nutzer voten können.
Es wird eine Border zur besseren Übersicht um den Bereich erstellt.
*/
.radio {
  line-height: 150px;
  color: rgb(39, 27, 21);
  font-size: 60px;
  font-family: "Open Sans", sans-serif;
  text-shadow: 0px 15px 10px rgb(0 0 0 / 20%);

  border-width: 5px;
  border-style: solid;
  box-shadow: 0px 15px 10px rgb(0 0 0 / 20%);
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 3%;
  margin-bottom: 3%;
}

/*
Nur Überschrift "Choose your favorite picture" als kleine Gliederung.
*/
.fav_pic {
  margin-top: 8%;
  margin-bottom: 2%;
  font-size: 55px;
}

/*
Ende Bereich der Weekly Tournament und Kategorien-Seiten.
*/

/*
Wird fast immer überschrieben in meinen Funktionen, aber generell soll die Größe erstmal 40%, 40% sein.
*/
img {
  width: 40%;
  height: 40%;
}

/*
Label mit kleiner Einrückung.
*/
label {
  margin-right: 1%;
  margin-left: 3%;
}

/*
Design von der Trennlinie zur besseren Übersicht der einzelnen Teilnehmer Fotos.
*/
hr {
  border: 0;
  height: 2px;
  margin-bottom: 3%;
  background-color: rgb(141, 132, 132);
}

/*
Design vom Pfeil zur schnelleren Navigation innerhalb einer Seite.
*/
.arrow {
  border: solid rgb(141, 132, 132);
  border-width: 0 8px 8px 0;
  display: inline-block;
  padding: 25px;
  margin-bottom: 1%;
}

/*
Pfeil nach oben.
*/
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/*
Pfeil nach unten.
*/
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*
Inputfelder der Form bekommen andere Schriftgröße und Farbe.
*/
input {
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  color: rgb(141, 132, 132);
  border: 1px solid rgb(141, 132, 132);
  box-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
}

/*
Inputfeld für Bild-Einsenden-Form wird eingerückt.
*/
input[name="name"] {
  margin-left: 91px;
}

/*
Inputfeld für Bild-Einsenden-Form wird eingerückt.
*/
input[name="email"] {
  margin-left: 90px;
}

/*
Inputfeld für Bild-Einsenden-Form wird eingerückt.
*/
input[type="location"] {
  margin-left: 48px;
}

/*
Inputfeld für Vote-Form bekommt ein anderes Design, als die normalen Input Felder.
*/
input[name="email2"] {
  font-size: 40px;
  border: 3px solid rgb(39, 27, 21);
  color: rgb(39, 27, 21);
}

/*
Inputfeld für Vote-Form bekommt ein anderes Design, als die normalen Input Felder.
*/
input[name="name2"] {
  font-size: 40px;
  border: 3px solid rgb(39, 27, 21);
  color: rgb(39, 27, 21);
}

/*
Input Button wird gestylt, wie andere Buttons auf dieser Seite.
*/
input[type="submit"] {
  width: 300px;
  background-color: rgb(39, 27, 21);
  border: 1px solid;
  color: #ffffff;
  overflow: hidden;
  margin: 0 100px;
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  padding: 20px 40px;
  cursor: pointer;
  border-color: black;
  margin-top: 2%;
}

/*
Textarea für Bild-Einsende-Form.
*/
textarea {
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  color: rgb(141, 132, 132);
  border: 1px solid rgb(141, 132, 132);
  box-shadow: 0px 15px 10px rgb(0 0 0 / 50%);
  margin-top: 1%;
  margin-bottom: -1%;
  padding-right: 8px;
}

/*
Start mobile design (noch nicht fertig)
Es werden vor allem kleine Änderungen an der Text-Größe, line-height und Größe der divs vorgenommen.
Zusätzlich wird der body Hintergrund verändert und ist jetzt grau anstatt dem Standardbild und das Menü wurde ein bisschen angepasst.
*/

@media (max-width: 800px) {
  body {
    text-align: center;
    align-items: center;
    background-image: none;
    background-color: rgb(37, 35, 35);
    height: 100vh;
  }
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 50px;
    line-height: 70px;
  }
  ul {
    margin-top: 3%;
    text-align: center;
  }
  ul li {
    display: flex;
    flex-direction: column;
  }

  .button_nav {
    width: 50%;
  }

  .button_rank1 {
    font-size: 35px;
  }

  .button_rank2 {
    font-size: 30px;
  }

  .button_rank3 {
    font-size: 25px;
  }

  .explain {
    height: auto;
    line-height: 40px;
  }

  .main_WT {
    font-size: 35px;
  }

  .wt_pictures1 {
    font-size: 22px;
  }

  .fav_pic {
    font-size: 22px;
  }

  .content .participant-description {
    font-size: 12px;
    width: 100px;
  }

  .content .from_name {
    font-size: 10px;
    line-height: 1;
  }

  input[name="email2"] {
    font-size: 22px;
  }

  input[name="name2"] {
    font-size: 22px;
  }

  input[type="submit"] {
    width: 50%;
  }

  input[name="file"] {
    font-size: 12px;
  }

  .radio {
    font-size: 22px;
    line-height: 50px;
  }
  img {
    height: 20%;
    width: 50%;
  }
  .main_DC {
    height: auto;
    font-size: 35px;
  }
  .main_TP {
    height: auto;
    margin-bottom: 3%;
  }
  .send {
    text-align: center;
    margin-left: 0;
  }
  input[name="name"] {
    margin-left: 0;
  }

  input[name="email"] {
    margin-left: 0;
  }

  input[type="location"] {
    margin-left: 0;
  }
  textarea {
    padding-right: 0;
  }
}