/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #494949;
  color: #d6d6d6;
  font-family: Monospace;
  text-align: center;
  font-size: 16px;
  background-image: linear-gradient(rgba(.5,.5,.5,.5), rgba(.5,.5,.5,.5)) , url("img/sketchbg_2000x2100.png");
  animation: sitebackground 60s linear infinite
  
}
a:link, a:visited {
  color: #fcfcfc;
} 

a:hover, a:active {
  color: #000000;
}


/*Index page*/
@keyframes scrollingcortex {
	0%{background-position:-320px 240px;}
	100%{background-position:0 0;}
  }

@keyframes sitebackground {
	0%{background-position:2000px 2100px;}
	100%{background-position:0 0;}
}

.main {
	padding: 0;
}

.blankspace {
    user-select: none;
    pointer-events: none;
    height: 50px;
}

.banner {
    position:relative;
    width: 875px;
    height: 290px;
	padding: 0;
	margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;	
}

.minigfis {
	padding: 0;
}

.welcometext {
	display: inline-block;
	padding: 5px;
	border: 4px groove black;
	background-image: url("img/panorama_star.png");
	animation: scrollingcortex 20s linear infinite
}

.linksgif {
    position: relative;
	width: 510px;
    height: 145px;
	padding: 5px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.links-popout {
    position: absolute;
	width: auto;
	height: 145%;
    top: 50%;        
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;     
    transition: opacity 0.1s linear;
	pointer-events: auto
}

.linksgif:hover .links-popout {
    opacity: 1;
}

.linkback img {
	margin: 5px auto;
	margin-top: 0;
	display: block;
	border: 4px groove black;	
	
}


/*Gallery page*/
.gallerythumbnail img {
	width: 200px;
	height: 200px;
}
	
.gallerytable {
	display:flex;
	justify-content: center;
	align-items: center;
}

/*404 page*/