/***************
|  style.css   |
|  09-30-2026  |
***************/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');

:root {
	font-size: 62.5%;
}

html {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	background-color: rgb(230, 230, 230);
	scroll-behavior: smooth;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	box-shadow: 0 0.2rem 0.6rem rgb(100 100 100 / 30%);
	background-color: white;
	margin: 5.0rem auto;
	text-align: center;
	overflow-x: hidden;
	min-height: auto;
	width: 60%;
	padding: 0;
}

.page {
	padding: 3.6rem 5.0rem;
	text-align: left;
	position: relative;
}

.clearfix {
	display: inline-block;
}

.clearfix:after {
	height: 0;
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
}

.ocean {
	background: linear-gradient(#acf, #fff 100vh);
}

.ocean1 {
	background: linear-gradient(#fff, #acf7, #fff 115vh);
}

.header {
	width: 100%;
	height: 14.0rem;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	justify-content: space-between;
}

h2 {
	font-size: 400%;
	margin-bottom: 0;
}

.deeppink {
	color: deeppink;
}

#authp1 {
	color: #555;
	font-weight: bold;
	font-style: italic;
	font-size: 1.6rem;
	position: absolute;
	top: 11.0rem;
	left: 7.3rem;
}

#authp2 {
	color: #555;
	font-weight: bold;
	font-style: italic;
	font-size: 1.6rem;
	position: absolute;
	top: 13.5rem;
	left: 7.3rem;
}

.blue {
	color: blue;
}

h4 {
	font-size: 3rem;
	color: blue;
	margin-top: 0;
	margin-bottom: 5.0rem;
}

h5 {
	font-size: 2.75rem;
	color: deeppink;
	margin-bottom: 1.5rem;
}

ol,
ul {
	color: deeppink;
	font-weight: bold;
}

.params4 {
	font-family: Consolas, 'Courier New', Courier, monospace;
	font-weight: 600;
	font-size: 1.9rem;
	/* color: blue; */
	color: black;
}

#param1 {
	background-color: rgb(234, 67, 53);
	color: black;
}

#param2 {
	background-color: rgb(66, 133, 244);
	color: black;
}

#param3 {
	background-color: rgb(52, 168, 83);
	color: black;
}

#param4 {
	background-color: rgb(251, 188, 5);
	color: black;
}

p,
li {
	font-size: 1.8rem;
}

.plain,
.plain li {
	color: black;
	font-weight: normal;
}

.more {
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}

.less {
	padding-left: 1.5rem;
}

.separate-lis {
	margin-bottom: 1.5rem;
}

strong,
.strong {
	/* color: mediumblue; */
	color: blue;
}

hr {
	margin-top: 3.5rem;
}

.bold {
	color: mediumblue;
	font-weight: 600;
}

.normal {
	font-family: Consolas, 'Courier New', Courier, monospace;
	font-weight: 600;
	font-size: 1.9rem;
	color: blue;
}

.same {
	font-weight: 600;
	font-size: 1.9rem;
	color: blue;
}

.logo-container {
	padding: 1.0rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.logo-item {
	width: 10.0rem;
}

.logo-item img {
	width: 100%;
}

#smaller1 {
	height: 80%;
}

#smaller2 {
	margin: auto;
	width: 85%;
}

.hr-top {
	margin-bottom: 0;
	padding-bottom: 0;
}

.hr-bottom {
	margin-top: 0;
	padding-top: 0;
}

.all4 {
	font-weight: bold;
	font-style: italic;
	text-decoration: underline;
	background-color: yellow;
}

.btn,
.btn1,
.med-btn,
.big-btn {
	width: 18rem;
	color: navy;
	display: block;
	cursor: pointer;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	border-radius: 1.0rem;
	margin: 2.5rem auto 0;
	text-decoration: none;
	border: solid 0.3rem navy;
	background-color: lightblue;
	box-shadow: 0.4rem 0.4rem 0.9rem black;
}

.btn,
.btn1 {
	height: 5rem;
}

.btn1 {
	margin-bottom: 2.5rem;
}

.med-btn {
	height: 7.0rem;
}

.big-btn {
	height: 10rem;
}

.btn:hover,
.med-btn:hover,
.big-btn:hover {
	color: deeppink;
}

.btn1:hover {
	color: crimson;
}

.btn:active,
.med-btn:active,
.big-btn:active {
	color: deeppink;
	box-shadow: 0.4rem 0.4rem 0.9rem transparent;
}

.btn1:active {
	color: crimson;
	box-shadow: 0.4rem 0.4rem 0.9rem transparent;
}

