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

/* start light mode styling */
:root {
    --text: white;
    --border: #4A4E55;
    --accent: #79BC3B;
    --bg: black;
    --gradient-bottom: #0E0F10;
    --gradient-top: #25272A;
    --shadow: white;
    --h-text: #E48419;
    --main-font: "Igiari", serif;
    --h1-font: "Big Apple 3PM", sans-serif;
    --h2-font: "ChronoType", sans-serif;
    --h3-font: "ChronoType", sans-serif;
    --h4-font: "ChronoType", sans-serif;
    --h456-font: "ChronoType", sans-serif;
    --color1: #f390b0;
    --color2: #f8bac9;
    --color3: #fbd9e0;
}

header {
    background: url("../../../microscopy/arthrospira.png");
}
/* end light mode styling */

* {
    box-sizing: border-box;
    scrollbar-color: var(--border) var(--gradient-bottom);
}
html {
    overscroll-behavior: none;
}



.image-container {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .image-container::before {
            content: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.3s ease-in-out;
        }

        .image-container:hover::before {
            content: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png');
        }















body {
    padding: 10px;
    color: var(--text);

    /* page background pattern */
    background-color: var(--gradient-top);
    background-image: linear-gradient(
            30deg,
            var(--bg) 12%,
            transparent 12.5%,
            transparent 87%,
            var(--bg) 87.5%,
            var(--bg)
        ),
        linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)),
        linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)),
        linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)),
        linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)),
        linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg));
    background-size: 20px 35px;
    background-position:
        0 0,
        0 0,
        10px 18px,
        10px 18px,
        0 0,
        10px 18px;
        
}


.container {
    max-width: 85rem;
    margin: 5vw auto 12px auto;
    border: 6px ridge var(--border);
    outline: 3px solid var(--gradient-top);
    outline-offset: 4px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;

    /* container background pattern */
    background-color: var(--gradient-bottom);
    background-image: repeating-radial-gradient(circle at 0 0, transparent 0, var(--gradient-bottom) 9px),
        repeating-linear-gradient(var(--bg), var(--bg));
}
/* these control the column widths */
.small {
    flex: 1 1 5%;
}
.large {
    flex: 1 1 90%;
}
.full {
    flex: 1 1 100%;
}
.half {
    flex: 1 1 49%;
}




header {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 164px; /* change banner height here*/
    border: 2px ridge var(--border);
    border-radius: 5px;
    position: relative;
    image-rendering: pixelated;
}
header span {
    color: var(--h-text);
    font-family: 'Crang', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-size: 60px;
    position: absolute;
    bottom: -7px;
    left: 7px;
    margin: 10px;
    text-shadow:
    4px 4px 0 var(--shadow),
    -4px 4px 0 var(--shadow),
    -4px -4px 0 var(--shadow),
    4px -4px 0 var(--shadow);
}

/* nav {border: 2px ridge var(--border);border-radius: 5px;padding: 5px;background: linear-gradient(var(--gradient-top), var(--gradient-bottom));font-smooth: never;} */

nav { 
    border: 2px ridge var(--border);
    border-radius: 5px;
    padding: 3px;
    background: linear-gradient(var(--gradient-top), var(--gradient-bottom));
    font-smooth: never;
}
nav img {
    display: block;
    margin: auto;
    padding: 3px;
    text-decoration: none;
    font-smooth: never;
    width:231px;
    image-rendering: pixelated;
}
nav div {
    text-align: center;
    font-size: 16px;
    margin: 2px 2px 5px 2px;
}
/* nav a { display: block; margin: 5px; background: linear-gradient(to right, var(--bg), var(--gradient-bottom)); border-radius: 5px; padding: 2px 7px; text-decoration: none; font-smooth: never; } */
nav a:link,
nav a:visited {
    text-decoration: none;
}
nav a:hover,
nav a:focus {
}

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

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

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

h1 {
    color: var(--h-text);
    font-family: var(--h1-font);
    text-transform: uppercase;
    font-size: 34px;
    letter-spacing: 3px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px ridge var(--border);
    padding-bottom: 5px;
    margin: 5px;
    line-height: 1.2;
    text-shadow:
    2px 2px 0 var(--shadow),
    -2px 2px 0 var(--shadow),
    -2px -2px 0 var(--shadow),
    2px -2px 0 var(--shadow);
}

h2,
h3,
h4,
h5,
h6,
p,
em, sup, b, i, s, strong {
    color: var(--text);
    font-family: var(--main-font);
    margin: 5px;
    line-height: 1.12;
}

p, em, sup, b, i, s, strong {
    font-size: 16px;
}

ul, li {
    font-family: var(--main-font);
    margin: 4px;
    color: var(--text);
    line-height: 1.25;
    font-size: 16px;
  }

h2 {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    font-family: var(--h2-font);
    text-transform: uppercase;
    line-height: 1.05;
}
h3 {
    font-size: 32px;
    font-family: var(--h3-font);
    font-weight: normal;
    line-height: 1.12;
}
h4 {
    font-family: var(--h3-font);
    font-size: 28px;
    color: #79BC3B;
    padding-left: 7px;
    font-weight: normal;
    line-height: 0.75;
}
h5, h6 {
    font-family: var(--h456-font);
    font-weight: normal;
    line-height: 1.05;
}
h5 {
    font-size: 22px;
}
h6 {
    font-size: 16px;
}

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

a {
    font-family: var(--main-font);
    color: #39AF87;
    font-smooth: never;
}

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

a:visited {
    color: #EB9225;
}

.buttonbox {
    margin:auto;
    display:flex;
    flex-flow: row wrap;
    padding:4px;
    justify-content:center;
    align-items:center;
}

.buttonbox img {
    padding:2px;
}