index.css

html *
{
   /*font-size: 1em ;
   color: #000000 ;
   font-family: Arial;*/
   /*-webkit-font-smoothing: antialiased !important;
	-webkit-text-stroke: 1px rgba(0,0,0,1)*/
	font-family: Baskerville, "Times New Roman", serif;
    font-size: 20px;
    /*line-height: 1.3; screws up mathjax...*/
    /*padding: 0;*/
    color: rgb(34,34,34);
	text-align:justify;
}

body{
	background-color:#9f9f9f;
}

#wrap { 
	width: 800px; 
	margin: 0 auto; 
}

#side_by_side_div {
}

h1 {
	font-family: Baskerville, "Times New Roman", serif;
	font-weight:lighter;
    font-size: 200%;
    text-align: center;
	padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 15px;
    padding-left: 50px;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
	
#cent_text {
	text-align: center;
}

.slidecontainer {
    display: flex;
	text-align: center;
}

.btncontainer {
    display: flex;
    text-align: center;
	font-family: Arial;
    font-size: 15px;
}

.cent_text {
	text-align: center;
}

.slider_text {
    text-align: center;
	font-family: Arial;
    font-size: 15px;
    
}


#copyright_text {
	text-align: center;
	font-size: 75%;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(34, 34, 34, 0), rgba(34, 34, 34, 0.75), rgba(34, 34, 34, 0));
}

#med_img {
    max-width:256px;
    max-height:256px;
    width:auto;
    height:auto;
}

#big_img {
    max-width:512;
    max-height:512;
    width:auto;
    height:auto;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.canvas3d {
    width: 100%;
    height: auto;
    position: relative;
    margin: 2.3em auto 2em auto;
    padding: 0;
    user-select: none;
}

.canvas3d:after {
    padding-top: 10%;
    display: block;
    content: '';
}

.full_width {
    max-width: 100%;
}

.ratio_20:after {
    padding-top: 20%;
}

.ratio_25:after {
    padding-top: 25%;
}

.ratio_30:after {
    padding-top: 30%;
}

.ratio_40:after {
    padding-top: 40%;
}

.ratio_50:after {
    padding-top: 50%;
}

.ratio_60:after {
    padding-top: 60%;
}

.ratio_70:after {
    padding-top: 70%;
}

.ratio_80:after {
    padding-top: 80%;
}

.ratio_90:after {
    padding-top: 90%;
}

.ratio_100:after {
    padding-top: 100%;
}

.ratio_110:after {
    padding-top: 110%;
}

.ratio_120:after {
    padding-top: 120%;
}

.ratio_130:after {
    padding-top: 130%;
}

.outlined {
    border: solid #222;
}

.bracketed {
  background-image: linear-gradient(#222, #222),
    linear-gradient(#222, #222),
    linear-gradient(#222, #222),
    linear-gradient(#222, #222);
  
  background-repeat: no-repeat;
  background-size: 8px 2px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #222;
  text-align: justify;
  border-width: 0 2px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}

.mtx_input
{
	font-family: "Times New Roman", Times, serif;
    font-size:18px;
	width: 50px;
	height: 50px;
	text-align: center;
	background: transparent;
	/*border-style: dashed;
	border-width: 1px;*/
	border-style: none;
	/*animation: pulse 3s infinite;*/
	transition: 0.3s;
}
.mtx_input:disabled {
	color: black;
}
.mtx_input:hover:enabled {
  background-color: rgba(255,255,255,0.25);
} 
/*
@keyframes pulse {
  0% {
    color: rgba(0,0,0,1)
  }
  50% {
    color:rgba(0,0,0,0.5)
  }
  100% {
    color:rgba(0,0,0,1)
  }
}*/

.borderless_table
{
	margin:auto;
        padding:0;
	border:0;
	border-collapse:collapse;
}
.inline_mtx
{
	display: inline-block;
}
div.centered 
{
    text-align: center;
}
div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}