img {
	width: 100%;
}

/* two lists */

.two-lists {
	height: 110.0rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.list-on-left {
	width: 45%;
	height: 100%;
	padding: 0.75rem;
	border: solid 0.1rem deeppink;
}

.list-on-right {
	width: 45%;
	height: 100%;
	padding: 0.75rem;
	border: solid 0.1rem deeppink;
}

/*************/

.zpic {
	max-width: 78.6rem;
	height: auto;
}

.zpic1 {
	max-width: 45.1rem;
	height: auto;
}

.zpic2 {
	max-width: 53.6rem;
	height: auto;
}

.zpic3 {
	max-width: 108.8rem;
	border-bottom: 0.2rem solid black;
	height: auto;
}

.zpic4 {
	max-width: 55.2rem;
	height: auto;
}

.zpic5 {
	max-width: 51.6rem;
	height: auto;
}

.zpic6 {
	max-width: 50.2rem;
	height: auto;
}

.zpic7 {
	max-width: 58.6rem;
	height: auto;
}

.zpic8 {
	max-width: 58.8rem;
	height: auto;
}

.zpic9 {
	max-width: 71.0rem;
	height: auto;
}

.zpic10 {
	max-width: 55.8rem;
	height: auto;
}

.zpic11 {
	border: solid 0.3rem black;
	max-width: 124.6rem;
	height: auto;
}

.zpic12 {
	max-width: 85rem;
	height: auto;
}

.zpic13 {
	max-width: 48.5rem;
	height: auto;
}

.zpic14 {
	max-width: 47.8rem;
	height: auto;
}

.zpic15 {
	max-width: 59.6rem;
	height: auto;
}

.zpic16 {
	max-width: 54.8rem;
	height: auto;
}

.zpic16u {
	max-width: 46.8rem;
	height: auto;
}

.zpic16v {
	max-width: 62.5rem;
	height: auto;
}

.zpic16uv {
	max-width: 42.4rem;
	height: auto;
}

.zpic17 {
	border: solid 2rem black;
	max-width: 124.6rem;
	height: auto;
}

.zpic18 {
	max-width: 67.0rem;
	height: auto;
}

.zpic19 {
	max-width: 28.2rem;
	height: auto;
}

.zpic20 {
	max-width: 61.4rem;
	height: auto;
}

.zpic21 {
	max-width: 64.6rem;
	height: auto;
}

.zpic22 {
	max-width: 27.4rem;
	height: auto;
}

.zpic23 {
	max-width: 52.5rem;
	margin: 0.2rem 0 0.2rem 1.0rem;
	float: right;
	height: auto;
}

.zpic24 {
	max-width: 126.4rem;
	height: auto;
}

.zpic25 {
	max-width: 44.2rem;
	float: left;
	height: auto;
}

.zpic26 {
	max-width: 39.0rem;
	float: right;
	height: auto;
}

.zpic27 {
	max-width: 58.4rem;
	margin: 0.2rem 2.0rem 0.2rem 0;
	float: left;
	height: auto;
}

.zpic28 {
	max-width: 20.4rem;
	margin: 0.2rem 2.0rem 0.2rem 0;
	float: left;
	height: auto;
}

.zpic29 {
	max-width: 16.0rem;
	margin: 0.2rem 2.0rem 1.2rem 2.0rem;
	float: right;
	height: auto;
}

.zpic30 {
	max-width: 20.0rem;
	margin: 0.2rem 2.0rem 0.2rem 0;
	float: left;
	height: auto;
}

.zpic31 {
	max-width: 20.0rem;
	margin: 0.2rem 1.0rem 0.2rem 1.0rem;
	float: right;
	height: auto;
}

.zpic32 {
	max-width: 16.4rem;
	margin: 0.2rem 1.0rem 0.2rem 2.0rem;
	float: right;
	height: auto;
}

.zpic33 {
	max-width: 32%;
	margin: 0.2rem 1.0rem 0.2rem 1.0rem;
	float: right;
	height: auto;
}

.zpic34 {
	max-width: 26.6%;
	margin: 0.2rem 1.0rem 0.2rem 1.0rem;
	float: left;
	height: auto;
}

.zpic35 {
	max-width: 36.3rem;
	margin: 0.2rem 1.5rem 0.2rem 2.0rem;
	float: right;
	height: auto;
}

.zpic36 {
	max-width: 27.0rem;
	margin: 0.75rem 1.0rem 0 0.2rem;
	float: left;
	height: auto;
}

.zpic37 {
	max-width: 11%;
	margin: 0 0.2rem 0.2rem 0.5rem;
	float: right;
	height: auto;
}

.zpic38 {
	max-width: 32.0rem;
	margin: 0.75rem 1.5rem 0 0.2rem;
	float: left;
	height: auto;
}

.zpic39 {
	max-width: 30.0rem;
	margin: 0 0.2rem 0.2rem 0.5rem;
	float: right;
	height: auto;
}

.zpic40 {
	max-width: 26.0rem;
	margin: 0.2rem 1.75rem 0 0;
	float: left;
	height: auto;
}

.zpic41 {
	max-width: 56.0rem;
	margin: 0.2rem 1.75rem 0 0;
	height: auto;
}

.zpic42 {
	max-width: 30.0rem;
	margin: 0 0 0.2rem 0.5rem;
	float: right;
	height: auto;
}

.zpic43 {
	max-width: 11.0rem;
	margin: 0 1.0rem 0 0;
	float: left;
	height: auto;
}

.zpic44 {
	max-width: 32.0rem;
	margin: 0.5rem 1.75rem 0 0;
	float: left;
	height: auto;
}

.zpic45 {
	max-width: 13.0rem;
	margin: 0 1.75rem 0 0;
	float: left;
	height: auto;
}

.zpic46 {
	max-width: 11.5rem;
	margin: 1.0rem 0 0 0.5rem;
	opacity: 67%;
	float: right;
	height: auto;
}

.zpic47 {
	max-width: 14.5rem;
	margin: 0.5rem 0.2rem 0.2rem 0.5rem;
	float: right;
	height: auto;
}

.zpic48 {
	max-width: 16.5rem;
	margin: 0.5rem 2.0rem 0 0;
	float: left;
	height: auto;
}

.zpic49 {
	max-width: 48.0rem;
	margin: 0.2rem 1.5rem 0 0;
	float: left;
	height: auto;
}

.zpic50 {
	max-width: 21.0rem;
	margin: 0 0 0 1.5rem;
	float: right;
	height: auto;
}

.zpic51 {
	max-width: 7.5%;
	margin: 0.2rem 0 0 0;
	float: right;
	height: auto;
}

.zpic52 {
	max-width: 12%;
	margin: 0.75rem 1.5rem 0 0;
	opacity: 90%;
	float: left;
	height: auto;
}

.zpic53 {
	max-width: 21%;
	margin: 0.5rem 1.1rem 0 0;
	opacity: 90%;
	float: right;
	height: auto;
}

.zpic54 {
	max-width: 22%;
	margin: 0.75rem 1.5rem 0 0;
	opacity: 90%;
	float: left;
	height: auto;
}

.zpic55 {
	max-width: 38.7rem;
	margin: 0 0 0.5rem 0.5rem;
	float: right;
	height: auto;
}

.zpic56 {
	max-width: 22.5rem;
	margin: 0 0 0 0;
	float: right;
	height: auto;
}

.zpic57 {
	max-width: 16.0rem;
	margin: -0.5rem 0 0 0.5rem;
	float: right;
	height: auto;
}

.zpic58 {
	max-width: 23.5rem;
	margin: 0 0 0 0;
	float: right;
	height: auto;
}

.zpic59 {
	max-width: 17.0rem;
	margin: 0 1.5rem 0 0;
	float: left;
	height: auto;
}

.zpic60 {
	max-width: 25.7rem;
	margin: 0 0 0 0;
	float: right;
	height: auto;
}

.zpic61 {
	max-width: 35.2rem;
	margin: 0 0 0 0.5rem;
	float: right;
	height: auto;
}

.zpic62 {
	max-width: 35.2rem;
	margin: 0.5rem 0 0 0.5rem;
	float: right;
	height: auto;
}

.zpic63 {
	max-width: 39.2rem;
	margin: 0 0 0 1.7rem;
	float: right;
	height: auto;
}

.zpic64 {
	max-width: 20.4rem;
	margin: 0 0 0.2rem 0.4rem;
	float: right;
	height: auto;
}

.zpic65 {
	max-width: 24%;
	margin: 0.3rem 0 0 1.0rem;
	float: right;
	height: auto;
}

.zpic66 {
	max-width: 37%;
	margin: 2.0rem;
	float: left;
	height: auto;
}

.zpic67 {
	max-width: 35%;
	margin: 0.5rem 2.5rem 2.0rem 0;
	float: left;
	height: auto;
}

.zpic68 {
	max-width: 14%;
	margin: 0.8rem 2.0rem 0 1.0rem;
	float: right;
	height: auto;
}

.zpic69 {
	max-width: 30%;
	margin: 0.8rem 0 0.8rem 1.8rem;
	float: right;
	height: auto;
}

.zpic70 {
	max-width: 95%;
	height: auto;
}

.zpic71 {
	max-width: 15.0rem;
	margin: 0 2.0rem 0 1.0rem;
	float: right;
	height: auto;
}

.zpic72 {
	max-width: 19.5rem;
	margin: 1.0rem 1.0rem 0 0;
	float: left;
	height: auto;
}

.zpic73 {
	max-width: 10%;
	margin: 0.8rem 2.0rem 0 1.0rem;
	float: left;
	height: auto;
}

.zflex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.zpic74 {
	max-width: 45%;
	margin: 0;
	float: left;
	height: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.zpic74 h3 {
	color: deeppink;
	font-size: 2.6rem;
}

.zpic74 img {
	width: 100%;
}

.zpic75 {
	max-width: 45%;
	margin: 0;
	float: right;
	height: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.zpic75 h3 {
	color: deeppink;
	font-size: 2.6rem;
}

.zpic75 img {
	width: 100%;
}

.zpic76 {
	/* max-width: 48.4rem; */
	max-width: 41%;
	margin: 0.5rem 1.25rem 0 0;
	float: left;
	height: auto;
}

.zpic77 {
	/* max-width: 24.6rem; */
	max-width: 25%;
	margin: 2.0rem 2.5rem 2.0rem 0;
	float: left;
	height: auto;
}

.zpic78 {
	/* max-width: 23.3rem; */
	max-width: 8.3%;
	margin: 0.5rem 2.0rem 0 0.5rem;
	float: left;
	height: auto;
}

.zpic79 {
	/* max-width: 30.7rem; */
	max-width: 10%;
	margin: 0.5rem 2.0rem 0.5rem 1.5rem;
	float: right;
	height: auto;
}

.zpic80 {
	background: linear-gradient(to top left, rgb(92, 206, 116), #fff, #fff);
	margin: 2.5rem 2.5rem 0 0;
	border-radius: 2.2rem;
	max-width: 14%;
	padding: 3.0rem;
	float: left;
	height: auto;
}

.zpic81 {
	/* max-width: 59.0rem; */
	max-width: 37.5%;
	padding: 2.0rem 1.0rem;
	margin: 0.35rem 2.0rem 3.6rem 2.0rem;
	border: solid 0.1rem #111;
	float: right;
	height: auto;
}

.zpic82 {
	/* max-width: 96.0rem; */
	max-width: 75%;
	height: auto;
	margin: 1.0rem 0 1.0rem 2.5rem;
	float: right;
}

.zpic83 {
	max-width: 21.5rem;
	height: auto;
	margin: 2.0rem 2.5rem 1.0rem 0;
	float: left;
}

.zpic84 {
	/* max-width: 96.0rem; */
	max-width: 60%;
	height: auto;
	margin: 2.2rem 2.0rem 0.5rem 0;
	float: left;
}

.zpic85 {
	/* max-width: 70.0rem; */
	outline: 0.2rem solid #333;
	margin-top: 4.0rem;
	max-width: 70.0rem;
	height: auto;
}

.zpic86 {
	/* max-width: 33.0rem; */
	max-width: 22.5%;
	border-radius: 1.1rem;
	margin: 0.8rem 0 0 1.0rem;
	float: right;
	height: auto;
}

.zpic87 {
	/* max-width: 25.0rem; */
	max-width: 16%;
	height: auto;
	margin: 0 1.5rem 0 1.0rem;
	float: right;
}

.zpic88 {
	max-width: 16.6rem;
	margin: 1.6rem 2.0rem 0.5rem 0.5rem;
	float: left;
	height: auto;
}

.zpic89 {
	/* max-width: 59.0rem; */
	max-width: 40%;
	margin: 4.0rem 1.0rem 0.5rem 1.5rem;
	float: right;
	height: auto;
}

.zweb {
	max-width: 62.5rem;
	height: auto;
}

.zweb0 {
	max-width: 65.4rem;
	height: auto;
}

.zweb1 {
	max-width: 50.0rem;
	height: auto;
}

.zweb2 {
	max-width: 42.0rem;
	height: auto;
}

.zweb3 {
	max-width: 64.4rem;
	height: auto;
}

.zweb4 {
	max-width: 74.0rem;
	height: auto;
}

.zweb5 {
	max-width: 79.6rem;
	height: auto;
}

.zweb6 {
	max-width: 64.0rem;
	height: auto;
}

.zweb7 {
	max-width: 39.4rem;
	height: auto;
}

.zweb8 {
	max-width: 59.6rem;
	height: auto;
}

.zweb9 {
	max-width: 63.0rem;
	height: auto;
}

.zvue {
	max-width: 28.2rem;
	height: auto;
}

em {
	font-weight: bold;
	font-style: normal;
	color: deeppink;
}

a {
	font-weight: 600;
	color: blue;
	text-decoration: none;
}

a:hover {
	color: deeppink;
	text-decoration: underline;
}

.zlink {
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-start;
	margin: 2.5rem 0 2.5rem 0;
	justify-content: flex-start;
	background-color: black;
}

.zlink1 {
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-start;
	margin: 2.5rem 0 2.5rem 0;
	justify-content: flex-start;
	background-color: rgb(30, 30, 30);
}

.clink {
	width: 100%;
	text-align: center;
	background-color: white;
}

.clink1 {
	width: 100%;
	text-align: left;
	background-color: white;
}

.clink2 {
	width: 100%;
	text-align: center;
	background-color: transparent;
}

.clink3 {
	width: 100%;
	text-align: center;
	background-color: white;
}

.clink3 img {
	border: solid 0.1rem black;
}

#image1 {
	max-width: 99.0rem;
	height: auto;
}

#image2 {
	max-width: 75.0rem;
	height: auto;
}

#image3 {
	max-width: 89.2rem;
	height: auto;
}

.image4 {
	max-width: 116.5rem;
	height: auto;
}

.image5 {
	max-width: 35.4rem;
	height: auto;
}

.image6 {
	max-width: 52.2rem;
	height: auto;
}

.image7 {
	max-width: 112.4rem;
	height: auto;
}

.image8 {
	max-width: 82.4rem;
	height: auto;
}

.image9 {
	max-width: 83.0rem;
	height: auto;
}

.image10 {
	max-width: 56.2rem;
	height: auto;
}

.image11 {
	max-width: 59.4rem;
	height: auto;
}

.image12 {
	max-width: 59.0rem;
	height: auto;
}

.image13 {
	max-width: 44.8rem;
	height: auto;
}

.image14 {
	max-width: 55.6rem;
	height: auto;
}

.image15 {
	max-width: 56.5rem;
	height: auto;
}

.image16 {
	max-width: 71.0rem;
	height: auto;
}

.image17 {
	max-width: 64.8rem;
	height: auto;
}

.image18 {
	max-width: 73.5rem;
	height: auto;
}

.image19 {
	max-width: 69.5rem;
	height: auto;
}

.image20 {
	max-width: 56.6rem;
	height: auto;
}

.image21 {
	max-width: 57.2rem;
	height: auto;
}

.image22 {
	max-width: 52.8rem;
	height: auto;
}

.image23 {
	border-radius: 2.7rem;
	max-width: 71.6rem;
	height: auto;
}

.image24 {
	max-width: 49.4rem;
	height: auto;
}

.image25 {
	max-width: 70.4rem;
	height: auto;
}

.image26 {
	max-width: 70.0rem;
	height: auto;
}

.image27 {
	max-width: 43.8rem;
	height: auto;
}

.image28 {
	max-width: 70.8rem;
	height: auto;
}

.image29 {
	max-width: 68.4rem;
	height: auto;
}

.image30 {
	max-width: 40.0rem;
	height: auto;
}

.image31 {
	max-width: 50.0rem;
	height: auto;
}

.image32 {
	max-width: 49.0rem;
	height: auto;
}

.image33 {
	max-width: 47.0rem;
	height: auto;
}

.image34 {
	max-width: 40.4rem;
	height: auto;
}

.image35 {
	max-width: 48.0rem;
	height: auto;
}

.image36 {
	max-width: 57.5rem;
	height: auto;
}

.image37 {
	max-width: 41.2rem;
	height: auto;
}

.image38 {
	max-width: 118.2rem;
	height: auto;
}

.image39 {
	max-width: 118.4rem;
	height: auto;
}

.image40 {
	max-width: 33.6rem;
	height: auto;
}

.image41 {
	max-width: 74.0rem;
	height: auto;
}

.chart,
#chart4 {
	max-width: 58.0rem;
	height: auto;
}

