@import url('md_theme.css');

:root {
	--primary: #d4217b; /* Main brand color */
	--secondary: #d4fd1b; /* Accent color */
	--background: #1c1624; /* Light background */
	--window-title: #1f1f1f;
	--window-title-text: #836aff;
	--window: #2c2c2c;
	--window-border: #000000;
 	--text: #d4d4d4; /* Dark text */

  /* Typography */
  	--font-family: 'Roboto', sans-serif; 
  	--font-size-base: 16px; /* Base font size */
  	--font-size-large: 1.25rem; /* Larger text */
  	--font-size-small: 0.875rem; /* Smaller text */

	--banner: url(images/building_Paris_Palais_Royal_magenta.png);

  /* Borders and Shadows */
  	--border-radius: 8px; /* Rounded corners */
  	--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */

  /* Utility */
  	--transition-duration: 0.3s; /* Smooth transitions */
  	--max-width: 1200px; /* Content width */

}

@import url('https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
	margin: 0;
	display: flex;
	justify-content: center;
	background-image: url("/images/scrolling\ convulsion\ ticket.gif");
	background-color: black;
	color: var(--text);
	font-family: 'Press Start 2P', system-ui;
    align-items: center;
}

.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

p { line-height: 1.25; }

p a {
	text-decoration: none;
	color: var(--secondary);
}

hr {
	color: rgba(255, 255, 255, 0.13);
	width: 100%;
	
}

h1, h2 {
    color: #00ff04;
    text-shadow: 8px 6px 0px #F200FF;
    justify-self: center;
    align-self: center;
}

#container {
	/* border: 5px solid blue; temp border */
	margin: 0 12px; /* to maybe help with responsiveness? */
    align-self: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}




#flex {
	display: flex;
	flex-direction: column;
}

.story-entry {
	display: flex;
	flex-direction: row;
	background: linear-gradient(#ffffff13, #afeaca00, #0000003d);
	border-radius: 2px;
	border: 2px solid black;
}

.story-entry img {
	max-height: 300px;
	width: 300px;
	/* max-width: 150px; */
	width: auto;
	margin: 4px;
	overflow: hidden;
}

.story-entry p {
	margin-left: 8px;
	margin-right: 8px;
}

.window {
	/* temp border thing	 */
    background: #3d0035;
    background: linear-gradient(125deg,rgba(61, 0, 53, 0.87) 41%, rgba(80, 37, 75, 0.769) 70%, rgba(28, 65, 33, 0.786) 84%);
	/* glassy background idea */
	/* background: linear-gradient(160deg, #2c2c2cdb 0%, #2c2c2ccb 55%,#7e7e7e3a 80%,#8383833a 100%); */
	/* background: linear-gradient(70deg, #1c1c1cdb 0px, #181818db, 50%, #242228db 51%); */

	/* some margin thing here for vert spacing */
	margin: 4px 0;
    padding: 12px;
    display: flex;
    flex-direction: column;


	/* window titlebar formatting */
	border-radius: 4px;
	overflow: hidden;
	border: 2px solid var(--window-border);
	box-shadow: 3px 2px 4px 0px rgba(0,0,0,0.6),
				inset 0px 0px 0px 3px rgba(255, 255, 255, 0.097); /* inner outline */
}

.main-content {
	padding: 0 12px 0 12px;
	display: flex;
	flex-direction: column;

}


.content {
	padding: 12px;
	display: flex;
	flex-direction: column;
}

.content img {
	max-width: 100%;
	align-self: center;
	border: 4px outset #ffffff26;
	/* box-shadow: inset 0px 0px 0px 4px #f00; */
	/* padding: 4px; */
}
.titlebar-2 {
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;

	/* background: linear-gradient(#ffffff0c, #25262e00, #000000da); */
	background: linear-gradient(to bottom, #5f5657 0%,#36363e 45%,#1e1e1e 55%,#0b0828 100%);

	font-family: 'Quantico', 'Courier New', Courier, monospace;
	color: var(--window-title-text);
	font-size: 25px;
	text-align: center; /* horizontal center */
	line-height: px;

	border-radius: 4px;
	overflow: hidden;
	border: 2px solid var(--window-border);

}

.titlebar::before {
	content: attr(data-title);
	display: block;
	height: 35px;
	/* background: linear-gradient(#ffffff0c, #25262e00, #000000da); */
	background: linear-gradient(to bottom, #5f5657 0%,#36363e 45%,#1e1e1e 55%, #1c1b24 94%, #000000 100%);

	font-family: 'Quantico', 'Courier New', Courier, monospace;
	color: var(--window-title-text);
	font-size: 25px;
	text-align: center; /* horizontal center */
	line-height: px;
}

/* what icons in the titlebars look like */
.titlebar-2 span {
	background-color: #d4fd1b;
	font-size: small;

}


@media (max-width: 700px) {
	/* place column 1 on top of column 2 */

}