/* Modernized styles: keep legacy classes but add responsive layout and Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* #000077 = blue background  */
/* #5882FA = blue link */
/* #202020 = grey, inner box background (2) */
/* #404040 = grey, big main box background */
/* #AAAAAA = light green */
/* #AAAAAA = light grey text */

#site-root{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body {
        background: linear-gradient(180deg, #0f1724 0%, #111827 60%);
        color:#e6eef6;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        font-size:16px;
        margin:0;
        padding:0;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
}
h1 {
        font-size:14pt;
        color:#FFFFFF;
}
h1, h2, h3, h4 {
        font-family:Arial;
        font-weight:normal;
        /* Fix for IE bug, which results in main h1 being hidden by background! */
        position:relative;
}
h2 {
        font-size:1.7em;
}
h1 a:visited {
        color:#5882FA;
}
a, a:link {
        color:#5882FA;
        text-decoration:none;            
        font-family:Arial;
        font-size:1.0em;
}
a:hover, a:active {
        color:#AAAAAA;
        text-decoration:underline;
}

ul {
        text-align:left;
        list-style-type:disc;
        padding:0 0 0 1em;
        margin-left:0px;
        padding-left: 20px;
}

#main-box h1 {
        margin:0;
        color:#FFFFFF;

}

#logo {
        margin:4px 0 0 21px;
        text-align:center;
}
#main {
                                max-width:1100px;
                                margin:0 auto;
                                padding:3rem 1.25rem;
}

/* Site header */
.site-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        padding:1rem 0;
}
.site-title{
        display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:1.05rem;color:#dbeafe
}
.site-logo{height:44px;width:44px;max-width:120px;height:auto;display:inline-block}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:rgba(255,255,255,0.88);text-decoration:none;padding:.25rem .5rem;border-radius:6px}
.site-nav a:hover{background:rgba(255,255,255,0.03)}

.hero{background:linear-gradient(90deg, rgba(66,209,244,0.06), rgba(94,234,212,0.03));padding:2rem;border-radius:12px}
.card{background:rgba(255,255,255,0.03);padding:1.25rem;border-radius:10px}

@media (max-width:720px){
        #main{padding:1rem}
        .site-nav{display:none}
}

/* Modern utility classes */
.text-center{text-align:center}
.text-cyan{color:#42d1f4}
.text-white{color:#fff}
.text-large{font-size:1.25rem;line-height:1.75rem}
.text-xl{font-size:1.5rem;line-height:2rem}
.font-bold{font-weight:600}
.mt-2{margin-top:0.5rem}
.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}
.mb-2{margin-bottom:0.5rem}
.mb-4{margin-bottom:1rem}
.mb-8{margin-bottom:2rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.px-4{padding-left:1rem;padding-right:1rem}

/* Grid layout */
.grid{display:grid;gap:2rem}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){
  .grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid-cols-3{grid-template-columns:1fr}
}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){
  .grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .grid-cols-4{grid-template-columns:1fr}
}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:860px){
  .grid-cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:540px){
  .grid-cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:340px){
  .grid-cols-5{grid-template-columns:1fr}
}