#chart1,
#chart2,
#chart3 {
	max-width: 61.0rem;
	height: auto;
}

#chart1a {
	max-width: 34.8rem;
	height: auto;
}

#chart2a {
	max-width: 26.8rem;
	height: auto;
}

#chart3a {
	max-width: 44.8rem;
	height: auto;
}

#chart5,
#chart6,
#chart7 {
	max-width: 52.0rem;
	height: auto;
}

#chart8 {
	max-width: 45.3rem;
	height: auto;
}

#chart9 {
	max-width: 39.3rem;
	height: auto;
}

#screen1 {
	max-width: 37.1rem;
	height: auto;
}

#screen2 {
	max-width: 40.6rem;
	height: auto;
}

#screen3 {
	max-width: 39.4rem;
	height: auto;
}

#screen4 {
	max-width: 109.0rem;
	height: auto;
}

#screen5 {
	max-width: 106.6rem;
	height: auto;
}

#screen6 {
	max-width: 112.7rem;
	height: auto;
}

#screen7 {
	border-radius: 0.8rem;
	max-width: 81.4rem;
	height: auto;
}

.image-div-1 {
	width: 30%;
	float: right;
	margin: 0 0 1.0rem 1.0rem;
}

.image-div-2 {
	width: 30%;
	float: left;
	margin: 1.0rem 1.0rem 1.0rem 0;
}

