body {
  font-family: "Alegreya";
  background: #a0cad9;
  color: #2A2A2A;
  margin: 0;
}

main {
  max-width: 800px;
  width: 90%;
  margin: 3rem auto;       /* horizontally centered, vertical spacing */
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

}

.klippenschreiber_Logo {
  background: white;
  min-height: calc(100vh - 40px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  border-radius: 4px;
  padding: 20px;  
}

img {
	max-width: 100% ;
}

img[src$='#center']
{
    display: block;
    margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
    /* whatever else styles you fancy here */
}

img[src$='#floatleft']
{
    float:left;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

img[src$='#floatright']
{
    float:right;
    margin: 0.7rem;      /* this margin is totally up to you */
    /* whatever else styles you fancy here */
}

header h1 {
	text-align: center ;
}

footer {
	text-align: center ;
	clear: both ;
}

@font-face {
	font-family: "Great Vibes", cursive;
	src: url('GreatVibes-Regular.ttf');
	font-family: "Alegreya";
	src: url('Alegreya-VariableFont_wght.ttf');
  font-family: "Comum Sans";
  src: url('ComumSans-Regular.ttf')
}

blockquote {
	font-family: "Great Vibes", cursive;
	font-size: 27px;
}


/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For nav.html */
nav ul {
  list-style: none;      /* remove bullets */
  padding: 0;            /* remove default padding */
  margin: 0;             /* remove default margin */
  display: flex;         /* put items in a row */
  justify-content: center;
}

nav li {
  /* optional: center the text vertically if needed */
}

/* Updated nav link styling to accommodate icons */
nav a {
  font-family: "Comum Sans";
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  display: inline-flex;        /* changed from block to inline-flex */
  align-items: center;         /* vertical center icon + text */
  gap: 0.5rem;                 /* space between icon and text */
  border-radius: 4px;          /* moved from hover state for consistency */
  transition: all 0.2s ease;   /* smooth hover transition */
}

/* Menu icon sizing and alignment */
.menu-icon {
  width: 2em;                /* scales with font size */
  height: 2em;
  object-fit: contain;
  /* If using SVGs or icons that should inherit text color: */
  filter: opacity(0.8);
  transition: filter 0.2s ease;
}

/* Icon behavior on hover (match white text) */
nav a:hover .menu-icon,
nav a.menuactive .menu-icon {
  filter: opacity(1) brightness(0) invert(1); /* makes icon white */
}

@media (max-width: 600px) {
  nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .menu-icon {
    width: 1em;
    height: 1em;
  }
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}