/* https://www.smashingmagazine.com/2016/05/fluid-typography/ */


table, th, td {
  font-size: inherit;
  border-left: none;
  border-right: none;
  border-spacing: 0vmin 0.1vmin;
  border-collapse: separate;
}

td {
  padding-top: 1vmin;
  padding-right: 1vmin;
  padding-bottom: 1vmin;
  padding-left: 1vmin;
}

h1, h2, h3, h4 {
	text-align: none;  
}

body {
	font-size: calc(1 * (0.5em + 1.65vmin));
	background-color: #BBBBBB;
	color: #000000;
	font-family: Arial, Sans-Serif;
	margin: 0pt;	
	overflow-y: scroll;
}
	
a:link { color:#111111; text-decoration:underline; }
a:visited { color:#222222; text-decoration:underline; }
a:active { color:#111111; text-decoration:none; }
a:hover  { color:#111111; text-decoration:none; }

* {
    box-sizing: border-box;
}

img {
	border-style: solid;
	border-width: 0pt;
}


.column {
    float: left;
    width: 100%;
	position: relative;
	text-align: center;
	padding-left: 2%;
	padding-right: 2%;
	padding-top:2%;
	padding-bottom:2%;
  }

.row {
    width: 100%;
	margin: 0 auto;	
	max-width: 2500px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

/* https://www.w3schools.com/howto/howto_css_image_text.asp */
/* https://stackoverflow.com/questions/26634201/add-stroke-around-text-on-the-outside-with-css */ 
.centered {
	position: absolute;
	white-space: nowrap;
	left: 50%;
	bottom: 0%;
	color: #dddddd;
	transform: translate(-50%, -0.5em);
	background-color: #444;
	width: 92%;
  /*text-shadow:
    -0.2vmax -0.2vmax 0 #000,
     0   -0.2vmax 0 #000,
     0.2vmax -0.2vmax 0 #000,
     0.2vmax  0   0 #000,
     0.2vmax  0.2vmax 0 #000,
     0    0.2vmax 0 #000,
    -0.2vmax  0.2vmax 0 #000,
    -0.2vmax  0   0 #000;*/
}


/* Responsive layout - makes the columns stack on top of each other instead of next to each other */

@media (min-width:  2001px) {
	.row {
		width: 60%;
		}
    .column {
       width: 33.3%;
		margin: auto;
    }
/* 	vari{
		width: 80%;
		border: 2px solid pink;
	} */
}


@media (max-width:  2000px) {
	.row {
		width: 70%;
		}
    .column {
        width: 33.3%;
		margin: auto;
    }
/* 	.vari{
		width: 60%;
		 height: auto;
		max-height: 70%;
		border: 2px solid red;
	} */
}


@media (max-width:  1050px) {
	.row {
		width: 95%;
		}
    .column {
        width: 50%;
		margin: auto;
		/*border: 10px solid pink;*/
    }
/* 	.vari{
		width: 95%;
		border: 2px solid blue;
	} */
}

@media (max-width:  500px) {
	.row {
		width: 100%;
	}
	.column {
        width: 100%;
		padding-left: 0%;
		padding-right: 0%;
		padding-top:2%;
		padding-bottom:3%;
		margin: auto;
		/*	border: 10px solid green;*/
    }
	.centered {
		width: 100%;
		}
		
/* 	.vari{
		width: 100%;
		height: auto;
		max-height: 80%;
		border: 2px solid green;
	} */
}

@media screen and (orientation: landscape) {
		.variv{
		height: 80%;
		width: auto;
	}
		.varih{
		width: 80%;
		height: auto;
	}
		.variv50{
		height: 40%;
		width: auto;
	}
		.varih50{
		width: 40%;
		height: auto;
	}
}
@media screen and (orientation: portrait) {
		.variv{
		height: 90%;
		width: auto;
	}
		.varih{
		width: 90%;
		height: auto;
	}
		.variv50{
		height: 60%;
		width: auto;
	}
		.varih50{
		width: 60%;
		height: auto;
	}

} 

.varitable{
	width: 40vmin;
	height: auto;
}
	
.mycode{
	background-color:#999;
	white-space:pre-line;
	word-wrap: break-word;
	font-family: monospace;
	font-size: 90%
}