.image-div-3 {
	width: 20%;
	float: left;
	margin: 1.0rem 1.0rem 1.0rem 0;
}

.image-div-4 {
	width: 30%;
	float: right;
	margin: 5.5rem 0 1.0rem 1.0rem;
}

.image-div-5 {
	width: 40%;
	float: left;
	border: solid 0.1rem black;
	margin: 1.0rem 3.0rem 1.0rem 0;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-6 {
	width: 22%;
	float: right;
	border: solid 0.1rem black;
	margin: 0 1.0rem 1.0rem 2.0rem;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-7 {
	width: 40%;
	float: left;
	border: solid 0.1rem black;
	margin: 1.0rem 3.0rem 1.5rem 0;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-8 {
	width: 40%;
	float: right;
	border: solid 0.1rem black;
	margin: 1.0rem 0 1.5rem 3.0rem;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-9 {
	width: 48%;
	float: right;
	margin: 1rem 0 2rem 3rem;
	border: solid 0.1rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-10 {
	width: 40%;
	float: right;
	margin: 1rem 0 2rem 3rem;
	border: solid 0.1rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.image-div-11 {
	width: 9rem;
	float: left;
	margin: 0 2rem 0 0;
}

.image-div-12 {
	width: 15rem;
	float: left;
	margin: 1.5rem 2rem 1.5rem 0;
}

.image-div-13 {
	width: 56rem;
	float: left;
	margin: 0.75rem 1.5rem 0 0;
}

.image-div-14 {
	width: 46rem;
	float: left;
	margin: 0.75rem 1.5rem 0 0;
}

.image-div-15 {
	width: 62.5rem;
	float: left;
	margin: 0.75rem 1.5rem 0 0;
}

.image-div-16 {
	width: 56.4rem;
	float: left;
	margin: 1.0rem 1.5rem 0 0;
}

.image-div-17 {
	width: 99.9%;
	float: left;
}

.image-div-18 {
	width: 13%;
	float: left;
	margin: 0.5rem 1.5rem 0.2rem 0;
}

.image-div-19 {
	width: 12%;
	float: right;
	margin: 0.5rem 0 0.2rem 1.5rem;
}

.image-div-20 {
	width: 33.0%;
	float: left;
	margin: 0.5rem 1.5rem 0.1rem 0;
}

.image-div-21 {
	width: 30%;
	float: right;
	margin: 0.5rem 0 0.2rem 1.5rem;
}

.image-div-22 {
	max-width: 46.2rem;
	float: left;
	margin: 0.75rem 1.5rem 0 0;
}

.inner-space {
	width: 100%;
	height: 11vh;
}

#big-picture {
	width: 55%;
	float: right;
	margin: 1rem 0 2rem 2.5rem;
	box-shadow: 0.5rem 0.5rem 1.1rem #333;
}

#netlify-logo {
	width: 25%;
	float: right;
	margin: 1.0rem 0 2.0rem 1.0rem;
}

#netlify-login {
	width: 30.6rem;
	float: right;
	margin: 0 0 1.0rem 1.0rem;
}

#netlify-icon {
	width: 4.0rem;
	float: left;
	cursor: pointer;
	margin: 0 1.0rem 2.0rem 0;
}

#rgb-chart {
	width: 37%;
	float: right;
	margin: 1rem 0 2rem 2.5rem;
	box-shadow: 0.5rem 0.5rem 1.1rem #333;
}

#brain-pic {
	width: 22%;
	float: right;
	margin: 0 0 2rem 2.5rem;
}

