/* styles.css */

/* Set the overall background color to match Tailwind's bg-slate-800 (hex: #0f172a) */
body {
  background-color: #0f172b;
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: white; /* Default text color to white */
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; /* Left align content */
}

/* Style for the main content container */
.content {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column; /* Stack the code area below the text */
  gap: 20px; /* Space between text and code area */
}

/* Style for the text section */
.text-section {
  color: white; /* Text in white */
  text-align: left; /* Not centered */
  font-size: 1.2em;
}

/* Style for the code area */
/*pre code {*/
.hljs {
  #background-color: rgba(255,255,255,0.3); /* Light grey background */
  background-color: #1e293b; /* Light grey background */
  color: white; /* Code text in black */
  #color: black; /* Code text in black */
  padding: 5px;
  font-family: 'Courier New', Courier, monospace; /* Monospaced font for code */
  font-size: 90%;
  text-align: left;
  overflow-x: auto; /* Allows horizontal scrolling if code is long */
  border: 1px solid #334155; /* Light border for distinction */
  border-radius: 8px;
  margin-left: 10%;
  margin-right: 10%;
}

.card:hover {
  opacity: 1;
  filter: blur(0);
  animation-iteration-count: 0;
}

.card {
  border: 2px solid black;/*#334155;*/ /* Light border for distinction */
  border-radius: 8px;
  background: #334155;
  opacity: 0.9;
  filter: blur(0.5px);
  animation-duration: 2s;
  animation-name: blur;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.card-title a {
  color: #0000;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  background-clip: text;
  opacity: 1;
}

#blog-hero   {
  background-color: #0f172a;
  background-image: "";
}

#header.section.scrolled {
  opacity: 0.5; 
  background: #222;
}

#header.section.scrolled:hover {
  opacity: 1;
}


.hero h1 {
  color: #7c86ff;
}

.hero h3 {
  color: #7c86ff;
}

h3,h4,h5,h6 {
  color: #7c86ff;
}

.hero h1 {
  color: #0000;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  background-clip: text;
  /* color: #7c86ff; */
}

.hero h2 {
  color: #0000;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  background-clip: text;
  /* color: #7c86ff; */
}

h1,h2 {
  text-align: center;
  color: #0000;
  background: linear-gradient(90deg,#818cf8,#c084fc);
  background-clip: text;
  /* color: #7c86ff; */
}


p {
  text-align: left;
  color: #90a1b9;
}

ul {
  text-align: left;
  #color: #90a1b9;
  color: white;
}

ol {
  text-align: left;
  #color: #90a1b9;
  color: white;
}

.notices.blue {
  margin-left: 20px;
  margin-right: -20px;
  background: #283549;
  #background: #1e293b;
}
.notices.blue p {
  color: #28a1c5;
}

.notices.yellow {
  margin-left: 20px;
  margin-right: -20px;
  background: #283549;
  #background: #1e293b;
}
.notices.yellow p {
  color: #df8a13;
}

.notices.red {
  margin-left: 20px;
  margin-right: -20px;
  background: #283549;
  #background: #1e293b;
}
.notices.red p {
  color: #b52b27;
}

.hljs-built_in {
  #color: black;
  color: white;
}
.hljs-keyword,.hljs-string,.hljs-variable,.hljs-regexp,.hljs-attribute,.hljs-number,.hljs-literal,.hljs-selector-class,.hljs-subst {
  font-weight: normal;
  #color: black;
  color: white;
}

#header {
  margin-left: -20px;
}

#footer {
  #background: #222;
}

img {
  opacity: 0.7;
  #border: 1px solid #334155; /* Light border for distinction */
  border-radius: 5px;
  margin: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img:hover {
  opacity: 1;
}

.subtitles {
  text-decoration: underline;
  text-align: left;
  color: #90a1b9;
}

.thbox {
  width: 75px;
  animation-duration: 2s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes changewidth {
  from {
  opacity: 1;
  }

  to {
  opacity: 0.1;
  }
}

.card-image-remove {
  display: hidden;
}


@keyframes blur {
  from {
  opacity: 1;
  filter: blur(0);
  }

  to {
  opacity: 0.9;
  filter: blur(1px);
  }
}