/** 
    * Haupt-CSS Datei für die Website
    * Hier werden alle globalen Styles definiert
    * Guide: 2.3
*/

/* Wir importieren einen kleinen CSS reset, der vom Broeser voreingestellte Styles entfernt */
@import "./reset.css";

/* 
    Wenn Tailwind CSS genutzt wird, diese Zeilen einkommentieren (Guide: 4.2):
    @import "tailwindcss";
    @source "../../site";
*/

/* 
** HIER WIRD DEFINiTERT, WIE UNSERE WEBSITE AUSSEHEN WIRD. **
*/

/* Der Body ist der Hauptcontainer. Styles, hier werden einge Styles definiert, die die gesamt Seite betreffen, wie Hintergrund, Schriftart, etc. */
body {
  font-family: "gothic60";
  position: relative;
  font-size: 16px; /* Basis-Schriftgröße. Da wir auf bei allen Einheiten der Website auf rem setzen, vergrößern sich alle Elemente proportional zu diesem Wert */
  margin: 0;
  min-height: 100vh; /* Body soll mindestens die Höhe des Viewports haben, damit der Footer immer unten bleiben kann */
  padding: 0 2rem;
  padding-bottom: 6rem; /* Platz für den Footer schaffen */
  background-color: #f4f5f3;
  color: #323232;
}

/* Sorgt dafür, dass der Inhalt zentriert und auf eine maximale Breite begrenzt ist */
.wrapper {
  margin: 0 auto;
}

/* Navigation Styles */
.navigation {
  display: flex; /* Ordnet die Inhalt des Containers nebeninander an */
  gap: 2rem;
  border-bottom: 1px solid #323232;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.navigation-item {
  text-decoration: none;
  color: currentColor;
}

.navigation-item:hover {
  color: #d5d920;
}

.navigation-item.active {
  font-weight: bold;
}

/* Styles für wiederkehrende Elemente der Seite */
.card {
  display: block;
  text-decoration: none;
  margin-bottom: 4rem;
  color: currentColor;
}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.page-title {
  font-size: 3.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.page-portrait {
  width: 15rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

.page-intro {
  margin-bottom: 2rem;
}

.page-skills-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  list-style: none;
}

.page-skill {
  background-color: #d5d920;
  color: #323232;
  padding: 0.5rem 1rem;
}

.page-cover {
  margin-bottom: 2rem;
}

.page-infos {
  color: #666;
  margin-bottom: 2rem;
}

.footer {
  position: absolute; /* Footer immer am unteren Rand der Seite ankleben */
  bottom: 0;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #323232;
  left: 50%;
  transform: translateX(-50%);
}

/* Styles, die Schrift schöner machen */
.article p + p {
  margin-top: 1rem;
}

strong {
  font-weight: bold;
}

/* Hier wird der Font eingebunden, den wir in src/fonts/ abgelegt haben. Wenn du einen anderen Font nutzen möchtest, musst du hier die Pfade und Namen entsprechend anpassen und den Font in den entsprechenden Ordner laden. */
@font-face {
  font-family: gothic60;
  font-weight: normal;
  font-style: normal;
  src: url("/src/fonts/Gothic60-Regular.woff") format("woff");
}

@font-face {
  font-family: gothic60;
  font-weight: bold;
  font-style: normal;
  src: url("/src/fonts/Gothic60-Regular.woff") format("woff");
}