#warning-pic {
	width: 35%;
	float: left;
	margin: 1rem 1rem 0 0;
}

#unicode {
	width: 25%;
	float: right;
	margin: 0 0 0 2rem;
}

#mona-lisa {
	width: 24%;
	float: right;
	margin: 0 0 2rem 2.5rem;
	border: ridge 2.2rem gold;
	box-shadow: 0.5rem 0.5rem 1.1rem #333;
}

#printing-press {
	width: 40%;
	float: right;
	margin: 1.2rem 0 1.2rem 2.5rem;
	outline: solid 0.5rem black;
	box-shadow: 1rem 1rem 2rem #333;
}

#movable-type {
	width: 40%;
	float: right;
	margin: 1.2rem 0.5rem 1.2rem 2.5rem;
	outline: solid 0.5rem black;
	box-shadow: 1rem 1rem 2rem #333;
}

#graph {
	width: 99.9%;
	float: left;
	margin: 1rem 1rem 2.5rem 0;
	border: solid 0.1rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

#serifs {
	width: 25%;
	float: left;
	margin: 2rem 2.5rem 2rem 0;
}

#axolotl {
	width: 42%;
	float: left;
	margin: 1rem 2rem 1rem 0;
	border: solid 0.1rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

#parrot {
	width: 42%;
	float: right;
	margin: 1rem 2rem 1rem 2rem;
	border-radius: 1.3rem;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

