/* CSS Document */

@font-face {
  font-family: 'Braven'; /* Wähle einen Namen für deine Schriftart */
  src: url('/fonts/BravenRegular.woff2') format('woff2'), /* Pfad zur Schriftartdatei */
       url('/fonts/BravenRegular.woff') format('woff');  /* Pfad zur Schriftartdatei */
  font-weight: normal; /*  Schriftstärke */
  font-style: normal;  /* Schriftstil (normal, italic) */
  font-display: swap; /*  Anzeige der Schriftart */
}

body {
    background-image: url(/images/Bgp.jpg);
    background-position: center;
    background-repeat; repeat;
    background-color: #242424;
    font-size: 50px;
}

.site-title {
    color: #cf0404;       /* Farbe */
    text-align: center;   /* zentriert */
    font-family: 'Braven';
    font-size: 3rem;      /* Standardgröße */
    margin: 10px 0;
}

.desc {
    color: #C4C4C4;
    text-align: center;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

/* Responsive Schriftgröße für kleinere Geräte */
@media (max-width: 768px) {
    .site-title {
        font-size: 2.2rem;
    }

   .desc {
        font-size: 10px;
}

   .footer-copyright {
        font-size: 8px !important;
}
}

@media (max-width: 480px) {
    .site-title {
        font-size: 1.8rem;
    }
}

.forumban img {
    display: block;
    width: 100%;
    max-width: 800px;  /* oder 600px für Forum */
    margin: 20px auto;
    border: 0.1rem solid;
    border-color: #0D0C0D;
}

.websiteban img {
    display: block;
    width: 100%;
    max-width: 800px;  /* oder 600px für Forum */
    margin: 20px auto;
    border: 0.1rem solid;
    border-color: #0D0C0D;
}

.footer {
    display: flex;           /* nebeneinander anordnen */
    justify-content: center; /* zentrieren */
    align-items: center;
    gap: 5px;               /* Abstand zwischen Icons */
    margin: 0px 0;
}

.footer img {
    width: 40px;   /* Icon-Größe */
    height: 40px;
}

.footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C4C4C4;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    font-weight: lighter;
    margin-top: 5px;
}

@media (max-width: 480px) {
    .footer img {
        width: 30px;
        height: 30px;
    }
    .footer {
        gap: 10px;
    }
}