@font-face {
  font-display: swap;
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: local('ABeeZee'), url('/fonts/ABeeZee.woff2') format('woff2');
}


* {
margin: 0;
padding: 0;
}

: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;
}

/*
@media(preferes-color-scheme: dark) {
}
*/

html { 
font-size: 1em;
}

body  {font-family:'ABeeZee'; 
background-color: var(--white); 
/* hanging-punctuation: first allow-end last; */ /* Some day */
}

ul {
	margin-left: 2.5em;
}

li {margin-bottom: .25em;}

p {
    margin-top: 1em;
}

header {
background-color: var(--DarkGray);
color: var(--OffWhite);
padding-top: 1em;
padding-bottom: 0.8em;
}

a {
text-decoration: none;
}

a:link  {color: var(--Link);}
a:visited  {color: var(--Link); text-decoration: none;}
a:hover {color: var(--Link); text-decoration: underline;text-decoration-color: var(--LinkDecoration);}

a.homebutton:link  {color: var(--OffWhite);text-decoration: none;}
a.homebutton:visited  {color: var(--OffWhite);text-decoration: none;}
a.homebutton:hover {color: var(--white);text-decoration: none;}



.navbutton {
text-align:center;
	color: var(--OffWhite); 
   text-decoration: none;
}

.navbutton:hover {
	color: var(--white);
	-webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
	}
   
 .navbutton:active {
   color: var(--white);
   }
   
a.navbutton:link  {color: var(--OffWhite);text-decoration: none;}
a.navbutton:visited  {color: var(--OffWhite);text-decoration: none;}
a.navbutton:hover {color: var(--white);text-decoration: none;}

	
nav {
    text-align: center;
 }

nav ul {
    list-style-type: none;
	background-color: var(--DarkGray);
    color: var(--white);
    text-decoration: none;
padding: 0em;
}


nav li {
    display: inline;
}	

nav ul li a {
margin: 0.25em;
}

main {
	min-width: var(--Minimum-Width);
	box-sizing: border-box;
}

main.artworks {
	line-height:1.5;
	max-width: 950px;
	margin: auto;
	padding: 0.5em;	
}

main.gallery {
	max-width: revert;
	padding: 0.5em;	
}

main.news {
	line-height:1.5;
	max-width: 950px;
	margin: auto;
	padding: 0.5em;	
}

main.art {
	line-height:1.5;
	max-width: 950px;
	margin: auto;
}

main.general {
	line-height:1.5;
	max-width: 950px;
	margin: auto;
	padding: 0.5em;	
}

main.landing {
	max-width: 100%;
	/* background-image: url("bgImage80.jpg");*/
background-image: linear-gradient(to bottom, var(--drMathArt75), var(--drMathArt));
  margin: 0em;
  padding: 0em;
background-position: center;
background-repeat: repeat;
min-height: 50vh;
padding: calc(0.25 * var(--circle-radius)) 1em calc(0.25 * var(--circle-radius)) 1em;
text-align: center;
}

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

.footer-inset {
  padding: 0.5em;
  border: solid var(--drMathArt) 1px;
  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;
}

.copylink-containter{
	position: absolute;
	top: 50vh;
	padding: 2em;
	z-index: 999999999;
}
.linktooltips-container{
	background-color: var(--black);
	color: var(--white);
	padding: 1em;
	border-radius: 1em;
}


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

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

.dropcap {
	color: var(--drMathArt);
    float: left;
    font-size: 6em;
    line-height: 4.5em;
    padding-right: .1em;
    padding-top: .3em;
}


h2.cv {
	font-size:1.44em;
    font-weight: normal;
font-variant: normal;
    border-bottom: .1em solid var(--drMathArt);
}


h1, h2, h3, h4, h5, h6 {
    border-bottom: .1em solid var(--drMathArt);
	margin-bottom: .5em;
	margin-top: 1em;
}

/*
h3 + p {margin-top: 0.5em; } 
h3 + ul {margin-top: 0.5em; } 
h3 + figure {margin-top: 0.5em; } 
*/

ul.cv {
	line-height: normal;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: 0em;
	list-style: none;
}

ul.cv ul {
margin-left: 2.5em;
}

ul.cv li {
margin-bottom: 1em;
}

emph{font-style: italic;}


li::marker {
  color: var(--drMathArt);
}

/*

ul.cv li emph{font-style: italic;}
  */
.math {font-family: "Times New Roman", Times, serif; 
    font-style: italic;}
    

dl {margin-left: 2em;}
dt {font-weight: bold;}
dd {margin-bottom: 0.5em;}

 
div.bio {
padding-left: 2em;
padding-right: 2em;
clear: left;
overflow: auto;
}

img.bio {
    float: right;
    padding-left:2em;
	bottom:2em;
	height:var(--circle-size);
	width:calc(var(--circle-size) * 375 / 500);
}

