/* CYANOBACTERIA.CSS v1.1 */
/* HTML/CSS layout template from https://ribo.zone/free/layouts/ */
/* last updated: june 28, 2026 */

/* start light mode styling */

/* end light mode styling */
:root {
		--text: #ffffff;
		--border: #c3d7f1;
		--accent: #65C2F5;
		--bg: #dce3e1;
		--gradient-top: white;
		--gradient-bottom: rgb(238, 241, 243);
}	
	header {
		background: url('../../../microscopy/dolichospermum.png');
	}

/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: white;
			--border: #c3d7f1;
			--accent: #65C2F5;
			--bg: #ffffff2f;
			--gradient-bottom: #0487E2;
			--gradient-top: #65C2F5;
		}
		a:link { color: lightblue; }
		header {
			background: url('https://64.media.tumblr.com/b8d207939b220511049604609c2224c3/tumblr_n7rjr07El21r7y61oo1_400.gifv');
      filter: saturate(1) brightness(1) contrast(1.1) hue-rotate(20deg) invert(0%) sepia(0%) saturate(100%);
		}
}

/* end dark mode styling */

/* MARQUEE CONTENT */
.marquee {
 cursor: pointer;
}
.marquee-container {
  overflow: hidden; /* Hides the text that goes off-screen */
  white-space: nowrap; /* Forces text to stay on a single line */
  display: flex;
  background: #333;
  color: #fff;
  padding: 5px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  /* Animates the track infinitely in a linear fashion */
  animation: scroll-left 15s linear infinite; 
}

.marquee-content {
  padding-right: 50px; /* Space between the text segments */
}

/* The infinite animation mechanism */
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-container.marquee-track:hover {
  animation-play-state: paused;
  cursor: pointer;

}
/* MARQUEE CONT END!! */

/* reduce the marquee height by 4px (from ~200px to ~196px) */
.container > marquee {
  display: block;
  height: 35px;
  overflow: hidden;
  line-height: 0;
  margin: 0;
}
/* stop the inline images from leaving extra baseline space below the marquee */
.container > marquee img {
  display: inline-block;
  vertical-align: top;
}

* {
	box-sizing: border-box;
	scrollbar-color:  var(--border) var(--gradient-bottom);
}
html {
	overscroll-behavior: none;
}
body {
	padding: 0px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);
  background-image: url("images/okumono_waterbg.png");
}


/* CSS Styling */
.sticky-bottom-right {
  position: fixed;   /* Anchors the image to the browser window */
  bottom: 5px;      /* Distance from the bottom edge of the screen */
  right: 5px;       /* Distance from the right edge of the screen */
  z-index: 9999;     /* Ensures it floats on top of all other elements */
  width: 60px;       /* Adjust size as needed */
  height: auto;      /* Keeps the image aspect ratio intact */
}

/* CSS Styling */
.sticky-bottom-right2 {
  position: fixed;   /* Anchors the image to the browser window */
  bottom: 5px;      /* Distance from the bottom edge of the screen */
  right: 20px;       /* Distance from the right edge of the screen */
  z-index: 9999;     /* Ensures it floats on top of all other elements */
  width: 100px;       /* Adjust size as needed */     /* Keeps the image aspect ratio intact */
  margin-right: 120px; /* Adjusts the position to the left of the first image */
}

.sticky-left-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000; /* Keeps the image above other elements */
  width: 8%;  /* Change to your preferred size */
}

.draggable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.draggable:active {
  cursor: grabbing;
}

.container {
	max-width: 950px;
	/* CHANGE THIS LINE: Set the first number to 0px (or -5px to push it even higher) */
	margin: -15px auto 12px auto; 
  outline: 2px solid #ffffff;
	outline-offset: 5px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: 3px;
	gap: 4px;
  height: 800px;

	/* container background pattern */
	background-image: linear-gradient(white,lightblue)
}

.tumblrwob {
display:flex;
flex-wrap:wrap;
justify-content:center;
white-space:pre;
font-size: 1em;
font-family: Arial;
}