#ip {
	width: 16%;
	float: right;
	margin: 0 2rem 1rem 2rem;
}

#all4 {
	width: 35%;
	float: left;
	margin: 1rem 2rem 1rem 0;
}

#anchor {
	width: 25%;
	float: right;
	margin: 0 0 0 2rem;
}

#barbell {
	width: 45%;
	float: left;
	margin: 1rem 2rem 1rem 0;
}

#bricks {
	max-width: 45.1rem;
	height: auto;
}

#button {
	width: 9%;
	float: right;
	margin: 0.5rem 0 0.5rem 1rem;
}

#calipers {
	width: 30%;
	float: left;
	margin: 1rem 2rem 0 0;
}

#gf-logo {
	width: 25%;
	float: left;
	margin: 1rem 1.5rem 0.5rem 0;
}

.float-left {
	float: left;
	width: 10.25rem;
	margin: 0.5rem 2.0rem 0 0;
	border: solid 0.1rem black;
}

.float-right {
	float: right;
	width: 10.25rem;
	margin: 0.5rem 0 0 2.0rem;
	border: solid 0.1rem black;
}

.font-pic {
	margin: 1.2rem 0 1.2rem;
	max-width: 34.6rem;
	height: auto;
	border: solid 0.2rem black;
}

.font-pic1 {
	margin: 1.2rem 0 1.2rem;
	padding: 2rem 0 1rem;
	max-width: 34.6rem;
	height: auto;
	border: solid 0.2rem black;
}

