background maybe but not maybe

src/PartyPage.css

@@ -1,44 +1,108 @@
 .loading {
-    height: 100vh;
+  height: 100vh;
-    width: 100vw;
+  width: 100vw;
-    background-color: black;
+  background-color: black;
 }
 
+body{
+  background-image: url('/public/background.gif');
+  background-size: cover;
+    
+  height: 100vh;
+  padding:0;
+  margin:0;
+}
+
+
 .App {
+  color: white;
+  font-size: calc(10px + 2vmin);
+  text-shadow:
+    -1px -1px 0.2em #000,
+    1px -1px 0.2em #000,
+    -1px 1px 0.2em #000,
+    1px 1px 0.2em #000;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  max-width: 1024px;
+}
+
+.fullheight {
+  min-height: 100vh;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-outer {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-bottom: 0.5em;
+}
+
+@media (min-width: 1024px) {
+  .hero-outer {
+    justify-content: flex-end;
+  }
+}
+
+h1,
+h2 {
+  margin: 1em 0 0.1em 0;
+}
+
+p {
+  margin: 0.3em 0 0.3em 0;
+}
+
+.feedback {
+  line-height: 3em;
   text-align: center;
 }
 
-.App-logo {
+input[type="radio"] {
-  height: 40vmin;
+  display: none;
-  pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+input[type="radio"]+label {
-  .App-logo {
+  font-size: larger;
-    animation: App-logo-spin infinite 20s linear;
+  cursor: pointer;
-  }
+  padding: 0 1em 0 1em;
+  border-right: 0.1em solid white;
 }
 
-.App-header {
+input[type="radio"]+label:hover {
-  background-color: #282c34;
+  text-shadow: 0 0 1em white;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+input[type="radio"]+label:last-of-type {
-  color: #61dafb;
+  border-right: none;
 }
 
-@keyframes App-logo-spin {
+input[type="radio"]:checked+label {
-  from {
+  color: var(--selected-color);
-    transform: rotate(0deg);
+  text-shadow: 0 0 1em var(--selected-color);
-  }
+  text-decoration: underline;
-  to {
+}
-    transform: rotate(360deg);
+
-  }
+#coming-yes+label {
+  --selected-color: #0f0;
+}
+
+#coming-maybe+label {
+  --selected-color: #fc0;
+}
+
+#coming-no+label {
+  --selected-color: #f00;
 }

src/PartyPage.tsx

@@ -62,12 +62,10 @@ export const PartyPage: React.FC = () => {
                 <h1>Hallo {dear} {name},</h1>
                 <p>
                     am <strong> 16. Dezember </strong> wird die Heizung der Universität das letzte Mal angeschaltet...
-                    Diese Chance, Energie zu schnorren, wollen wir ein letztes Mal nutzen.
+                    Diese Chance, Energie zu schnorren, wollen wir noch einmal nutzen.
                 </p>
                 <p>
-                    Das wollen wir (Kai, Dominic, Jesko) uns natürlich nicht entgehen lassen.
+                    Daher veranstalten wir ab <strong> 18:00 </strong> eine Weihnachtsparty! Wir rechnen mit ca. 15-25 Teilnehmern.
-                    Also veranstalten wir eine <strong> mega krasse LAN-Party. </strong>
-                    {coming}
                 </p>
                 <p>
                     Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :)
@@ -88,32 +86,25 @@ export const PartyPage: React.FC = () => {
             <div className='hero fullheight'>
                 <h2>Wann und Wo?</h2>
                 <p>
-                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>29. Oktober, 19:00</strong> bis <strong>31. Oktober</strong> irgendwann.
+                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>16. Dezember, ab 18:00</strong>.  Bitte komme nach Möglichkeit pünktlich.
                 </p>
                 <p>
-                    <FontAwesomeIcon icon={faLocationDot} /> <a href="https://www.openstreetmap.org/way/213757745"><strong>Mainzer Str. 28</strong>, 66111 Saarbrücken</a>
+                    <FontAwesomeIcon icon={faLocationDot} /> <strong>Gebäude E1 1, Raum 407</strong>
                 </p>
+                <h2>Was ist geplant?</h2>
                 <p>
-                    Ja, der 30. ist ein Sonntag.
+                    Wir werden gemeinsam einen weihnachtlichen Abend verbringen. 
-                    Am 1. 11. ist aber Allerheiligen, also bietet es sich an am 31. nen Brückentag zu machen.
+                    
-                    So hat man dann auch genug Zeit um nach den 25+ Stunden ordentlich auszuschlafen.
+                    Dazu gibt es natürlich Glühwein, Kinderpunsch, und weitere Getränke. 
                 </p>
-                <h2>Alter ernsthaft 25 Stunden?</h2>
+                <h2>Was gibt es zu Essen?</h2>
                 <p>
-                    Prinzipiell ja.
+                    Potluck, etc. 
-                    Wer möchte kann sich aber gerne auf eine unserer beiden Couches zurückziehen,
+                    Bitte uns schreiben was mitgebracht wird.
-                    oder eine Luftmatratze mitbringen, oder vorher gehen, oder später dazukommen,
-                    oder zwischendurch nach Hause fahren...
                 </p>
-                <h2>Und was wenn ich Hunger bekomme?</h2>
+                <h2>Noch Programmpunkte</h2>
                 <p>
-                    Wir werden ein Curry, Chili o.Ä. kochen.
+                    Willst du etwas anbieten? Gerne!
-                    Bring aber auch gerne Snacks, Getränke, Knoblauchdip oder Kuchen mit :)
-                </p>
-                <h2>Aber wo soll ich mein Auto hinstellen?</h2>
-                <p>
-                    Am Waldhaus gibt es einen kostenlosen <a href="https://www.openstreetmap.org/way/111250120">Parkplatz</a>.
-                    Wenn du mit dem Auto kommst sag Bescheid, wir planen uns dort zu treffen und dann mit einem Auto auf Kai's Premium-Parkplatz direkt neben der WG fahren.
                 </p>
             </div>
         </div>