/* Project cards */
.project-card{
  background:rgba(255,255,255,0.03);
  padding:1.5rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  transition:all 0.3s ease;
  text-decoration:none;
  display:block;
}
.project-card:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(66,209,244,0.4);
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.3);
  text-decoration:none;
}
.project-card img{
  border-radius:8px;
  margin-bottom:1rem;
  width:100%;
  height:auto;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:0.75rem 1.5rem;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s ease;
}
.btn-primary{
  background:linear-gradient(135deg,#42d1f4,#5edeca);
  color:#0f1724;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(66,209,244,0.3);
  text-decoration:none;
  color:#0f1724;
}

.centered {
        text-align:center;
        margin:1em;
}
.main-box-1 {
        /* background:url(starfield.jpg) top left repeat; */
        margin-top:-5em;
        margin-bottom:0em;
        margin-right:-1em;
        margin-left:-1em;
}
.main-box-1 h3 {
        margin:0 0 0.2em 0;
        font-size:1.2em;
        color:#FFFFFF;
        font-weight:normal;
}
.main-box-2 {
        padding:1em 4em 4em 4em;
        margin-bottom:2em;       /* spacing between boxes */
        margin-top:2em;          /* spacing between boxes */
        margin-left:4em;
        margin-right:2em;
        border: 1px solid #FFFFFF;
        border-radius: 10px;
        /* Pos & Width for IE bug */
        position:relative;
        color:#dddddd;               /* box text color */
        background-color:#000000;    /* inner box background color */
	    opacity:0.98;
}

.main-box-3 h3 {
        margin:0 0 0.2em 0;
        font-size:1.2em;
        color:#FFFFFF;
        font-weight:normal;
}

.main-box-3 {
        padding:0em 0em 0em 0em;
        margin-bottom:0em;       /* spacing between boxes */
        margin-top:0em;          /* spacing between boxes */
        position:absolute;
        width:90%;
        height:70%;
        margin-left:0em;
        color:#FFFFCC;               /* box text color */
        background-color:#444444;    /* inner box background color */
	    opacity:1.0;
	    overflow:auto; 
}

.ads {
        margin-top:6px;
        text-align:center;
}
#tabs {
        font-size:0.95em;        /* tab font size */
        margin-top:0px;       
        margin-right:0px;      
        margin-bottom:0px;    
        margin-left:5.3em;      
        padding:0;
        height:2.7em;	    /* distance between tab and next box below */
        font-weight:bold;
}
#tabs li {
        float:left;
        list-style:none;
        background:#202020; /*url(tab-right.gif) top right no-repeat;*/  /* tabs background color */
        border-radius: 8px;
        border:1px solid #FFFFFF;
	    opacity:1.0;
        padding:0;
        margin-top:0px;        /* distance around tabs */
        margin-right:2.0px;      /* distance around tabs */
        margin-bottom:0px;     /* distance around tabs */
        margin-left:2.0px;       /* distance around tabs */
}
#tabs li.on {
        background-color:#444444;  /* current tabs background color when selected */
	    color:#AAAAAA;
}
#tabs li a {
   /*     background:url(tab-left.gif) top left no-repeat;  */
        display:block;
        float:left;
        width:9.85em;              /* tab width */
        line-height:2.5em;	  /* tab height */
        color:#5882FA;            /* tab font color */
        text-decoration:none;
        text-align:center;
}
#tabs a:hover, #tabs a:active {
        text-decoration:underline;
        color:#AAAAAA;
        background:#444444;
        border-radius: 8px;
}

#main-box {
        position:absolute;
        top:0.5em;
        clear:left;
        margin:1em;
        padding:1em;
	    opacity:1.0;
        width:90%;
}

.p-indent {text-indent: 2em}

.faded {
        font-size:1.15em;
        color:#665c31;
        margin:.8em 0 0 1em;
        font-family:Arial;
        letter-spacing:.03em;
}
.large {
        font-size:1.6em;
}

#footer {
        /* background:url(starfield.jpg) top left repeat; */
        text-align:center;
        font-size:1.0em;
        color:#000000;      /* Font color */
        link:#5882FA;
        margin-top:-3em;
        margin-bottom:-1.3em;
        margin-right:-1.3em;
        margin-left:-1.3em;
}
#footer div {
        margin:0px 0px 0px 0px;
}
#footer a {
        color:#5882FA;
}



.clear-all {
        clear:both;
        height:1px;
        font-size:.001%;
}