.font-pic2 {
	width: 35%;
	float: right;
	margin: 0.5rem 0 1.2rem 2rem;
	padding: 1.2rem;
	height: auto;
	border: solid 0.2rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.font-pic3 {
	width: 35%;
	float: right;
	margin: 1.4rem 0 1.1rem 2rem;
	padding: 1.2rem;
	height: auto;
	border: solid 0.2rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.font-pic4 {
	width: 35%;
	float: right;
	margin: 0.5rem 0 1rem 2rem;
	padding: 1.2rem;
	height: auto;
	border: solid 0.2rem black;
	box-shadow: 0.3rem 0.3rem 0.6rem #333;
}

.arrows {
	list-style-type: '\27A4';
}

.arrows li {
	margin-left: -2rem;
	color: black;
}

.start3 {
	margin-left: -2rem;
}

.cherries {
	width: 9rem;
}

#cz-logo {
	width: 16%;
	float: right;
	margin: 0 0 2rem 2rem;
}

#cz-pic {
	width: 50%;
	float: left;
	margin: 0.75rem 2.5rem 0 0;
}

#clockwise {
	width: 13.5%;
	float: right;
	margin: 0 0 0 2rem;
}

.os {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.os img {
	width: 8.0rem;
	height: auto;
}

.deploy {
	/* background: linear-gradient(to right, rgb(5, 189, 186), transparent, rgba(191, 0, 0, 0.75)); */
	background: linear-gradient(to right, rgb(5, 189, 186), transparent);
	padding: 0.5rem;
	text-align: center;
	margin: auto;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.deploy img {
	width: 8.0rem;
	height: auto;
}

.icons {
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.icons img {
	width: 6.8rem;
	height: auto;
	padding: 1.2rem;
}

#ext {
	width: 2.8rem;
	border-radius: 0.7rem;
}

#ext-sm {
	width: 1.6rem;
}

.downloadable {
	cursor: pointer;
}

.bottom {
	text-align: center;
	margin: 0 auto;
	width: 100%;
}

.my-list {
	width: 12rem;
	padding: 0 2rem;
	border: solid 0.2rem black;
}

.no-bullets {
	list-style-type: none;
}

.no-bullets li {
	margin-left: -4rem;
}

.gbox {
	width: 0;
	height: 0;
	float: left;
	margin: 1rem 3.5rem 1rem 0;
	border-width: 5rem;
	border-style: solid;
	box-shadow: 0.5rem 0.5rem 1.1rem black;
	border-color: rgb(234, 67, 53) rgb(66, 133, 244) rgb(52, 168, 83) rgb(251, 188, 5);
}

#selector {
	width: 2.2rem;
}

