/* fonts: Michroma, Mozilla Text */
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@200..700&display=swap');

body {
    background-color: rgb(245 245 255 / 30%);
}

h1, h2, h3, h4, h5, h6, p {
    font-family: "Mozilla Text", system-ui;
    color: black;
}

a {
    text-shadow: 0 0 65px rgb(163, 255, 255);
    color: inherit;
    text-decoration: none;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
    margin-top: 32px;
    margin-bottom: 32px;
}

/* body */





/* header */
header {
    font-family: "Michroma", system-ui;
    position: sticky;
    top:0;
    padding: 30px;
    text-align: center;

    
    /* blur */

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(4px);
}

.header-center {
    text-shadow: 0 0 50px midnightblue;
    font-size:x-large ;

}



/* div classes */
.main {
    padding: 0px 200px 0px 200px;
}

.stupid-quote {
    padding: 30px 100px;
}



/* footer */
footer {
    font-family: "Michroma", system-ui;
    position: sticky;
    top:0;
    padding: 0px;
    text-align: center;
    width: 100%;
    height: 250px;

    /* blur */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.footer-content {
    padding: 50px 200px 50px 200px;
    text-align: center;
}

.footer-center {
    position:relative;
}



/*  mermaid */
.mermaid {
    text-align: center;
    padding: 10px;
}

.diagram-container {
  overflow-x: auto; /* Enables horizontal scrolling ONLY for this element */
  padding: 10px 0;   /* Adds some space so it looks nice */
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fafafa;
}



/* mobile responsive */
@media (max-width: 600px) {
  body {
    font-size: 16px; /* Improve readability on mobile */
  }

  /* Reduce padding on the main container for more space */
  .main {
    padding: 0 15px;
    margin: 10px auto;
  }

  h2 {
    font-size: 1.5em;
  }
}