.tumblrwob > .tumblrwob:nth-child(4n+1) {
-webkit-animation:tumblrwobble 4s ease-in-out -.5s infinite;
animation:tumblrwobble 4s ease-in-out -.5s infinite
}

@keyframes tumblrwobble{
0%  { transform:translateY(5%) skew(3deg) }
25% { transform:translateY(-5%) }
50% { transform:translateY(5%) skew(-3deg) }
75% { transform:translateY(-5%) }
to { transform:translateY(5%) skew(3deg) }
}

@-webkit-keyframes tumblrwobble{
0%  { transform:translateY(5%) skew(3deg) }
25% { transform:translateY(-5%) }
50% { transform:translateY(5%) skew(-3deg) }
75% { transform:translateY(-5%) }
to { transform:translateY(5%) skew(3deg) }
}

.tumblrwob > .tumblrwob:nth-child(4n+2){
-webkit-animation:tumblrwobble 4s ease-in-out -1s infinite;
animation:tumblrwobble 4s ease-in-out -1s infinite;
}

.tumblrwob > .tumblrwob:nth-child(4n+3){
-webkit-animation:tumblrwobble 4s ease-in-out -1.5s infinite;
animation:tumblrwobble 4s ease-in-out -1.5s infinite;
}

.tumblrwob > .tumblrwob:nth-child(4n){
-webkit-animation:tumblrwobble 4s ease-in-out 0s infinite;
animation:tumblrwobble 4s ease-in-out 0s infinite;
}

/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

/* SPA page switching: only the active page is shown */
.pageholder .page {
	display: none;
}
.pageholder .page.active {
	display: block;
}


/* ROW THAT HOLDS SIDEBARS + MIDDLE PAGEHOLDER */
.mainrow {
	display: flex;
	flex: 0 0 auto;
	gap: 5px;
	width: 100%;
	align-items: flex-start;
}

/* the middle content matches the nav bar's height and scrolls internally */
.pageholder {
	flex: 0 1 calc(60% - 10px);
	max-height: 475px;
	overflow-y: auto;  
}

.pageholder .page {
	width: 100%;
	height: auto;
}


/* sidebars inside the row */
.mainrow .small {
	flex: 1 1 10%;
	min-width: 100px;
	align-self: flex-start;
	overflow: visible;
  height: 475px;
}

/* keep header + marquee from shrinking */
.container > header,
.container > marquee {
	flex: 0 0 auto;
}

/* bottom placeholder sections stay in the HTML but don't take up layout space */
.container > section.full,
.container > section.half:not(.pageholder) {
	display: none;
}



header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 10px 10px 3px 3px;
	position: relative;
}
header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradient-top);
}

/* MUSICPLAYER CONT START! */

.sidebox{
border: 0px solid #eafffe;
background-color: #eafffe;
margin: 0px 0px 0px 0px;
Width: 95%;
margin-left: 5px;
padding: 0px 0px 0px 0px;
}

#musicplayer{
background: linear-gradient /* W3C, IE10+, FF16+, Chrome26+, Safari7+ */;
border-bottom: 0px solid #709bff;
width:95%; /* width of the player */
transform: translateY(5px); 

}

.songtitlebox{
background: linear-gradient(to bottom, #e2f3ff 1%,#a5d5ff 49%,#85b4ff 51%,#ebf0f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 0px solid #709bff;
width:100%; /* width of the player */
margin-left: -1px;

}
 
.songtitle{
font-family: 'OffBit Trial', sans-serif;
font-weight: normal;
letter-spacing: 0px;
line-height: 1;
font-size: 13px;
padding:5px; /* padding around song title */
display:block;
width:100%;
}
 
.controls {
  font-size: 15px !important;
  background-color: #ffffff;
  text-align: center;
  width: 100%;
  /* AJUSTADO: De -9px a -4px para que no suba tanto */
  transform: translateY(0px); 
}
.controls td {
  /* CAMBIADO: De 8px a 3px para recortar 5px de altura */
  padding: 0px 0px 0px 0px; 
}
 
.seeking {
  background-color: #ffffff;
  display: flex;
  justify-content: space-evenly;
  padding: 5px;
  /* AJUSTADO: De -14px a -9px */
  transform: translateY(-5px);
  margin-left: 0px;
  width: 100%;
}
 
.current-time{
padding-right:5px;
color:#000000;
font-size: 11px;
transform: translateY(-2px);
}
 
.total-duration{
padding-left:5px;
color:#000000;
font-size: 11px;
transform: translateY(-2px);
}
 
i.fas:hover{
cursor:help;
}
 
i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
color:#ffffff; /* color of controls */
}
    