.use-on-web {
	box-shadow: 0.2rem 0.2rem 0.5rem black;
	border-radius: 1.9rem;
	max-width: 91.4rem;
	height: auto;
}

.ethiopic {
	font-family: 'Noto Sans Ethiopic', sans-serif;
	letter-spacing: 0.2rem;
	font-weight: 600;
	color: blue;
}

.ethiopic-bold {
	font-family: 'Noto Sans Ethiopic', sans-serif;
	letter-spacing: 0.3rem;
	font-weight: 600;
}

sup {
	font-size: 1.2rem;
}

.case-container {
	width: 50%;
	display: flex;
	margin: 2.0rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.case-image {
	opacity: 80%;
	width: 12.5rem;
}

.diver {
	float: right;
	position: relative;
	width: 13.0rem;
	height: 33.5rem;
}

#bubbles {
	width: 95%;
	position: absolute;
	bottom: 0;
	right: 0;
}

#shark {
	display: block;
	width: 11.0rem;
	height: 6.4rem;
	position: absolute;
}

.indented {
	padding-left: 3.0rem;
}

.syntax {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	font-size: 1.9rem;
	color: blue;
}

.result {
	font-size: 2.9rem;
	text-shadow: 0.3rem 0.3rem 0.7rem #333;
}

.result1 {
	font-size: 2.9rem;
	text-shadow: -0.3rem -0.3rem 0.7rem #333;
}

.result2 {
	font-size: 2.9rem;
	text-shadow: -0.3rem 0.3rem 0.7rem #333;
}

.result3 {
	font-size: 2.9rem;
	text-shadow: 0.3rem -0.3rem 0.7rem #333;
}

.my-h2 {
	font-size: 4.4rem;
	font-weight: bold;
	color: mediumblue;
	text-shadow: 0.3rem 0.3rem 0.7rem #333;
}

.two-charts {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}

.nopad {
	margin: 0;
	padding: 0;
	font-size: 1.0rem;
	font-weight: normal;
}

.ff24 {
	width: 22.0rem;
	padding: 0.5rem;
	margin-top: 4.0rem;
	background-color: blue;
}

.test-zero {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-evenly;
}

.tz-items {
	margin: 2.0rem 0;
	max-width: 31.4rem;
	height: 15.6rem;
	border: solid 0.1rem #333;
}

.hide-me {
	visibility: hidden;
}

.green {
	font-family: Consolas, 'Courier New', Courier, monospace;
	padding: 0.8rem 0 0.8rem 1.0rem;
	color: rgb(106, 153, 73);
	background-color: black;
	font-weight: bold;
	font-size: 1.9rem;
}

.logo-container {
	padding: 1.0rem;
	width: 97.5%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
}

.logo-item {
	width: 10.0rem;
}

.logo-item img {
	width: 100%;
}

#ic,
#od {
	width: 14.0rem;
}

/* media queries */

/* Responsive page width */

@media (max-width: 1200px) {
	body {
		width: 80%;
	}
}

@media (max-width: 800px) {

	body {
		width: 100%;
		margin: 0;
	}

	.page {
		padding: 2.5rem 3.0rem;
	}

	.header h2 {
		padding-top: 2.5rem;
		font-size: 3.2rem;
	}

	/* Keep zoom-link images inside the available space */

	.zlink img {
		max-width: 100%;
		height: auto;
	}

}