@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
         url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* WICHTIG: Erlaubt stufenlose Stärken von 100 bis 900 */
    font-style: normal;
}

body {
    background-image: url("../images/background.webp");
    margin: 0;
    min-height: 100vh; /* Holt sich mindestens die volle Bildschirmhöhe */

    
    /* DIE 3 ENTSCHEIDENDEN ZEILEN: */
    background-size: 100vw 100vh; /* Zwingt das Bild auf 100% Breite und Höhe des Viewports */
    background-size: cover;       /* Verhindert das Stauchen/Verzerren und schneidet den Rest ab */
    background-repeat: no-repeat; /* Verhindert, dass das Bild kachelt */
    background-position: center;  /* Zentriert das Bild, damit der wichtigste Teil in der Mitte bleibt */
}

#output {
    color: white;
    background-color: #ef458e;
    font-family: 'Montserrat';
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    margin-top: 50px;
    margin-inline: 50px;
    padding-inline: 10px;
}
.instagram-container {
  display: inline-flex;    /* Richtet Icon und Text flexibel in einer Reihe aus */
  align-items: center;     /* Zentriert Icon und Text vertikal perfekt zueinander */
  gap: 8px;                /* Abstand zwischen dem Icon und dem Text */
  margin-top: 15px;        /* Abstand zum Text DARÜBER (anpassbar) */
  text-decoration: none;   /* Entfernt die Unterstreichung des Links */
  
  /* Deine Wunschfarbe für Text und SVG-Konturen */
  color: #64011d;          
  
  font-family: Montserrat; /* Oder deine gewünschte Schriftart */
  font-weight: bold;       /* Macht den Text etwas dicker, passend zum Icon */
  transition: opacity 0.2s;/* Macht den Hover-Effekt geschmeidig */
  span {
  font-size: 20px;
  margin-left: -50px
  
}
}
.instagram-icon {
    width: 32px;    /* Begrenzt die Breite */
    height: 32px;   /* Begrenzt die Höhe */
    margin-inline: 50px;
}

.instagram-icon .st0 {
    fill: #64011d;  /* Überschreibt das Illustrator-Pink mit deiner Wunschfarbe! */
}
.instagram-container {
    font-family: 'Montserrat', sans-serif; /* 1. Schriftart (z.B. Montserrat oder Arial) */
    font-size: 20px;                       /* 2. Schriftgröße (1rem entspricht ca. 16px) */
    color: #64011d;                        /* 3. Schriftfarbe */
    font-weight: 500;                      /* Optional: Macht die Schrift mittelschwer (nicht zu dünn) */
}

/* Optionaler Hover-Effekt: Wenn man mit der Maus drüberfährt, wird es leicht transparent */
.instagram-container:hover {
  opacity: 0.8;
}