figure.biog {
    float: right;
    margin: 0;
	margin-left: 1em;	
	font-size: 0.9em;
}

img.biog {
	bottom:2em;
	height:var(--circle-size);
	width:calc(var(--circle-size) * 375 / 500);
}

figcaption.biog {
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	text-wrap: balance;
}


.row {
padding-left: 2em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.left {
  background-color: blue;
  width: 50%;
}

.right {
  background-color: green;
  
}

div.gallery {
       text-align: center;
	   padding-bottom: 1em;
	   padding-top: 1em;
}

div.thumb-outer {
   /*margin: 1em;*/
   padding: 1em;
   border: 0px;
   display: inline-block;
   border: 1px solid #ffffff;
   width: 240px;
   border-radius: 0.5rem;
}

div.thumb-outer:hover {color: #000000;  text-decoration: none;  border: 1px solid #5f9ea0;
background: var(--MatWhite);}



div.thumb {
   width: calc(200px + 2.4em);
   height: calc(200px + 2.4em);
   text-align: center;
   border: 0px;
   padding: 0px;
   margin: 0px;
   height: 100%;
   width: 100%;
   object-fit: contain;
   /*
   display: inline;
   vertical-align: text-bottom;
   */
}

img.thumb2D {
   border: .2em solid black;
   padding: 1em;
   background: var(--MatWhite);
}

img.thumb3D {
   border: 0px;
   height: 100%;
   width: 100%;
   object-fit: contain;
}

span.title {
	margin-top: 0.5em;
   display: block;
    text-align: center;
	height: 3em;
	text-wrap: balance;
}

span.media {
   display: block;
    text-align: center;
}

span.year {
   display: block;
    text-align: center;
}

span.italics {
	font-style: italic;
}


span.title2 {font-style: italic;  font-weight: bold;}

.center {text-align: center; }

figure.cover {width:200px;}

span.smallcaps {
  font-variant: small-caps;
}

a.thumblink {color: var(--Black); text-decoration: none;}




img.art {
	padding: 0px;
	margin: 0px;
	border: 0px;
	max-height: 75vmin;
}


div.art {
       text-align: center;
       background:  var(--OffWhite);
	   padding: 2em;
	margin-bottom: 2em;
}





blockquote {
    margin: 0;
	padding: 1em;
	border-radius: 0.5em;
	background: var(--OffWhite);
	border: solid .15em var(--drMathArt);
}

blockquote footer {
text-align: right;
}


figure.left {
	width: 25vmin;
	float: left;
    margin: 0;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-right: 1em;
	padding: 1em;
	border-radius: 0.5em;
	/* background: var(--OffWhite);*/
	font-size: 0.9em;
}

figure.left img {
	width: 25vmin;
    margin: 0;
}

figure.right {
	width: 25vmin;
	float: right;
    margin: 0;
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 1em;
	padding: 1em;
	border-radius: 0.5em;
	/* background: var(--OffWhite);*/
	font-size: 0.9em;
}

figure.right img {
	width: 25vmin;
    margin: 0;
}

figure.center {
    margin: 1em;
    margin: 0;
    margin-top: 1em;
    margin-bottom: 1em;
	padding: 1em;
	border-radius: 0.5em;
	/* background: var(--OffWhite);*/
	font-size: 0.9em;
}

figure.center img {
	width: 100%;
    margin: 0;
}

figure.many {
    text-align: center;
    margin: 1em;
    margin: 0;
    margin-top: 1em;
    margin-bottom: 1em;
	padding: 1em;
	border-radius: 0.5em;
	/* background: var(--OffWhite);*/
	font-size: 0.9em;

}
div.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
}

img.two {
	width: 100%;
	height: 100%;
}

/*
ul {list-style: none; }
li {margin-left: -0.5em; text-indent: -2em;}

.MathJax {
font-size: 1em;
}
*/

.title {
	border: none;
	margin: 0em;
	font-size:1.2em; 
	font-style: italic;  
	font-weight: bold;
}

div.related {
	text-align: center;
}

figure.related {
	display: inline-table;
	padding: 0.5em;
	border: 1px solid #ffffff;
    box-sizing: border-box;
    border-radius: 0.25rem;
}


figure.related:hover {
	color: #000000;
	text-decoration: none;
	border: 1px solid #5f9ea0;
	background: var(--MatWhite);
	}

figcaption.related {
	width: 200px;
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	text-wrap: balance;
}

img.related {
	object-fit: scale-down;
}

div.relatedimg {
	max-width: 200px;
	max-height: 200px;
}

/* ============================================================================== */

figure.artwork {
	background: var(--OffWhite);
	padding: 1em;
	display: flex;
	justify-content: space-around;
	column-gap: 2em;
	flex-flow: row wrap;
	row-gap: 2em;
	min-width: var(--Minimum-Width);
    box-sizing: border-box;
}

