@import url('https://fonts.googleapis.com/css2?family=Frijole&family=Averia+Sans+Libre&display=swap');



* {
  box-sizing: border-box;
}

.intro {
	position:relative;
	width:45%;
	margin:auto;
	text-align:center;
}

@media screen and (max-width: 900px) {
  .intro {
    width: 60%;
  }
}

@media screen and (max-width: 600px) {
  .intro {
    width: 90%;
  }
}
body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
  font-family: "Averia Sans Libre", Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
  position:relative;
}

.whitelinks{
	color:inherit;
}
.whitelinks a{color:white;}
.whitelinks a:hover{color:violet;}

h1,h2,h3 {
  font-family: "Frijole", serif;
  font-weight: 400;
  font-style: normal;
}

p{
	font-size: 14pt;
}

h1 {
  font-size: 24px;
}

a{color:inherit;}
a:visited {}
a:hover{color: violet;}
a:active{}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
  padding: 8px;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  position: relative;
  text-align: left;
}
.column a{color:white;}
.column a:hover{color:#ffbbff;}


/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.content {
	color:inherit;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  color:inherit;
}


.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
  color:inherit;

}



.thumbnail{width:100%;}

.illustration{width:100%;max-width:max-content;}

.imagebox{
	position:relative;
	width:90%;
	padding:16px;
	margin:auto;
	text-align:center;
}


@media screen and (max-width: 900px) {
  .imagebox {
    width: 100%;
    padding:8px;
  }
}

@media screen and (max-width: 600px) {
  .imagebox {
    width: 100%;
    padding:0px;
  }
 }
 
 .videocontainer{
  position: relative;
  overflow: hidden;
  width: 50%;
  margin: auto;
  padding-top: 28.125%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  background: #222222
 }
 
 @media screen and (max-width: 1400px) {
 .videocontainer {
    width: 75%;
    padding-top:42.1875%;
  }
}

@media screen and (max-width: 600px) {
 .videocontainer {
    width: 100%;
    padding-top:56.25%;
  }
}
 
 .video_iframe {
  frameborder:0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}