:root {
  --DarkGray: #808080;
  --DarkGray35: #595959;
  --OffWhite: #d6d6d6;
  --MatWhite: #f0f0f0;
  --Gray: #808080;
  --white: #ffffff;
  --Black: #000000;
  --drMathArt: #5f9ea0;
  --drMathArt90: #dfebec;
  --drMathArt80: #bfd8d9;
  --drMathArt75: #afcecf;
  --drMathArt70: #bfd8d9;
  --drMathArt60: #80b1b3;
  --drMathArt25: #304f50;
  --Link: #0000A0;
  --LinkDecoration: #226c70;
  --circle-size: clamp(200px,80vw,450px);
  --circle-radius: calc(var(--circle-size) / 2);
  --circle-fs: calc(var(--circle-size) / 15);
  --circle2-size: calc(var(--circle-size) / 2 - 0.5em);
  --circle2-radius: calc(var(--circle2-size) / 2);
  --Minimum-Width; 325px;
}


body.splash  {
background-color: #ffffff; 
display: grid;
font-family: sans-serif; color: black;
background-image: url("/~dreimann/zeta-bg.png");
margin: 0px;
	}
	



a:link  {color: #000000; text-decoration: underline dotted #436e70;}
a:visited  {color: #000000;text-decoration: underline dotted #436e70;}
a:hover {color: #436e70;text-decoration: underline solid #436e70;}
  
header {
grid-row: 1;
padding-top: 1em;
padding-bottom: 0.8em;
background-color: #5f9ea0; 
}

.banner {
margin: 0em;
padding: 0em;
text-align:center;
border-bottom: .25em solid #AFCECF;
width: 100%;
}


a.homebutton:link  {color: #ffffff;text-decoration: none;}
a.homebutton:visited  {color: #ffffff;text-decoration: none;}
a.homebutton:hover {color: #AFCECF;text-decoration: none;}



.banner1 {font-size:1.75em;
font-variant: small-caps;
text-align:center;
margin: 0em;
padding: 0em;
width: 100%;
}

a.banner1:link  {color: #ffffff;text-decoration: none;}
a.banner1:visited  {color: #ffffff;text-decoration: none;}
a.banner1:hover {color: #ffffff;text-decoration: none;}

.navbox {font-size:1.25em;
width: 100%;
text-align:center;
font-variant: normal;
margin-bottom: 0em;
margin-top: 0em;
}

.navbutton {
text-align:center;
padding:  0.25em;
   color: white;
   text-decoration: none;
	text-decoration: none;
}

   
 .navbutton:active {
   background: #808080;
   color: white;
   }
   
a.navbutton:link  {color: #000000;text-decoration: none;}
a.navbutton:visited  {color: #000000;text-decoration: none;}
a.navbutton:hover {color: #AFCECF;text-decoration: none;}
 
nav {
    text-align: center;
margin: 0em;
padding: 0em;
 }

nav ul {
    list-style-type: none;
	background-color: #5f9ea0;
    color: white;
    text-decoration: none;
margin: 0.25em;
padding: 0em;
}

nav li {
    display: inline;
	margin: 0.25em;
	padding-left: 0.25em;
	padding-right: 0.25em;
}	


footer {font-size:.9em;
    text-align: center;}

footer hr {
    border: none;
    border-top: .25em solid #5f9ea0;
color: #ffffff;
background-color: #ffffff;
height: 0px;
}


div.news {
color: #000000; 
background-color: var(--drMathArt90);
padding:1em;  
margin-top:1em;  
margin-bottom:1em;  
	text-align:left; display: inline-block;
}


h1 {font-size:1.44em;
    font-weight: bold;
font-variant: normal;}

h2 {font-size:1.2em;
    font-weight: bold;
font-variant: normal;}


h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0em;
}

h2 + p {margin-top: 0.25em; } 
h2 + ul {margin-top: 0.25em; } 
h2 + figure {margin-top: 0.25em; } 
h4 + p {margin-top: 0.25em; } 


footer  {
	background-color: var(--DarkGray);
	color: var(--white);
	padding: 0.5em;
	min-width: var(--Minimum-Width);
}

.footer-inset {
  padding: 0.5em;
  border: solid var(--drMathArt) 2px;
  box-sizing: border-box;
  text-align: center;
}

.footer-section {
	padding: 0em;
	margin: 0em;
}

.socials {
	padding-left: 2em;
	padding-right: 2em;
}
.socials:first-child {
    padding-left: 0em;
}
.socials:last-child {
    padding-right: 0em;
}

img.social {
height: 32px;
width: 32px;
vertical-align: sub;
padding: 1em;
border-radius: 24px;
}


.container {
  display: flex; /* Enables Flexbox for the container */
  flex-wrap: wrap; /* Allows columns to wrap to the next line */
  max-width: 768;
}

.bottom-container {

}

  .bottom-column  {
  padding-left: 20px;
  }
  
.left-column,
.right-column {
  flex: 1; /* Allows columns to grow and shrink proportionally */
  padding: 20px;
  box-sizing: border-box; /* Includes padding in the element's total width */
}


  .left-column {
	 line-height: 1.5;
  }

/* Wide screen styles (default) */
@media screen and (min-width: 768px) {
	body {font-size: 16px;}
  .left-column {
    order: 1; /* Forces left column to appear second on wide screens */
  }
  .right-column {
    order: 2; /* Forces right column to appear first on wide screens */
  }
  .right-column {
	max-width: 296;
  }
  

}

/* Narrow screen styles */
@media screen and (max-width: 767px) {
	body {font-size: 16px;}
	.container {
	flex-direction: column; /* This stacks the items vertically */
}

  .left-column,
  .right-column {
    width: 100%; /* Makes columns full width on narrow screens */
  }
  .left-column {
    order: 2; /* Ensures left column appears after right column */
  }
  .right-column {    
	width: 100%;
	  text-align: center;
    order: 1; /* Ensures right column appears first */
  }
  
  .bottom-column  {
	width: 100%;
  }
}