div.artwork-portrait {
	max-width: 90vh;
	max-height: 90vh;
	text-align: center;
	min-width: 300px;
}

div.artwork-landscape {
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
	min-width: 300px;
}


img.artwork {
	/*
	width: auto;
	height: 100%;
	*/
	object-fit: scale-down;
	max-width: 100%;
	max-height: 100%;
}

picture.artwork {
	object-fit: scale-down;
	max-width: 100%;
	max-height: 100%;
}

figcaption.artwork {
	box-sizing: border-box;
	background: var(--white);
	padding: 1em;
	box-shadow: 0.25em 0.25em var(--Gray);
	width: 600px;
	height: 90vh;
	overflow-y: scroll;
	overflow-x: auto;
}

h1.title {
	border: none;
	margin: 0em;
	font-size:1.4em; 
	font-style: italic;  
	font-weight: bold;
	text-align: center;
}


div.pics {
}

main.news figure {
	width:var(--circle2-size);
	display: inline-block;
	vertical-align: text-top;
	margin: 1em;
	text-align: left;
}

main.news figure img {
	width:100%;
}

main.news figure figcaption {
	font-size: 0.9em;
}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
  vertical-align: text-top;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  object-fit: contain;
  /*
  max-height: calc(100% - 2.5em - 85px);
  max-width: calc(100% - 2.5em);
  */
}


/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.2s;
  animation-name: zoom;
  animation-duration: 0.2s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
button.close {
  background-color: #404040;
  position: fixed;
  top: 1em;
  right: 1em;
  color: var(--white);
  font-size: 1.5em;
  font-weight: bold;
  transition: 0.3s;
  border: none;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  border-radius: 0.5em;
border: solid 1px var(--drMathArt);
}

button.close:hover,
button.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


/* ============================================================================== */


html.landing { 
height: 100%;
}

body.landing {
background-color: #ffffff;
}

section.art {
}

div.description {
	/* text-align: left; */
}


div.landing {
display: table;
margin: auto;
}

h1.landing {
  color: var(--Black);
  padding: 0em;
  font-size: clamp(24px, 4vw, 64px);
  margin-top: 1em;
  border-bottom: none;
  font-weight: normal;
}

h2.landing {
  color: var(--Black);
  padding: 0em;
  font-size: clamp(18px, 3vw, 48px);
  margin-top: 1em;
  border-bottom: none;
  font-weight: normal;
}

div.circle {
width:var(--circle-size);
height:var(--circle-size);
text-align: center;
border-radius: var(--circle-radius);
display: table-cell;
vertical-align: bottom;
}
div.circleTop {
width:var(--circle-size);
height:var(--circle-radius);
  color:  var(--white);
  background-color: var(--DarkGray35);
border-radius: var(--circle-radius) var(--circle-radius) 0% 0%;
  display: flex;	
  /*background-image: linear-gradient(to right, var(--Gray), var(--Black));*/
box-sizing: border-box;	
border-color: var(--drMathArt);
border-style: solid;
  border-bottom: none;
}
div.circleBottom {
width:var(--circle-size);
height:var(--circle-radius);
  color:  var(--Black);
  background-color: var(--OffWhite);
border-radius:  0% 0% var(--circle-radius) var(--circle-radius);
/*background-image: linear-gradient(to right, var(--white), var(--Gray));	*/
box-sizing: border-box;	
border-color: var(--drMathArt);
border-style: solid;
  border-top: none;
}


div.circleTop h1 { 
  display: inline-block;
  align-self: flex-end;
  width: 100%;
padding: 1em;
font-size: var(--circle-fs);
font-variant: normal;
  border-bottom: none;
  font-weight: normal;
  margin: 0px;
  font-variant: small-caps;
  letter-spacing: .25rem;
}

div.circleBottom h2 { 
  display: inline-block;
padding: 1em;
font-size: calc(var(--circle-fs) * 0.75);
font-variant: normal;
  border-bottom: none;
  font-weight: normal;
  margin: 0px;
  font-style: italic;
}

div.circleBottom h2 span { 
  display: inline-block;
font-size: var(--circle-fs);
font-variant: normal;
  border-bottom: none;
  font-weight: normal;
  font-style: italic;
}

img.circle {
width:var(--circle-size);
height:var(--circle-size);
border-radius:  var(--circle-radius);	
}

img.circle2 {
width:var(--circle2-size);
height:var(--circle2-size);
border-radius:  var(--circle2-radius);
box-sizing: border-box;	
border-color: var(--white);
border-style: solid;
}

.container{
  width:var(--circle-size);
  height:var(--circle-size);
  display:grid;
  grid-template-columns: var(--circle-radius) var(--circle-radius);
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
}
  .box{
    display:flex;
    align-items:center;
    justify-content:center;
  }
