body {
	/* align-items: center; */
	display: flex;
	justify-content: center;
	/* min-height: 100vh; */
	margin: 0px;
	padding: 20px;

	background-color: black;
	color: white;
	font-family: Verdana, sans-serif;

	opacity: 0;
  	animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  	from { opacity: 0; }
  	to { opacity: 1; }
}

.regular-link {
	color: #ff4d6d;
}

/* Header, logo and title */
.header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

@keyframes textPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4),
                 0 0 15px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
                 0 0 25px rgba(255, 255, 255, 0.4);
  }
}

.header h1 {
  animation: textPulse 4s ease-in-out infinite;
}

.logo {
	align-items: center;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	margin-right: 15px;
	overflow: hidden;
	object-fit: cover;
		
	width: 70px;
	height: 70px;

	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

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

.title {
	font-size: 0.8rem;
	font-family: "Neuropolitical";
}

/* Second part: the content itself */
.page-container {
	width: 100%;
	max-width: 600px;
}

.content-container {
	width: 100%;
	box-sizing: border-box;
}

.content-container {
  background: rgba(255, 255, 255, 0.06); /* subtle transparency */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.15),   /* outer glow */
    0 0 40px rgba(255, 255, 255, 0.08),   /* very soft far halo */
    inset 0 0 10px rgba(255, 255, 255, 0.08); /* inner depth */
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* Hover — gentle lift & glow */
/* .content-container:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.25),
    0 0 60px rgba(255, 255, 255, 0.15),
    inset 0 0 12px rgba(255, 255, 255, 0.1);
} */

.content {
	margin: 5px;
	font-size: 0.8rem;
}

.collage img {
	border-radius: 10px;
	display: block;
	object-fit: cover;
	height: auto;
	width: 70%;
}

.support-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  margin: 20px 0;
}

/* Fix Ko-fi widget alignment */

.support-buttons iframe,
.support-buttons a {
  display: flex;
  align-items: center;
}

/* Optional: make sizes feel consistent */

.support-buttons img {
  height: 40px;
  width: auto;
}

.button {
    display: inline-block;
    padding: 0.6em 1.5em;
    font-size: 1rem;
    font-weight: bold;
    color: #fff; /* white text */
    background: linear-gradient(145deg, #ff4d6d, #ff758c); /* subtle pink-red gradient */
    border: none;
    border-radius: 0.5rem; /* rounded corners like your card */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 77, 109, 0.5); /* glow effect */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 77, 109, 0.7);
    background: linear-gradient(145deg, #ff758c, #ff4d6d);
}

.button a:visited {
	color: #fff;
}

.nowrap {
	white-space: nowrap;
}

/* Mobile tweaks */

@media (max-width: 600px) {
  .support-buttons {
    flex-direction: column;
  }
}

/* 
@media (max-width: 480px) {
	.title {
	}

	.content {
	}
}
*/

@font-face {
	font-family: "Neuropolitical";
	src: url('/assets/neuropolitical.ttf') format('truetype');
}