.lists {
        padding:1em 0;
        border:1px solid #ffc;
        /* Pos & Width for IE bug */
        position:relative;
        width:100%;
}
.lists, .lists ul {
        background-color:#ffe87f;
}
.lists ul {
        margin:10;
        padding:10;
        list-style:none;
}
.lists li {
        padding-left:3em;
}
.lists li a {
        display:block;
        width:100%;
        padding:.2em .2em .2em .5em;
        border:1px solid #ffe87f;
}
.lists li a:visited {
        color:#606;
}
.lists li a:hover, .lists li a:active {
        background:#ffefa9;
        color:#f00;
        border-color:#ff9 #dd76 #dd7 #ff9;
}
.lists .multiple {
        font-weight:bold;
}

   
table.entry-data {
        color:#000000;
        font-family:Arial;
        font-size:1.0em;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        text-align:left;
        border: 1px solid #AAAAAA;
        border-radius: 8px;
        margin-top:2px;
        margin-right:5px;
}
table.entry-data.right {
        float:right; 
        width:70.0em;
}
table.entry-data.detail {
        margin: 1em 1em 1em 0;
        width:100%;
}
table.entry-data.detail caption {
        #margin: 1em 1em 1em 0;
}
.entry td {
        border-top:1px solid #AAAAAA;
}
.entry-data td {
        padding:5.4px;
}
.entry-data thead {
        font-weight:bold;
}
.entry-data th {
        padding:4px;
}
.entry.rowtext {
        background:#202020;
}
table caption {
        font-weight:bold;
        text-align:left;
        font-size:1.1em;
        padding:.1em;
}
.centered.narrow {
        padding:0 5em;
}
.narrow h2 {
        margin:1em 0 .5em 0;
}

.imageRounded {
        display:block;
	    position:static;
        border-radius: 8px;
        padding:0px 0px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        overflow: hidden;
        border: 0px solid #000000;
}

.imageRoundedLeft {
        float:left;
        margin-right: 50px;
        border-radius: 8px;
        padding:0px 0px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        overflow: hidden;
        border: 0px solid #000000;
}
.imageRounded:hover {
}

.imageIndex {
        height: 100px;
        width:  150px;
        display:block;
        text-align: center;
        border-radius: 20px;
        padding:0px 0px;
        border-spacing:1px 1px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        overflow: hidden;
        border: 1px solid #000000;
}

.imageWide {

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 109.5%;
    
    margin-left:-50px;
    margin-right:50px;
    margin-top:0px;
    margin-bottom:-50px;
    background-size: cover;
}

.imageIndex:hover {
        border: 1px solid #AAAAAA;
}


/***** For the slides of fish: Big = 600x400 (original), Small (thumbnail) = 60x40, iframe box = 300x200 *****/

.imageSlideSmall {
        border-radius: 8px;
        border-spacing:0px 0px;
        width:60px; 
        height:40px;
        padding:0px 0px; 
        margin:10px 0px;
        margin-right:12px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        overflow: hidden;
        border: 0px solid #000000;
}

.imageSlideSmall:hover {
        border: 1px solid #AAAAAA; 
}

.imageSlideBig {
        padding:0px; 
        margin-right:10px;
        border-radius: 8px;
        border: 1px solid #000000;
        width:300px;  
        height:200px; 
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        overflow: hidden;
}

.imageSlideBig:hover {
}

/*Apply this class to some text to unlock the secrets of the third dimension!*/
/* From: http://www.3dcsstext.com/ */
.Three-Dee{
font-family: Arial, sans-serif;
line-height: 1em;
color: #5883fa;
font-weight:bold;
font-size: 31px;
text-shadow:0px 0px 0 rgb(23,66,185),1px 1px 0 rgb(-6,37,156),2px 2px 0 rgb(-36,7,126), 3px 3px 0 rgb(-66,-23,96),4px 4px 3px rgba(0,0,0,0.45),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);}




div[class*='stack'] {
	float: left;
	position: relative;
	margin: 50px;
}

div[class*='stack'], div[class*='stack']:before, div[class*='stack']:after {
	border: 6px solid #fff;
	height: 80px; width: 121px;
}
 
div[class*='stack']:before, div[class*='stack']:after {
	background: #768590;
	content: "";
	position: absolute;
	z-index: -1;
	
	/*Dirty IE8 hack*/	
	height: 0px\9; width: 0px\9; 
	border: none\9;
}
 
div[class*='stack']:before {
	background: #eff4de;
}

/*STACK TWO ILLISION*/
.stacktwo:before {
	top: 0px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}
 
.stacktwo:after {
	top: 5px; left: 0px;
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	transform: rotate(4deg);
}