input[type=range] {
-webkit-appearance: none;
width: 100%;
background-color:#fff; /* background color of seeking bar - make the color same as .seeking background color */
}
    
input[type=range]:focus {
outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: help;
background: #0487E2; /* color of seeking track */
}
    
input[type=range]::-webkit-slider-thumb {
height: 5px; /* height of seeking square */
width: 5px; /* width of seeking square */
border-radius: 5px; /* change to 5px if you want a circle seeker */
background: #0487E2; /* color of seeker square */
cursor: help;
-webkit-appearance: none;
margin-top: -4.5px; 
}
    
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: help;
background: #0487E2; /* color of seeking track */
transform: translateY(-3px);
}
    
input[type=range]::-moz-range-thumb {
height: 5px; /* height of seeking square */
width: 5px; /* width of seeking square */
border-radius: 5px; /* change to 5px if you want a circle seeker */
background: #0487E2; /* color of seeker square */
cursor: help;
border:none;
transform: translateY(-3px);
}


   
input[type=range]::-webkit-slider-thumb {
height: 10px; /* height of seeking square */
width: 10px; /* width of seeking square */
border-radius: 5px; /* change to 5px if you want a circle seeker */
background: #0487E2; /* color of seeker square */
cursor: help;
-webkit-appearance: none;
margin-top: -4.5px; 
}
    
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: help;
background: #0487E2; /* color of seeking track */
}
    
input[type=range]::-moz-range-thumb {
height: 5px; /* height of seeking square */
width: 5px; /* width of seeking square */
border-radius: 5px; /* change to 5px if you want a circle seeker */
background: #0487E2; /* color of seeker square */
cursor: help;
border:none;
}

/* MUSICPLAYER CONT END! */


/* LAST.FM WIDGET START! */

.sidebox2{
border: 0px solid #eafffe;
background-color: #eafffe;
margin: 0px 0px 0px 0px;
Width: 100%;
margin-left: 0px;
}

.title-container {
background: linear-gradient(to bottom, #e2f3ff 1%,#85b4ff 49%,#dfebff 51%,#6fa6ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 0px solid #ffffff00;
width:94%; /* width of the player */
margin-left: 5px;
transform: translateY(5px);
  overflow: hidden;
  background-clip: padding-box;
}
.title-container h1 {
    font-family: 'OffBit Trial', sans-serif;
    letter-spacing: 0.5px;
    line-height: 5px;
    font-size: 12px;
    padding: 7px; 
    display: block;
    width: 100%;
    transform: translateY(-17px);
    text-decoration: none;
	border-bottom: none !important;
	margin-left: 2px;
  }
.lastfm-widget {
  /* Box styling */
  font-family: 'Onli', sans-serif;
  background-color: #ffffff;
  border: 0px solid #e0e0e000;
  border-radius: 0px;
  box-shadow: 0 0px 0px rgba(255, 255, 255, 0);
  overflow: hidden;
  padding: 0px;
  width: 100%;
  
  /* Layout isolation */
  position: relative;
  overflow: scroll;
  transform: translateY(-17px); 
}
/* LAST.FM WIDGET END! */

.sidebox3{
border: 0px solid #eafffe;
background-color: #eafffe;
margin: 0px 0px 0px 0px;
Width: 100%;
margin-left: 0px;
overflow: hidden;
}

.title-container2 {
background: linear-gradient(to bottom, #e2f3ff 1%,#a5d5ff 49%,#85b4ff 51%,#ebf0f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 0px solid #ffffff00;
width:94%; /* width of the player */
transform: translateY(5px);
height: 33px;
margin-left: 5px;
overflow: hidden;
background-clip: padding-box;
z-index: 99;
}
.title-container2 h1 {
    font-family: 'OffBit Trial', sans-serif;
    letter-spacing: 0.2px;
	margin-left: 0px;
    line-height: 0px;
    font-size: 12px;
    display: block;
    width: 100%;
    transform: translateY(-10px);
    text-decoration: none;
	border-bottom: none !important;
}


#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
    
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
 margin: 0 1em 0.5em 1em;
margin-left:-10px;
  
}

nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradient-top),var(--gradient-bottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 0px 5px 5px;
}
nav a {
	display: block;
	margin: 2px;
	background: linear-gradient(to right,var(--bg),var(--gradient-bottom));
	border-radius: 5px;
	padding: 0px 10px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradient-bottom), var(--gradient-top));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 0px auto;
	border:0px ridge var(--border);
	border-radius: 0px;
}

