body
{
font-family:Arial,Helvetica,sans-serif;
background-color:#111111;
background-image:url('../splash_bg4.jpg');
background-attachment:fixed;
background-position:center;
background-size:cover;
min-width:560px;
top:50%;
color:#ffffc3;
}


/* (PART A) GALLERY CONTAINER */
.gallery {
  /* (A1) GRID LAYOUT - 3 PER ROW */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  /* (A2) OPTIONAL */
  grid-gap: 10px;
  max-width: 800px;
  padding: 10px; margin: 0 auto;
  overflow: hidden;
}


/* (PART B) IMAGES */
.gallery > img {
  width: 100%; object-fit: cover;
  aspect-ratio: 1/1;
  transition: all 0.3s;
}


/* (PART C) SMALL SCREENS - 2 PER ROW */
@media screen and (max-width:640px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* (PART D) ENLARGE ON MOUSE HOVER */
.gallery > img:hover:not(.full) {
  transform: scale(1.1);
}


/* (PART E) SHOW SELECTED IMAGE IN FULLSCREEN */
.gallery > img.full {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: scale-down;
  background: rgba(0, 0, 0, 0.5);
}


a
{
color:#ffaa00;
text-decoration:none;
}

a.pink:link
{
color:#ff77bc;
text-decoration:none;
}

a.purple:link
{
color:#e37eff;
text-decoration:none;
}

a:visited
{
color:#dd7700;
text-decoration:none;
}

a.pink:visited
{
color:#ff77bc;
text-decoration:none;
}

a.purple:visited
{
color:#e37eff;
text-decoration:none;
}

a:hover
{
color:#a5eb85;
text-decoration:underline;
}

a.pink:hover
{
color:#a5eb85;
text-decoration:underline;
}

a.purple:hover
{
color:#a5eb85;
text-decoration:underline;
}

.serif
{
font-family:Georgia,serif;
}

.colmask 
{	
position:relative;	
clear:both;	
float:center;
overflow:hidden;
margin:0 auto;
align:center;	
width:100%;					
}


/* common column settings */

.col1,
.col2,
.col3 

{
overflow:hidden;	
background-color:#111111;
}



/* 2 Column (right menu) settings */

.col1
{
	
padding-left: 15px; 
padding-right: 15px;
width: 635px;
float: left;
position:relative;
}


.col2 
{

float:right;
padding-left: 7px; 
padding-right: 7px;	
width:235px;			
/* right column content width (right column width minus left and right padding) */
	
left:260px;			
/* (right column width) plus (left column left and right padding) plus (right column left padding) */

}


#center
{ 
width: 920px; 
margin: 0 auto; 
}


#corner
{ 
position: fixed; 
top: 0; 
right: 0; 
z-index: 9000; 
cursor: pointer; 
}


.hog
{
float:center;
vertical-align: middle;
min-width:420px;
max-width:902px;
}