html
{
  height:100%; 
  max-height:100%;  
  padding:0; 
  margin:0; 
  border:0; 
  font-size:100%; 
  font-family: Times New Roman,Times,serif,sans-serif;
  background:#000; 
  overflow: hidden; 
}

body
{
  height:100%; 
  max-height:100%; 
  overflow:hidden; 
  padding:0; 
  margin:0; 
  border:0;
}

#head
{
  position:fixed; 
  margin:0; 
  top:0; 
  right:18px; 
  display:block; 
  width:100%; 
  height:150px;
  background-color: #000; 
  padding: 5px;
  font-size:4em; 
  z-index:5; 
  color:#fff;
  border-bottom: thin solid Gray;
}

#content
{
  display:block; 
  height:100%; 
  max-height:100%; 
  overflow:auto; 
  margin-left:9.5em; 
  margin-right:15px; 
  position:relative; 
  color:#fff;
  z-index:3;
}

#content_no_menu
{
  display:block; 
  height:100%; 
  max-height:100%; 
  overflow:auto; 
  margin-left:15px; 
  margin-right:30px; 
  position:relative; 
  color:#fff;
  z-index:3;
}

#foot
{
  position:fixed; 
  margin:0; 
  bottom:0px; 
  right:18px; 
  display:block; 
  width:100%; 
  height:40px; 
  background-color: #000; 
  color:#fff; 
  text-align:center; 
  font-size:1em; 
  z-index:4;
  border-top: thin solid Gray;
}


#left
{
  position:fixed; 
  left:0; 
  top:0; 
  width:9em;
  height:100%; 
  background-color: #000; 
  background-position:0 150px;
  color:#fff;
  z-index:4;
  border-right: thin solid Gray;
}


* html #head, * html #foot,* html #left
{
  position:absolute;
}

#pad1
{
  display:block;
  width:18px;
  height:150px;
  float:left;
}
#pad3
{
  display:block;
  width:18px;
  height:50px;
  float:left;
}
.pad2
{
  display:block;
  height:150px;
}

#content p
{
  padding:5px;
}

.bold
{
  font-size:1.2em;
  font-weight:bold;
}

#menu a, #menu a:visited
{
  position:relative;
  text-decoration:none; 
  text-align:center; 
  background-color:#3ef; 
  color:#000; 
  display:block; 
  width:5em; 
  border:2px solid #000;
  border-color:#fff #1bc #067 #7ff;
  padding:0.25em;
  margin:0.5em auto;
}

#menu a:hover
{
  top:2px;
  left:2px;
  color:#000;
  border-color:#067 #7ff #fff #1bc;
}


/* Top navigation bar */


.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

.navbar li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #111111;
}


/* Sticky icon for the Top button */

.sticky-icon  {
	z-index:1;
	position:fixed;
	top:80%;
	right:0%;
	width:190px;
	display:flex;
	flex-direction:column;}  
.sticky-icon a  {
	transform:translate(160px,0px);
	border-radius:50px 0px 0px 50px;
	text-align:left;
	margin:2px;
	text-decoration:none;
	text-transform:uppercase;
	padding:10px;
	font-size:22px;
	font-family:'Oswald', sans-serif;
	transition:all 0.8s;}
.sticky-icon a:hover  {
	color:#FFF;
	transform:translate(0px,0px);}	
.sticky-icon a:hover i  {
	transform:rotate(360deg);}
.top  {
	background-color:#FD1D1D;
	color:#FFF;}
.sticky-icon a i {
	background-color:#FFF;
	height:40px;
	width:40px;
	color:#000;
	text-align:center;
	line-height:40px;
	border-radius:50%;
	margin-right:20px;
	transition:all 0.5s;}
.sticky-icon a i.fa-top  {
	background-color:#FFF;
	color:#FD1D1D;}
}


/*
Source - https://stackoverflow.com/a/47799268
Posted by Snowmonkey
Retrieved 2026-08-31, License - CC BY-SA 3.0
*/
 
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {
	cursor: pointer;
	transition: transform 0.5s ease;
	transform: scale(1.1);
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}


.caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}


.modal-content,
.caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}