/*
    not-longevity.css - Global Variables and Functions Across All notlongevity.com Pages
    Website iteration 1 : "¡Hola Mundo!" | v 0.3.7

	
	change log [day.month.year]:

	26.09.2026 - update box styling; -wm
    18.09.2026 - article margin adjustments; -wm
	08.09.2026 - figure margins; emailIt integration; quote styles; -wm
	09.08.2026 - breakout text styling;li, ol and a stylings;li and # styling;bring class emoji-text-shadow from global;img widths to 100% in small screens;img to 100% in small screens;bring figure components from global.css;h1 font size small screen; -wm
	07.08.2026 - font styles larger;classes: center, clear, breakout; -wm
	06.08.2026 - a styles; -wm
	05.08.2026 - Init, custom from global.css import from biliscraft.co;main margins; -wm
	
*/


a:link {
	background-color: rgb(255,112,77,0.5);
	color: #f5f5f5;
	text-decoration: none;
	padding: 0 5px;
}

a:visited {
	background-color: rgb(102,255,255,0.5);
	color: navy;
	text-decoration: none;	
	padding: 0 5px;	
}
a:hover {
	background-color: rgb(230,0,0,0.2);
	color: white;
	text-decoration: underline;		
	padding: 0 5px;
}
a:active {
	background-color: white;
	color: black;
	text-decoration: underline;
	padding: 0 5px;
}

article {
    margin: auto 1em;
}

body {
	margin: 0;
	background-color: lightblue;
	color: indigo;
	text-align: center;
	scroll-behavior: smooth;
	/* body background image settings */
	background-image: url('../media/images/backgrounds/flyleaf.jpg');
	background-repeat: repeat-y;
	background-size: auto 100%;
	background-position: center top;
	opacity: 1;
	/*footer to sit at bottom*/
	height: 100%;
	display: flex;
	flex-direction: column;
	font-size: 2em;
}

button {
	position: fixed; 
	bottom: 30px; 
	right: 30px; 
	background: rgba(255, 255, 255, 0.3); 
	-webkit-backdrop-filter: blur(10px); 
	backdrop-filter: blur(10px); 
	border: 1px solid rgba(255, 255, 255, 0.4); 
	padding: 12px; 
	border-radius: 50%; 
	width: 60px; 
	height: 60px; 
	cursor: pointer; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.4s ease, 
	transform 0.2s ease; 
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

figure {
	width: 25%;
	float: left;
	margin: auto 1em 1em auto;
}

figure img {
    width: 100%;
	height: auto;	
    box-shadow: 3px 5px 10px var(--shadow-color);
}

figcaption, .text-caption {
    font-size: 90%;
    font-style: italic;
    margin: 0.2em 0.2em auto;
}

footer {
	font-size: 80%;
}

h1 {
	font-family: "Sekuya", system-ui;
  	font-weight: 400;
  	font-style: normal;
	text-shadow: -1px -1px 1px #f5f5f5, 1px 1px 3px #888;
}

h1, #update-date {
	font-family: "Sekuya", system-ui;
}

h1, h2 {
	color: indigo;
}

html {
	height: 100%;
}

i {
	color: dodgerblue;
	font-weight: 600;
}

iframe {
	text-align: center;
}

li {
	margin: 1.25em auto;
	padding: 2em 1em;
	border: 1px dotted red;
	box-shadow: 3px 3px 15px orange;
	background-color: rgb(255,255,204,0.5);
	width: 92%;
}

/* LI BACKGROUND COLOR ROTATION */			
	li:nth-child(4n+1) { background-color: rgba(233,226,233, 0.8); } /* lavender */
	li:nth-child(4n+2) { background-color: rgba(189,183,107, 0.7); } /* green */
	li:nth-child(4n+3) { background-color: rgba(198,159,159, 0.8); } /* red */
	li:nth-child(4n+4) { background-color: rgba(255,255,204, 0.8); } /* straw */

ol {
	list-style-type: none;
	margin-left: -1em;
	overflow: auto;
}			

main {
	flex: 1; /* takes remaining space */
	font-family: Verdana, sans-serif;
	text-align: left;
	margin: 0 1em;
	letter-spacing: 0;
	margin-bottom: 5em;
}

.breakout {
	background-color: rgb(255,128,0,0.3);
	border-top: 1px solid white;
	border-right: 1px solid crimson;
	border-bottom: 1px solid crimson;
	border-left: 1px solid white;	
	padding: 0.5em;
	box-shadow: 2px 2px 10px brown;
	text-shadow: -1px -1px 2px #f5f5f5, 1px 1px 4px grey;
}

.center {
	text-align: center;
}

.clear {
	clear: both;
}

.email {
	text-decoration: underline;
	color: indigo;
	font-style: italic;
}

.emoji-text-shadow {
    text-shadow: 1px 1px #555;
}

.potassium-columns {
	display: flex;
	gap: 24px;          /* space between columns */
	align-items: flex-start;
	margin-top: 1em;
}
	
.potassium-columns > div {
  	flex: 1;            /* make columns share space */
}

.quote {
	font-style: italic;
	font-weight: bold;
	letter-spacing: 1px;
}

.text-extend {
	letter-spacing: 0.5rem;
}

[id^="narrative-"] {
	background: rgba(173, 216, 230, 0.7);
	padding: 0.5em 1em;
}

#narrative-rememberance {
	width: 80%;
	margin: auto;
	display: block;
	text-align: left;
}

#update-date {
	background-color: rgb(127,0,255,0.5);
	padding: 0.5em 1em;
	color: #f5f5f5;
	border: 2px solid maroon;
	box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
	
	body {
		font-size: 120%;
	}

	figure {
		width: 100%;
		margin: 0.15em;
	}

	h1 {
		font-size: 2.75rem;
	}
	
	img {
		width: 100%;
	}
	
    main {
	    margin: 0 0.25em;
    }

	.margin-top--adjustment {
		margin-top: 1em;
	}
	
	.potassium-columns {
	    flex-direction: column;				  
	}
}