/*
main.landing {
width: 100%;
  display: flex;
  justify-content: center;
}
*/

header {
background-color: var(--DarkGray);
color: var(--OffWhite);
padding: 0.5em;
}

div.navbar {
height: 64px; 
display: grid;
grid-template-columns: 1fr 1fr;
text-align: left;
}

div.logo3 {
display: flex;
}

div.logo3 img {
height: 64px; 
width: 64px; 
vertical-align: bottom;
}


nav.navitems {
height: 64px; 
text-align: right;
grid-column: 2 / 2;
grid-row: 1;
align-items: center;
display: flex;
}

ul.navitems {
width: 100%;
}

div.site-name {
	padding-left: 1em;
}

span.navintro {
	font-size: 1em;
	font-variant: small-caps;
}

span.navname {
font-size: 2.5em; 
font-variant: small-caps;
}

.navbutton2 {
	display: none;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}	

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}


figure.slide {
text-align: center;
margin: 2em;
}

figure.slide figcaption {
margin: 0.5em;
}

img.slide {
max-width: 100%;
}


@media only screen and (max-width: 1325px) {
	/*
	div.artwork {
		max-width: auto;
		max-height: auto;
	}
	flex-direction: row;
	*/
	figcaption.artwork {
		overflow-x: auto;
		overflow-y: auto;
		height: auto;
	}
	/*
	figure.artwork {
		flex-direction: column;
	}
	*/
}

/*
@media only screen and (max-width: 700px) {
	div.artwork {
		width: 90vw;
		height: 90vw;
	}
	figcaption.artwork {
		overflow-x: auto;
		overflow-y: auto;
		height: auto;
	}
}

@media only screen and (max-height: 700px) {
	div.artwork {
		width: min(90vh,90vw);
		height: min(90vh,90vw);
	}
}
*/


@media only screen and (max-width: 950px) {
	div.landing {
		display: block;
	}
	main.landing {
		padding: 1em;
		display: flex;
	}
	main.general, main.art, main.news {
		max-width: 100%;
		line-height:1.4;
	}
}

@media only screen and (max-width: 825px) {
	span.navintro {
		display: none;
	}
	div.landing {
		display: block;
	}
	main.landing {
		padding: 1em;
	}
	nav.navitems {
		height: 2em;
	}
	div.navbar {
		height: auto;
		display: block;
	}
	.navbutton1 {
		display: none;
		padding: 0em;
		margin: 0em;
	}
	.navbutton2 {
		display: inline;
	}
	div.logo3 img {
		height: 48px; 
		width: 48px; 
		vertical-align: bottom;
	}
	img.social {
		height: 24px;
		width: 24px;
		vertical-align: sub;
		padding: 0.5em;
		border-radius: 12px;
	}
	main.general, main.art, main.news {
		max-width: 100%;
		line-height:1.3;
	}
}

@media only screen and (max-width: 400px) {
	div.logo3 {
		display: inline;
	}
	div.logo3 img {
		display: none;
		padding: 0em;
		margin: 0em;
	}
	header {
		min-width: var(--Minimum-Width);
	}
	div.site-name {
		padding-left: 0em;
	}
	div.navbar {
		text-align: center;
	}
	nav.navitems {
		text-align: center;
	}
	ul.navitems {
		margin-left: 0em;
	}
	nav ul li a {
		margin: 0.1em;
	}
	img.social {
		height: 16px;
		width: 16px;
		vertical-align: sub;
		padding: 0.25em;
		border-radius: 8px;
	}
	main.general, main.art, main.news {
		max-width: 100%;
		line-height:1.2;
	}
	span.navname {
		font-size: 2em; 
		font-variant: small-caps;
	}
}

/* ============================================================================== */
/* Squarespace stuff */

div.squareItem {	
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 259px;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: -2px 10px 5px rgba(0, 0, 0, 0);
	border-radius: 10px;
	font-family: SQ Market, SQ Market, Helvetica, Arial, sans-serif;
}

img.SquareImage {
	width: 100%;
}

div.squareInner {
	padding: 20px;
}

p.squareDescription {
	font-size: 18px;
    line-height: 20px;
    font-size: 18px;
    line-height: 20px;
}

p.squarePrice {
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
}

a.squareBuyButton {
	display: inline-block;
    font-size: 18px;
    line-height: 48px;
    height: 48px;
    color: #ffffff;
    min-width: 212px;
    background-color: #006aff;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
    border-radius: 6px;
}
      <p class="squareDescription">Greeting card with "2023 Units"</p>
      <p class="squarePrice">$5.00</p>
    <a class="squareBuyButton" target="_blank" href="https://square.link/u/hA9uKJCv?src=embed">Buy now</a>