@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Open+Sans:ital,wght@0,300;1,300&display=swap');
@font-face {
	font-family: 'Open+Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Regular'), local('Open+Sand-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2');
	unicode-range: U+000-5FF;
	}

html {
        box-sizing:border-box;
        height: auto;
	font-size:125%;
}
*, *::before, *::after {
    box-sizing: inherit;}
body {
	background-color:white;
	padding:0px;
	margin:0px;
}
article	{
	padding-left:1rem;
	padding-right:1rem;
	padding-bottom:0.001rem;
}
article p	{
	font-size: 1.2rem;
}
main	{
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	width:60%;
	overflow:hidden;
	z-index:1
        }
main h1 {margin-top:1em;clear:both;font-size:1.9em;font-family:"Open+Sans";}
main h2 {margin-top:1.5em;margin-bottom:0;clear:both;font-size:1.6em;font-family:"Open+Sans";}
main h3 {margin-top:1.5em;clear:both;font-size:1.4em;}
button	{
	background-color:#3B383B;
	font-size:1.2rem;
	margin-bottom:1vh;
	font-family:'Open+Sans';
	color:#DDA909;
	border-radius:5px;
	}
.box	{
	border-style: solid;
	border-width:2px;
	border-color:black;
	display:block;
	padding:1rem;
	}
.center	{
	display:block;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}
footer	{
        text-align:center;
        font-family:'Open+Sans';
        font-size:0.8rem;
        padding-top:2rem;
        margin-bottom:4rem;
        }
nav	{
	display:flex;flex-wrap:wrap;
	justify-content:center;
	flex-basis:50px;
	flex-grow:1;
	flex-shrink:1;
	gap:0.5rem;
	}
nav a:link 	{text-decoration: none;}
nav a:visited	{text-decoration: none;}
nav a:active	{text-decoration: none;}

#hypocripedia-logo	{background-image: linear-gradient(to right, ##DDA909,black,black,##DDA909);}
#logo	{animation:logo 2s;}
.svgbutton      {width:150px;;}
.svgbutton > .svgrect   {fill:black;}
.svgbutton > .svgtext   {fill:#DDA909;}
.svgrect        {stroke:black; stroke-width:0.4;}
.svgtext        {text-anchor:middle;font-family:"Open+Sans";}
.svgbutton:hover > .svgrect {fill:#DDA909;}
.svgbutton:hover > .svgtext {fill:black;}
/*svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }*/
@keyframes logo {
from	{opacity:0;fill:white;}
to	{opacity:1;fill:#DDA909;}
}
@media screen and (max-width: 3000px) {main {width:70%;} img {max-width:50%}}
@media screen and (max-width: 2000px) {main {width:70%;} img {max-width:60%}}
@media screen and (max-width: 1000px) {main {width:80%;} img {max-width:80%}}
@media screen and (max-width: 800px)  {main {width:90%;} img {max-width:90%}}
@media screen and (max-width: 600px)  {main {width:96%;} img {max-width:96%}}
@media screen and (max-width: 300px)  {main {width:99%;} img {max-width:100%}}