:root {
    --mainDark: white;
    --mainLight: #000000;
    --mainYellow: #ffbf71;
    --mainPurple: rebeccapurple;
  
  }
  
  .dark input[name="nickname"] {
    color: white; /* Textfarbe auf weiß ändern */
    background-color: transparent; /* Hintergrund bleibt transparent */
    border-color: white; /* Rahmenfarbe auf weiß ändern */
}

.w-full.p-2.border.bg-transparent.dark\:text-gray-100 {
  color: white; /* Textfarbe */
  background-color: transparent; /* Hintergrund bleibt transparent */
  border-color: white; /* Rahmenfarbe auf weiß ändern */
}
  
  html {
    font-size: 62.5%;
  }
/* Fügen Sie dies in Ihre CSS-Datei ein oder in einen <style> Block in Ihrem HTML */
#graphcomment .gc-login-button,
#graphcomment .gc-register-button {
    display: none !important;
}

  body {
    background-color: var(--mainDark);
    color: var(--mainLight);
    font-family: "Arial", sans-serif;
    font-size: 1.60rem;
    margin-top: 20px;
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap; /* 1 */
  }
  

  /* Default styles (for larger screens) */
  .mc-field-group input[type="email"] {
    width: 190px; /* Full width by default */
    height: 40px;
  }

  .mc-field-group input[type="submit"] {
    width: 190px; /* Fixed width for the button by default */
    height: 40px;

  }  
  /* SINGLE ELEMENTS */
  .singleHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

  
  .singleHeadTexts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .singleHeadTitle {
    font-size: 35px;
  }
  
  .singleHeadContent1 {
    max-width: 700px;
    margin-top: 0px;
    font-size: 4rem;
    margin-bottom: 10px;
  }

  .singleHeadContent2 {
    max-width: 700px;
    margin-top: 0px;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px 0;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #0056b3;
  }




  
  .singleHeadDetail {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .singleAvatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .singleCategory {
    padding: 5px;
    border-radius: 5px;
    background-color: var(--bgSoft);
    color: var(--textSoft);
    font-size: 15px;
  }
  
  .singleHeadImg {
    flex: 1;
    max-height: 350px;
    object-fit: cover;
    align-self: flex-start; /* Stellt sicher, dass das Bild oben ausgerichtet wird */
}

  .singleBody {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 50px;
  }

  .singleBottomHead {
    max-width: 700px;  }

  .singleBottom {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-top: 50px;
  }
  
  .singleContent {
    flex: 3;
    font-size: 20px;
    line-height: 32px;
  }
  
  .singleContent p,
  .singleContent h1,
  .singleContent h2,
  .singleContent h3 {
    margin: 10px 0px;
  }
  
  
  .singleContent img {
    width: 100%;
    object-fit: cover;
  }
  
  .singleContent pre {
    width: 100%;
    overflow-x: scroll;
    padding: 20px;
  }
  
  .singleRightBar {
    flex: 1;
    
  }
  a {
    color: var(--mainLight);
    text-decoration: none;
  }
  
  pre {
    padding: 3rem 2rem;
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 2rem;
  }
  
  pre span{
    width: 1px !important;
  }
  
  
  
  blockquote {
    background-color: #283246;
    padding: 2rem;
    padding-bottom: 0.5rem;
  }
  
  ul {
    padding: 2rem;
    margin: 0;
  }
  
  em {
    background-color: #283246;
    padding: 0.3rem;
    font-style: normal;
  }
  
  hr {
    height: 0;
    border: 0.1rem solid #282a36;
  }
  
  /* LIGHT MODE SINGLE ELEMENTS */
  body.light {
    background-color: white;
    color: var(--mainDark);
  }
  
  body.light a {
    color: var(--mainDark);
  }
  
  body.light blockquote {
    background-color: #e5e9ee85;
  }
  
  body.light em {
    background-color: #e5e9ee85;
  }
  
  body.light hr {
    border: 1px solid #e5e9ee85;
  }
  
 
  /* NOTIFICATION */
  .notification {
    position: sticky;
    top: 0;
    height: 4rem;
    background-color: var(--mainPurple);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  body.light .notification {
    background-color: var(--mainYellow);
  }
  
  body.light .notification a {
    color: #555;
  }
  
  .tablinks:hover {
    background-color: #9b30ff;
    color: white;
}
  .listItem {
    display: block;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .listItemTexts {
    flex-grow: 1;
    text-align: left; /* Text linksbündig */
  }
  /* styles.css */

/* Container für die Kategorien */
.value-container {
    display: flex;                /* Flexbox-Layout verwenden */
    flex-wrap: wrap;              /* Zeilenumbruch aktivieren */
    gap: 20px;                    /* Abstand zwischen den Elementen */
    padding: 10px;                /* Innenabstand des Containers */
  }
  
  /* Einzelne Kategorie-Elemente */
  .category-item {
    display: inline-block;        /* Block-Element, damit margin funktioniert */
    padding: 15px 30px;           /* Innenabstand für größere Klickfläche */
    margin: 10px;                 /* Abstand um jedes Element */
    border-radius: 8px;           /* Abgerundete Ecken */
    color: #fff;                  /* Textfarbe */
    text-decoration: none;        /* Unterstreichung entfernen */
    font-size: 1em;             /* Größere Schriftgröße */
    font-weight: bold;            /* Fettdruck für besseren Kontrast */
    transition: background-color 0.3s ease; /* Sanfter Farbwechsel bei Hover */
  }
  
  /* Optional: Hover-Effekte für bessere Benutzererfahrung */
  .category-item:hover {
    opacity: 0.8;                 /* Etwas Transparenz bei Hover */
  }

  
  .navbar {
    max-width: 700px;
    margin: auto;
}

  /* CONTAINER */
  .container {
    padding-top: 25px; /* Höhe der Navbar */
    max-width: 700px;
    margin: auto;
    

  }






  
.links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
}
  
  .searchButton {
    display: flex;
    gap: 10px;
    background-color: var(--bgSoft);
    color: var(--textSoft);
    padding: 5px;
    border-radius: 10px;
  }
  
  /* NAVBAR LIGHT */
  body.light nav {
    background-color: white;
    color: var(--bgNight);
  }
  
  body.light .searchButton svg path {
    fill: gray;
  }
  
  /* SEARCH */
  .search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.955);
    color: #999;
    align-items: center;
    justify-content: center;
  }
  
  .searchContainer {
    width: 50rem;
    height: 50rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: #999;
  }
  
  .searchInputContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.3rem solid #26272e;
    border-radius: 1rem;
  }
  
  .searchInput {
    width: 100%;
    padding: 2rem;
    background-color: transparent;
    border: none;
    outline: none;
    color: #999;
    font-size: 2.4rem;
    font-weight: bold;
  }
  
  .searchCloseSvg {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  
  .searchCloseSvg:hover path {
    stroke: white;
  }
  
  .searchResult {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
    overflow: scroll;
  }
  
  .searchItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  
  .searchItem h1 {
    font-size: 2.4rem;
  }
  
  /* SEARCH LIGHT */
  body.light .search {
    background-color: rgba(255, 255, 255, 0.95);
  }
  

  
  .list {
    flex: 4;
    display: flex;
    flex-direction: column;
  }
  


  .listItemImage {
    width: 300px;
    border-radius: 15px;
    margin-right: 20px;
  }
  .list-item img {
    width: 100%; /* Bild passt sich der Breite des Containers an */
    max-width: 100%; /* Verhindert, dass das Bild breiter als sein Container wird */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    display: block; /* Entfernt eventuelle Abstände unterhalb des Bildes */
}

/* Zusätzlicher Container für Listenelemente, um Padding oder Margin zu steuern */
.list-item {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Verhindert Überlauf */
}

  
  .listImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

  
  .listItemDetail {
    font-size: 15px;


  }
  
  .listItemAvatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
  }
  .listItemvalue {
    display: flex;
    gap: 0rem;
  }
  .listItemCategory {
    padding-left: 0px;

    background-color: var(--bgSoft);
    color: rgb(218, 218, 218);
    font-size: 15px;
    gap: 10px;


  }
  /* LIST TAGS */
  .tags {
    display: flex;
    gap: 1rem;
  }
  
  .tag {
    height: max-content;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: whitesmoke;
    font-size: 1.2rem;
  }
  
  .tag.react {
    background-color: rgba(135, 207, 235, 0.212);
  }
  
  .tag.javascript {
    background-color: rgba(255, 217, 0, 0.22);
  }
  
  .tag.reactnative {
    background-color: rgba(62, 44, 127, 0.22);
  }
  .tag.css {
    background-color: rgba(80, 32, 255, 0.22);
  }
  .tag.firebase {
    background-color: rgba(255, 133, 11, 0.22);
  }
  .tag.mongodb {
    background-color: rgba(74, 207, 88, 0.22);
  }
  .tag.vscode {
    background-color: rgba(39, 5, 210, 0.22);
  }
  .tag.nextjs {
    background-color: rgba(0, 0, 0, 0.22);
    border: 0.5px solid gray;
  }
  
  body.light .tag.nextjs {
    border: none;
  }
  .tag.typescript {
    background-color: rgba(10, 97, 190, 0.22);
  }
  .tag.webdesign {
    background-color: rgba(190, 10, 52, 0.22);
  }
  .tag.html {
    background-color: rgba(4, 68, 16, 0.22);
  }
  .tag.sanity {
    background-color: rgba(255, 120, 58, 0.22);
  }
  .tag.testing {
    background-color: rgba(255, 58, 222, 0.22);
  }
  .tag.strapi {
    background-color: rgba(58, 255, 222, 0.22);
  }
  .tag.productivity {
    background-color: rgba(164, 167, 2, 0.22);
  }
  .tag.devops {
    background-color: rgba(235, 120, 120, 0.22);
  }
  .tag.github {
    background-color: rgba(0, 0, 0, 0.335);
  }
  
  /* LIST SIDEBAR */
  .sideBar {
    flex: 1;
  }
  
  .sideBarImage {
    width: 100%;
    object-fit: cover;
  }
  
  /* PAGINATION */
  
  .pagination {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
    margin: auto;
    font-size: 1.2rem;
    color: lightgray;
  }
  .page-item{
    border: 1px solid gray;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
  }
  .page-item.active{
    background-color: var(--text);
    color: var(--bg);
  }
  .page-item.disabled{
    background-color: #313845;
    cursor: not-allowed;
  }
  .page-link {
    border: 0.1rem solid #cbd5e1;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
  }
  
  .page-item.active .page-link {
    background-color: var(--mainLight);
    color: var(--mainDark);
  }
  
  .page-item.disabled .page-link {
    background-color: #313845;
    cursor: not-allowed;
  }
  
  /* PAGINATION LIGHT */
  
  body.light .page-item.disabled .page-link {
    background-color: var(--mainLight);
  }
  
  body.light .page-item.active .page-link {
    background-color: var(--mainDark);
    color: var(--mainLight);
  }
  
  /* TAGS PAGE */
  
  .tagsPage {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0rem;
  }
  
  .tagsPageItem {
    padding: 2rem;
    width: max-content;
    border-radius: 0.5rem;
    background-color: whitesmoke;
  }
  
  .tagsPageItem.react {
    background-color: rgba(135, 207, 235, 0.212);
  }
  
  .tagsPageItem.javascript {
    background-color: rgba(255, 217, 0, 0.22);
  }
  .tagsPageItem.reactnative {
    background-color: rgba(62, 44, 127, 0.22);
  }
  .tagsPageItem.css {
    background-color: rgba(80, 32, 255, 0.22);
  }
  .tagsPageItem.firebase {
    background-color: rgba(255, 133, 11, 0.22);
  }
  .tagsPageItem.mongodb {
    background-color: rgba(74, 207, 88, 0.22);
  }
  .tagsPageItem.vscode {
    background-color: rgba(39, 5, 210, 0.22);
  }
  .tagsPageItem.nextjs {
    background-color: rgba(0, 0, 0, 0.22);
    border: 0.5px solid gray;
  }
  
  body.light .tagsPageItem.nextjs {
    border: none;
  }
  .tagsPageItem.typescript {
    background-color: rgba(10, 97, 190, 0.22);
  }
  .tagsPageItem.webdesign {
    background-color: rgba(190, 10, 52, 0.22);
  }
  .tagsPageItem.html {
    background-color: rgba(4, 68, 16, 0.22);
  }
  .tagsPageItem.sanity {
    background-color: rgba(255, 120, 58, 0.22);
  }
  .tagsPageItem.testing {
    background-color: rgba(255, 58, 222, 0.22);
  }
  .tagsPageItem.strapi {
    background-color: rgba(58, 255, 222, 0.22);
  }
  .tagsPageItem.productivity {
    background-color: rgba(164, 167, 2, 0.22);
  }
  .tagsPageItem.devops {
    background-color: rgba(235, 120, 120, 0.22);
  }
  .tagsPageItem.github {
    background-color: rgba(0, 0, 0, 0.335);
  }
  
  /* FOOTER */
  
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    font-size: 14px;
  }
  
  .social {
    display: flex;
    gap: 10px;
  }
  
  
  /* AUTHOR PAGE */
  
  .sideBarAuthor {
    padding: 1rem;
    background-color: #423966;
    border-radius: 1rem;
    height: max-content;
  }
  
  body.light .sideBarAuthor {
    background-color: whitesmoke !important;
  }
  
  .sideBarUser {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  

  
  .sideBarUsername {
    font-weight: 500;
  }
  
  .sideBarDesc {
    margin: 1.5rem 0px;
  }
  
  .sideBarContact {
    font-weight: bold;
  }
  
  /* SINGLE POST */
  
  .singleHead {
    margin-bottom: 3.2rem;
  }
  
  .singleHeadContainer {
    padding: 2rem 0rem;
    display: flex;
    align-items: center;
    gap: 5rem;
    justify-content: space-between;
  }
  
  .singleHeadText {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
  }
  
  .singleTitle {
    font-size: 4.8rem;
  }
  
  .singleDescription {
    font-size: 2rem;
    font-weight: 300;
  }
  
  .details {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  

  
  .detailText {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .singleDate {
    font-size: 1.2rem;
  }
  
  .singleImageContainer {
    flex: 1;
    max-height: 35rem;
    border-radius: 2rem;
    overflow: hidden;
  }
  
  .singleImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* SINGLE POST CONTENT */
  
  .contentContainer {
    width: 100%;
    display: flex;
    gap: 3rem;
  }
  
  .contentSide {
    flex: 1;
    top: 15rem;
    height: max-content;
  }
  
  .contentSideLink {
    width: inherit !important;
    text-decoration: inherit !important;
  }
  
  .contentSideContainer {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-radius: 2rem;
  }
  
  .contentSideContainer img {
    width: 100%;
    height: 100px;
    object-fit: cover;
  }
  
  .contentSideContainer h3 {
    font-weight: 300;
  }
  
  .contentSideContainer a {
    width: max-content;
    padding-bottom: 0.5rem;
    border-bottom: 0.1rem solid gray;
  }
  
  .contentSideRight {
    display: none;
    width: 25rem;
    flex: 1;
    position: sticky;
    top: 15rem;
    height: max-content;
  }
  
  .content {
    flex: 3;
    font-size: 1.9rem;
    /* letter-spacing: 0.05rem; */
    line-height: 3.2rem;
  }
  
  .content p:first-child {
    margin-top: 0rem;
  }
  .content p {
    
    margin: 2rem 0rem;
  }
  
  .content img {
    width: 100%;
    object-fit: cover;
  }

  .content a {
    text-decoration: underline;
    font-weight: 500;
  }
  .rightBar {
    position: sticky;
    top: 100px;
  }
  
  .rightBarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .rightBarImgHr {
    display: none;
  }
  .contentRightBar {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  
  .contentRightBarImageSquare {
    width: 25rem;
    height: 25rem;
    object-fit: cover;
    margin-bottom: 3rem;
  }
  
  .contentRightBarImageHorizontal {
    display: none;
  }
  
  /* 404 Not Found */
  
  .notFound {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  
  .notFound img {
    max-width: 300px;
  }
  
  .notFound a {
    text-decoration: underline;
    font-size: 1.8rem;
  }
  .affiliate{
    display: none;
  } 
  /* SHARE */
  
  .share {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .shareTitle {
    font-size: 1.4rem;
    width: max-content;
    font-weight: 500;
    padding: 3px 0px;
    border-bottom: 0.5px solid gray;
  }
  
  .share a {
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shareIcons {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  
  .copyLink {
    cursor: pointer;
    border: none;
    border-radius: 2px;
    font-size: 12px;
    padding: 5px;
    background-color: #283246;
    color: var(--mainLight);
  }
  
  .copyLink:hover {
    background-color: #343c4e;
  }
  
  /* SHARE LIGHT */
  
  body.light .copyLink {
    background-color: #f5f5f5;
    color: #555;
  }
  
  body.light .copyLink:hover {
    background-color: #eee;
  }
  
  /* JOIN NEWSLETTER */
  
  .join {
    margin-top: 5rem;
  }
  
  .dose {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
  }
  
  .doseText {
    color: tomato;
  }
  
  .joinText {
    background-color: #000000;
    color: var(--mainLight);
    padding: 1rem;
  }
  
 
  
  /* MEDIA QUERY */
  
  h2 {
    font-size: 24px;
    color: #000000;
    text-align: left; /* Positioniert den Text nach links */

  }

  h3 {
    font-size: 24px;
    
  }
  h4 {
    font-size: 24px;
    color: #00aeff;
  }
  h5 {
    font-size: 24px;
    color: #fc3c3c;
  }
  h6 {
    font-size: 24px;
    color: #00ff95;
  }
  
  @media (max-width: 1024px) {
    .container {
      max-width: 768px;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    /* LIST SIDEBAR */
    .sideBar {
      display: none;
    }
  
    .contentSideRight {
      display: none;
    }
  
    .singleImageContainer {
      display: none;
    }
  

  
    .contentRightBarImageSquare {
      display: none;
    }
  
    .contentRightBarImageHorizontal {
      display: block;
      width: 100%;
      max-height: 120px;
      align-self: center;
    }

  }
 /* Container for mobile view */
@media (max-width: 768px) {
  .container {
    padding-top: 25px; /* Height of the Navbar */
    max-width: 100%;   /* Full width for mobile */
    margin: 0 auto;
    padding-left: 1rem; /* Reduced padding for mobile */
    padding-right: 1rem; /* Reduced padding for mobile */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }



  .singleHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .singleHeadTitle {
    font-size: 25px; /* Adjusted for smaller screens */
  }

  .singleHeadDesc {
    max-width: 100%; /* Full width for mobile */
    font-size: 16px;
  }

  .singleHeadImg {
    width: 100%; /* Full width for mobile */
    max-height: 200px; /* Adjusted height for mobile */
  }



  .singleBottomHead {
    width: 100%;
  }


  .singleBottom {
    flex-direction: column;
    gap: 20px;
  }

  .singleContent {
    font-size: 16px; /* Adjusted for mobile readability */
    line-height: 28px;
  }

  .listItem {
    flex-direction: column;
    align-items: center;
  }

  .listItemImage {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild wird in den vorgegebenen Rahmen skaliert */
    overflow: hidden; /* Verhindert Überlauf */

  }






  .listItemTexts {
    font-size: 16px; /* Adjusted for mobile */
    width: 100%;

    text-align: left; /* Text linksbündig */  }

  .navbar {
    height: 50px; /* Adjusted height for mobile */
  }

  .links {
    font-size: 16px; /* Adjusted for smaller screens */
  }
  
  .searchButton {
    font-size: 16px; /* Adjusted for mobile */
    padding: 5px;
  }

  .searchContainer {
    width: 90%; /* Adjusted for mobile */
    height: auto;
  }

  .searchInput {
    font-size: 20px; /* Adjusted for mobile */
  }



  .tagsPage {
    gap: 1rem; /* Reduced gap for mobile */
  }

  .pagination {
    gap: 1rem; /* Reduced gap for mobile */
    font-size: 1.2rem;
  }
  
  .category-item {
    padding: 10px 20px; /* Reduced padding for mobile */
    font-size: 1rem; /* Adjusted for mobile */
  }

  .listItemTitle {    /*Text Überschrift*/
    width: 100%;
    margin-top: 0px;
    font-size: 2rem;
    margin-bottom: 10px;
  }



}