<style type="text/css">

       body  {
  background-image: url("background.png");
  background-repeat: repeat;
  background-size: 174px 200px;
}

@font-face {
    font-family: "basiic"; 
    src: url("basiic.ttf") format("truetype");
}

@font-face {
    font-family: "cherish"; 
    src: url("Cherish.ttf") format("truetype");
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border-radius: 25px;
width: 2px;
border: 1px dotted #2f5592;
}

::-webkit-scrollbar-thumb {
background: #2f5592; 
border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
background: #7a94c7;  
}

div, td	
{font-family: 'basiic.ttf';
text-align: justify;
font-size: 16pt; 
color: #20366a;
}

p
{font-size: 16px;
font-family: 'basiic';
font-weight:normal;
text-align: center;
}

input, textarea
{ background: #f0ebff;
font-family: 'cherish';
border-style: solid;
border-color: #544185;
border-width: 1 }

.nav   {color:#20366a;
font-family: 'cherish';
font-size: 22px;
font-weight: bold;
text-align: center; 
background: #aec8d0;
border:#2f5592;
border-style:solid;
border-radius: 5px;
border-top-width:5px;
border-bottom-width:5px;
border-left-width:5px;
border-right-width:5px;
padding: 7px;}

 .outline   {
color:#20366a;
font-size: 16px;
font-family: 'basiic';
text-align: left;
background:#e8f3fd;
border:#2f5592;
border-radius: 25px;
border-style:solid;
border-top-width:5px;
border-bottom-width:5px;
border-left-width:5px;
border-right-width:5px;
padding: 16px;}


 .main   {
color:#20366a;
font-size: 16px;
font-family: 'basiic';
text-align: left;
background:#e8f3fd;
border:#2f5592;
border-radius: 25px;
border-style:solid;
border-top-width:7px;
border-bottom-width:7px;
border-left-width:5px;
border-right-width:5px;
width: auto;
height: 500px;
overflow-x: hidden;
overflow-y: visible;
}


 .content   {
color:#20366a;
font-size: 16px;
font-family: 'basiic';
font-weight:normal;
padding: 16px;
display: table-cell;
height: 100%;

}

 .content2   {
color:#20366a;
font-size: 16px;
font-family: 'basiic';
font-weight:normal;
padding: 32px;
display: table-cell;
height: 100%;

}

.homebox {
border: 8px dotted #20366a;
padding: 15px;
font-size: 16px;
font-family: 'basiic';
text-align: center;
width: 275px;
height: 175px;
overflow: auto;
}



A:link {color: #20366a;text-decoration:none; font-weight: none;}
A:visited {color: #20366a;text-decoration: none; font-weight: none;}
A:active {color: #20366a;text-decoration:none; font-weight: none;}
A:hover {color:#20366a; text-decoration: none; font-weight: bold;
}-->

.col-container {
  display: flex; /* Make the container element behave like a table */
  width: 80; /* Set full-width to expand the whole page */
  height: 100%;
}

.col {
  display: table-cell; /* Make elements inside the container behave like table cells */
  height: 100%;
}

.wrapper {
  display: table-cell;
  vertical-align: middle;
  width: 2000px;
}

* {
  box-sizing: border-box;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Create two equal columns that floats next to each other */
.lcolumn {
  float: left;
  width: 17%;
  padding: 10px;
  margin: 10px;

  
}

.rcolumn {
  float: left;
  width: 80%;
  padding: 10px;
  margin: 10px;
  top: 50%;
  -ms-transform: translateY(25%);
  transform: translateY(25%);
}

.outer {
  width: 90%;
  margin: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
}

.main2 { 
  position: relative;
}

.main2 p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  margin: auto;
}

/* 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%;
  }
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/

.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 85%;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 15px 15px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.montagealt { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 80%;
}

.ezgallery.montagealt img {
  flex: auto;
  max-width: 150px;
  max-height: 150px;
  margin: 0 15px 15px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: minmax(150px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  object-position: bottom;
}

</style>
