html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

body.portfolio {
    height: 100% !important; 
    position: relative;
    background-image: 
        radial-gradient(circle at center, rgba(255, 255, 255, 0.005) 0, rgba(255, 255, 255, 0.005) 1px, transparent 1px), 
        linear-gradient(to right, rgba(255, 255, 255, 0.01) 1px, transparent 1px), 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 10px 10px;
    background-attachment: fixed;
    background-color: #1E1E1E;
}

.portfolio_main {
    width: 95% !important; 
    height: 85% !important;
    background-color: #2c2c2c;
    margin-top: 20px;
    border: 1px solid black; 
}

.portfolio_sidebar_container {
    background-color: #5497A7;
    border-right: 1px solid black; 
    padding: 15px; 
}

li.nav-item {
    font-size: 20px;
    font-weight: 700;
}

a.nav-link {
    color: white; 
}

a.nav-link:hover {
    color: #006fff; 
}

a.navbar-brand {
    color: white; 
    font-weight: 700;
}

.sidebar_list {
    list-style: none;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.sidebar_list li {
    margin-bottom: 10px;
}

.sidebar_list li a {
    text-decoration: none;
}

h1.hello {
    font-size: 76px;
    font-weight: 700;
    color: #0085ff;
}

div.mainArea {
    padding-left: 100px;
    padding-top: 100px;
    padding-right: 100px;
}

div.sectionMain {
    padding-left: 100px;
    padding-top: 100px;
    padding-right: 100px;
}

div.descMain {
    padding-top: 20px;
    padding-right: 100px;
    padding-left: 100px;
}

p.desc {
    color: white; 
}

div.socialOpinion {
    width: 100%; 
    background-color: #2d2d2d;
    border: 1px solid #006fff;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    max-height: 416px;
    height: 100%;
    display: grid;
    align-items: end;
    color: #e0ffff; 
}

.imgVoter {
    margin-top: 40px;
    margin-bottom: 20px;
    width: 60px; 
    height: 60px; 
    bottom: 0 !important; 
}

.myAkk {
    margin-top: 40px; 
    margin-bottom: 100px;
}

.accordion-header {
    background-color: #2d2d2d;
}

.accordion-button {
    background-color: #2d2d2d;
    color: white;
    border: none;
}

.accordion-button.collapsed {
    background-color: #2d2d2d;
}

.accordion-body {
    background-color: #2d2d2d;
    color: white;
}

#listitems {
    list-style-image: url('arrow-return-right.svg');
}

#secondheading {
    color: #006fff;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

#raleway-font {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.futurebar {
    background-color: #006fff;
}

.cutline {
    border-color: #006fff;
}

.outdated {
    background-color: #006fff;
}

.ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: #333;
    color: white;
    padding: 10px 0;
    position: relative;
  }
  
  .ticker-wrapper {
    display: flex;
    white-space: nowrap;
    animation: scroll 10s linear infinite;
  }
  
  .ticker {
    padding: 0 50px;
    flex-shrink: 0;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .login_button {
    background-color: #006fff !important;
  }

  .fastsettings {
    padding: 25px 50px 25px 50px;
  }

  /* Entfernt die Hintergrundfarbe des geöffneten Accordion-Titels */
.accordion-button:not(.collapsed) {
    background-color: #343a40 !important; /* Setzt die Hintergrundfarbe auf ein dunkleres Grau */
    color: white; /* Setzt den Text auf weiß */
}

/* Entfernt den blauen Rahmen um das geöffnete Accordion */
.accordion-button:not(.collapsed)::after {
    background-color: #343a40; /* Passende Hintergrundfarbe für den Pfeil */
}

.glow-border {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/Portfolio.png');
    background-size: contain; /* Deckt den gesamten Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.glow-border2 {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/ELCAD.png');
    background-size: contain; /* Deckt den gesamt{en Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border2:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.glow-border3 {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/dieAkte.png');
    background-size: contain; /* Deckt den gesamt{en Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border3:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.glow-border4 {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/meinForum.png');
    background-size: contain; /* Deckt den gesamt{en Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border4:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.glow-border5 {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/meineCloud.png');
    background-size: contain; /* Deckt den gesamt{en Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border5:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.glow-border6 {
    width: 500px !important; 
    height: 281px; 
    border: 2px solid #006fff; /* Farbe der Border */
    background-image: url('/projects/meineInventur.png');
    background-size: contain; /* Deckt den gesamt{en Container ab */
    background-position: center; /* Zentriert das Bild im Container */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    
    /* Der "Glow"-Effekt */
    box-shadow: 0 0 10px #006fff, 0 0 20px #006fff, 0 0 30px #006fff, 0 0 40px #006fff, 0 0 50px #006fff, 006fff0 0 60px #006fff, 0 0 70px #006fff;
    
    /* Optional: Übergang für den Effekt beim Hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Optional: Verstärkter "Glow"-Effekt bei Hover */
.glow-border6:hover {
    box-shadow: 0 0 20px #006fff, 0 0 40px #006fff, 0 0 60px #006fff, 0 0 80px #006fff, 0 0 100px #006fff, 0 0 120px #006fff;
}

.label {
    text-align: center;
    color: white; 
    margin-top: 10px;
}

h1.newestnews {
    font-family: "Prompt", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 100px;
    color: white; 
}

.col_news {
    padding: 20px; 
}

.msgContainer {
    height: 250px; 
    text-overflow: ellipsis;
    overflow: hidden; 
    width: 100%; 
    max-height: 250px;
    position: relative;
}

div.ownerform {
    background-color: #1E1E1E;
    padding: 20px;
    color: white; 
    border: 1px solid white; 
    max-width: 400px;
}

.container.ownerform {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1E1E1E;
    padding: 20px;
    color: white;
    border: 1px solid white;
    max-width: 400px;
    width: 100%;
    border-radius: 8px;
}

div.todoRow1 {
    padding: 30px; 
    background-color: #1E1E1E; 
    color: white; 
    border: 1px solid grey; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.textfarbe {
    color: #006fff;
}

.fastclickicon {
    font-size: 2.5rem; 
    color: #006fff;
}