@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:400,600,700,800|Playfair+Display:400,400i,900&display=swap');

/* Mit @import habe ich Fonts von Google Font verknüpft, die ich für meine Website nutzen kann und möchte. */

/* Die durchgängige Farbe, die in diesem Projekt genutzt wird, ist rot. Um es verschiedenen Flächen anpassen zu können und nicht großartig nach HEXCODES suchen zu müssen, habe ich mit der root eine Variable geschaffen mit der sich die Farbe schnell anpassen lässt, sollte sie woanders zu düster sein oder zu sehr knallen. */

:root {
  --sfrot: #cc4a4a;
}

/* Hintergrundfarbe */

body {
  background: #383838;
}

hr {border: 5px solid #383838;}

/* Der rote Abteil meines Headers. Width auf 100% damit sie sich an jede Bildschirmgröße anpasst. */

.screamfestheader {
  position: relative;
  height: 221px;
  width: 100%;
  background: var(--sfrot);
}

/* Der "scream fest" Part im Header. Mit background:linear wurde der halbe Hintergrund geschaffen. */

.screamfestheadertitel {
  margin-top: 50px;
  margin-left: 50px;
  font-family: Abril Fatface;
  font-style: normal;
  font-weight: normal;
  font-size: 96px;
  line-height: 96px;

  color: #383838;

}

.screamfestheadertitel a {
  text-decoration: none;
  color: #383838;
  padding: 0px 40px;
  background: linear-gradient(0deg, #BFBFBF 35%, rgba(255, 255, 255, 0) 35%);

}

.screamfestheadertitel a:hover {
  text-decoration: none;
  color: #BFBFBF;
  background: linear-gradient(0deg, #383838 35%, rgba(255, 255, 255, 0) 35%);

}

/* Den Wrapper habe ich erstellt um die Navigation problemlos mit position verschieben zu können. Sie beinhält alle a-tags, also Links. Mit einem a hinter der Class habe ich dafür gesorgt, dass sich der Tag nur in der Class anpasst und sonst nirgendwo auf der Seite außer ich nutze die navwrapper class ein weiteres Mal. */

.navwrapper {
  position: relative;
  left: 680px;
  top: 35px;
}

.navwrapper a {
  padding: 10px 20px;
  margin-right: 15px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  color: #383838;
  background: #BFBFBF;
}

.navwrapper a:hover {
  background: #383838;
  color: #BFBFBF;
}

/* Hier habe ich meinen vorigen Code dupliziert und die Farben verändert. Die Tags der Unterpunkte sind in ihre eigene class gepackt worden damit ich mit verschiedenen a werden Arbeiten kann ohne auswendig jeden einzelnen Link zu bearbeiten, da ich vorher schon den Weg gewählt habe um in meiner navwrapper class alle a-tags so anzeigen zu lassen. */

.untergruppe a {
  padding: 10px 20px;
  margin-right: 15px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  color: #BFBFBF;
  background: var(--sfrot);
}

.untergruppe a:hover {
  background: #BFBFBF;
  color: var(--sfrot);
}

/* Der geöffnete Unterpunkt ist nicht mehr anklickbar und hebt sich vom Rest ab damit man immer weiß wo genau man gerade ist. */

aktuell {
  padding: 10px 20px;
  margin-right: 15px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  color: #BFBFBF;
  background: #414141;
}

/* Die kurze und knackige Seitenbeschreibung soll für jede einzelne Seite erscheinen. Ich habe sie im Header positioniert, weil sie noch über der Überschrift stehen soll. Als kleines Intro quasi. Beispielsweise in kurzen Worten das Scream Fest beschrieben. */

.screamfestsitedescr {
  position: relative;
  right: 630px;
  bottom: 50px;
  width: 580px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 196.18%;
  text-align: justify;

  color: #BFBFBF;
}

.screamfestseitentitel {
  position: relative;
  top: 150px;
  background: #414141;
  width: 100%;
  height: 250px;
  text-align: center;
}

/* Ich bearbeite den h-Tag in diesem Part damit er zu meiner Seite passt. */

.screamfestseitentitel h {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 96px;
  line-height: 150%;
  text-align: center;
  text-transform: uppercase;

  color: #BFBFBF;
}

/* Hiermit mache ich es möglich, dass alles, was in einem h-tag fett gekennzeichnet wird, so bearbeitet wird, wie ich es vorgebe. In diesem Fall soll die font-weight dicker sein als der restliche Text in den h-Tags. */

.screamfestseitentitel h b {
  font-weight: 800;
}

.screamfestseitenunter {
  position: relative;

  left: 400px;
  font-family: Playfair Display;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 196.18%;
  width: 744px;
  height: 65px;
  text-align: justify;
  letter-spacing: 0.02em;

  color: #BFBFBF;
}

/* mit ::first-line wird die erste Reihe der Class bearbeitet. Egal wie weit oder wie viele Wörter. Es bleibt immer auf der ersten Reihe. Kann ein netter Weg sein um etwas zu highlighten. Wenn der erste Satz ganz besonders einprägsam sein soll. */

.screamfestseitenunter::first-line {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  background: #383838;
}

/* da ich das Bild selbst bearbeiten möchte, nutze ich es als Hintergundbild in einer div. Somit kann ich bspw mit background-blond-mode arbeiten und Bilder/Farben/etc layern */

.bildsf {
  position: relative;
  width: 627px;
  height: 600px;

  background: linear-gradient(0deg, #D43434, #D43434), linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #880C0C, #880C0C), url('maske.png');
  background-blend-mode: color, color, multiply, normal;
  background-size: cover;
  box-shadow: 40px 40px 0px #2A2A2A;
}

/* und zum dazugehörigen Bild dann der Text, der daneben zu finden sein wird, weil ich für die Kombi table nutze */

.textsf {
  width: 484px;
  padding: 40px;

  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 31px;
  text-align: justify;

  color: #BFBFBF;
  background: #2B2B2B;
}

/* hier sorge ich dafür, dass der b, i und u tag in dieser class anders aussieht */

.textsf b {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  text-align: justify;

  color: var(--sfrot);
}

.textsf i {
  font-family: playfair display;
  opacity: 0.8;
}

.textsf u {
  padding-bottom: 2px;
  text-decoration: none;
  border-bottom: 3px solid var(--sfrot);
}

/*textsf die tags kopiert damit ich das gleiche in veränderter Form auf anderer Seite nutzen kann, weil ich nicht will das alle Container gleich aussehen, sondern Abwechslung möchte. Ich passe auch innerhalb der Seiten an zb die Weite mit Inline oder über style im Kopf das a, wie man an der ein oder anderen Stelle sehen wird. */

.textsfbreit {
  position: relative;
  top: 200px;
  margin: auto;
  width: 1313px;
  padding: 40px;
  column-count: 2;
  column-gap: 30px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 31px;
  text-align: justify;

  color: #BFBFBF;
  background: #2B2B2B;
}

.textsfbreit b {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  text-align: justify;

  color: var(--sfrot);
}

.textsfbreit i {
  font-family: playfair display;
  opacity: 0.8;
}

.textsfbreit u {
  padding-bottom: 2px;
  text-decoration: none;
  border-bottom: 3px solid var(--sfrot);
}

/* Hier passe ich den Footer an der hell sein soll und sich vom restlichen Design abheben. Eine Höhe gebe ich auch vor. */

footer {
  height: 221px;

  background: #BFBFBF;
}

.sffooter {
  width: 433px;
  height: 65px;
  margin-left: 100px;
  padding-top: 40px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 196.18%;

  text-align: justify;

  color: #2A2A2A;
}

/* Die Links kommen in ihren eigenen Container. Ich passe auch den a tag speziell für den Container an damit die Links nur dort so aussehen. */

.sffooterlinks {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 11px;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;

  color: #383838;
}

.sffooterlinks a {
  color: #383838;
  text-decoration: none;
}

.sffooterlinks a:hover {
  font-family: Open Sans;
  color: #383838;
  font-weight: 900;
  text-decoration: none;
}



.sffooterlinks2 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  padding-right: 100px;
  float: right;
  color: #D43434;
}

.sffooterlinks2 a {
  color: var(--sfrot);
  text-decoration: none;
}

.sffooterlinks2 a:hover {
  color: #383838;
  font-weight: 900;
  text-decoration: none;
}

.terminesf {
  position: relative;
  top: 200px;
  margin: auto;
  width: 1013px;
  padding: 40px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 31px;
  text-align: justify;

  color: #BFBFBF;
}

/* Um auf der Termine Unterseite die Daten hervorzuheben, habe ich jeweils zwei Tags erstellt. Einen für das Datum/die Uhrzeit und einen für den Film selbst. */

film a {
  color: #BFBFBF;
  text-decoration: none;
  float: right;
}

datum {
  background: #2B2B2B;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  padding: 15px;
  text-align: center;

  color: #D43434;
}

film {
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  padding-left: 30px;
  font-size: 24px;
}

/* Hier passe ich die h1 bis h3 an die ich in meinem Text für Zwischenüberschriften etc nutze. */

h1 {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  text-indent: 25px;
  padding-top: 20px;
}

h2 {
  border-bottom: 10px solid #383838;
  font-family: Open Sans;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  text-indent: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}

h3 {
  background: #383838;
  padding: 10px;
  margin-left: 100px;
  display: inline;
}

/* Für Zitate habe ich folgendes bearbeitet */

blockquote {
  width: 60%;
  margin: auto;
  line-height: 40px;
  opacity: 0.7;
  padding: 10px;
}


/* Für den Filmüberblick nutze ich eine Tabelle, die ich im Folgenden angepasst habe damit sie mehr optisch meinen Vorstellungen entspricht */

.filmueb table {
  width: 100%;
}

.filmueb table,
.filmueb th,
.filmueb td,
textarea {
  background: #2B2B2B;
  color: white;
  border: 1px solid #383838;
  border-collapse: collapse;
  padding: 30px;
  font-family: Open Sans;
}

voll {
  color: var(--sfrot);
  font-weight: bold;
}

verf {
  color: #97ce8b;
  font-weight: bold;
}

filminfos {
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 108.18%;
  padding: 10px;

  text-align: justify;
  letter-spacing: 0.02em;

  color: #2A2A2A;
}

/* Um deutlich zu machen ob es für einen Film noch Tickets gibt oder nicht, gibt es einen verfügbar tag der auf der Seite angezeigt wird */

tickets,
tickets a {
  padding: 10px 20px;
  margin-right: 15px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  color: #BFBFBF;
  background: #2A2A2A;
}

tickets a:hover {
  background: #BFBFBF;
  color: var(--sfrot);
}

ausgebucht {
  padding: 10px 20px;
  margin-right: 15px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  color: #383838;
  background: var(--sfrot);
}

/* Hier passe ich das Aussehen der Buttons und Eingabefelder an damit das Kontaktformular zum Design passt. */

input[type=button],
input[type=submit],
input[type=reset],
input[type=text],
select {

  background: #2B2B2B;
  color: white;
  border-bottom: 5px solid #383838;
  border-top: none;
  border-right: none;
  border-left: none;
  padding: 10px;
}

input[type=text]:focus {
  background: #2B2B2B;
  outline: none;
}