.my-container {
  background-color: white; /* Makes the background white */
  padding: 15px;           /* Adds space inside the container */
  color: rgba(0, 0, 0, 0.527);            /* Ensures text is readable */
}



section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradient-top),var(--gradient-bottom));
	padding: 10px;
}

/* --- INTEGRATED 3-COLUMN ROWS ENGINE --- */
.custom-three-column-row {
  display: flex !important;
  flex-direction: row;
  width: 100%;                    /* Fits perfectly inside your main 950px master .container */
  gap: 5px;                       /* Matches your layout's exact element gap */
  margin: 10px auto;
  align-items: flex-start;        /* Keeps alignments flush from the top edge */
  box-sizing: border-box;
  transform: translateY(-10px);      /* Adjusts the row's vertical position */
}

/* Center Column: Restores original gradients + nested 12px inset white panel */
.custom-three-column-row .center-main-column {
  flex: 1 1 60%;                  /* Matches your template's pageholder row width weighting */
  border: 2px ridge var(--border); /* Inherits your clean theme ridge lines */
  border-radius: 2px;             /* Inherits design border geometry */
  background: linear-gradient(var(--gradient-top), var(--gradient-bottom)); /* Light/Dark auto-gradients */
  box-sizing: border-box;
  padding: 7px;                  /* Provides breathing space for the inset text card */
  position: relative;
  z-index: 1;
}

/* THE INSET WHITE CARD MATRIX */
.custom-three-column-row .center-main-column::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #ffffff;
  border-radius: 3px;
  z-index: -1;                    /* Keeps the card safely behind your content text */
}

/* --- 1. NEW ROW: LEFT SIDEBAR BOX --- */
.custom-three-column-row .left-side {
  flex: 0 1 20%;                  /* Each side handles exactly 20% of the row space */
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  padding: 0px;
  box-sizing: border-box;
  font-size: 0.9rem;
  
  /* CLOCKWISE CORNERS: (Top-Left, Top-Right, Bottom-Right, Bottom-Left) */
  /* Example: Round on the left side only */
  border-radius: 2px 2px 2px 10px; 
}

/* --- 2. NEW ROW: RIGHT SIDEBAR BOX --- */
.custom-three-column-row .right-side {
  flex: 0 1 20%;                  /* Each side handles exactly 20% of the row space */
  border: 2px ridge var(--border);
  background: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  padding: 0px;
  box-sizing: border-box;
  font-size: 0.9rem;
  
  /* CLOCKWISE CORNERS: (Top-Left, Top-Right, Bottom-Right, Bottom-Left) */
  /* Example: Round on the right side only */
  border-radius: 2px 2px 10px 2px; 
}


/* Mobile responsive fallback layout */
@media (max-width: 768px) {
  .custom-three-column-row {
    flex-direction: column;
    gap: 5px;
  }
  .custom-three-column-row .center-main-column,
  .custom-three-column-row .side-column {
    flex: 1 1 100%;
    width: 100%;
  }
}



footer {
	text-align: center;
	margin-bottom: 10px;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
}

h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 0px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}

a:visited {
	color: var(--accent);
}