html
{
	font-size: clamp(14px, 1.1vw, 18px);
	
    background-color: black;

					  
    /*background-position: 0% 0%, 100% 0%, 50% 0%;
	
    background-repeat: repeat-y, repeat-y, repeat;
	background-size:20%, 20%, 7.5%;
	*/
	      background-color: black;
    margin-top: 2rem;
    text-align:center;
	
	margin-left:0;
	margin-right:0;
	padding:0;
	
	width:100%;
	
	min-width:540px;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  

  background-image: url("img/TransparentLeft.png"),
                      url("img/TransparentRight.png"),
                      url("img/BackgroundLightLoop.png");
  
    background-position: 0% 0%, 100% 0%, 50% 0%;
    background-repeat: repeat-y, repeat-y, repeat;
		background-size:20%, 20%, 7.5%;
  /*background-size: auto, cover, auto;*/
  z-index: -1;
}

body
{
    color:white;
    /*text-shadow: 1px 1px #3d475c;*/
    font-family: 'Open Sans', Trebuchet MS,sans-serif;
    font-weight: bold;
}

.flex-container 
{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.topLink
{
	color: gray;
	
	position:relative;
	bottom:0%;
	font-size:1.5em;
	text-shadow: 2px 2px 3px black;
	text-decoration:none;
	
	-webkit-transition: color 0.2s ease-in-out; /* Transition for background-color over 0.5s with an ease-in-out timing function */
    -moz-transition: color 0.2s ease-in-out; /* Transition for background-color over 0.5s with an ease-in-out timing function */
	transition: color 0.2s ease-in-out; /* Transition for background-color over 0.5s with an ease-in-out timing function */
}

a.topLink:hover,
a.topLink:visited:hover
{
	color: white;
}

a.topLink:visited 
{
	color: gray;
}

.row 
{
  display: grid;
  gap: 1rem;
  padding: 0.5rem;
}

/* One column */
.row.one 
{
  grid-template-columns: 1fr;
}

/* Two columns */
.row.two 
{
  grid-template-columns: 1fr 1fr;
}

/* Three columns */
.row.three 
{
  grid-template-columns: 1fr 1.5fr 1fr;
}

/* Five columns */
.row.five 
{
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}


.overlay-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width:100%;
  height:100%;
  /*adding: 1rem;*/
}

.box 
{
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 0.2rem;
  overflow: hidden;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
}

.box.left
{
	justify-content:flex-start;
}

.box.right
{
	justify-content:flex-end;
}

.box.bottom
{
	/*align-self: end;*/
	align-items:end;
}

.box.hero 
{
	width:100%;
	position:relative;
	top:0%;
	transition: 0.2s;
	min-height:1rem;
}

.box.hero:hover
{
	top:-3%;
}

.box.seperator
{
	height:1.5.rem;
	min-height:1.5rem;
}

.box.vikings 
{
	background-image:url('img/VOT/votpane.png'); 
	/*background-size: max(100%, 725px) auto; */
	background-size: 100%;
	background-position:center;
	
	transition: 0.2s;
	
	text-decoration: none;  /* remove underline */
	cursor:pointer;
}

.box.vikings:hover
{
	background-size: 102.5%;
}

.box.vikings img
{
	width:35%;
	
	transition: .2s;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%); /* Shifts the image back by half of its own width and height */
}

.box.vikings:hover img
{
	width:40%;
}

/* SAVANT BOX */
.box.savant
{
	display:block;
	position:relative;
	
	transition: .2s;
	color: transparent;

	background:url('img/savantbg.png');
	
	background-size:200%;
	background-position:30% 50%;
	
	text-decoration: none;  /* remove underline */
	cursor:pointer;
}

.box.savant:hover
{
	/*background: -webkit-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('img/savantbg.png');*/
	background-position:30% 50%;
	background-size:220%;
	
	color:white;
}

.box.savant img
{
	transition: .2s;
	position:absolute;
	top:10%;
	right:5%;
	width:45%;
	opacity:1;
}

.box.savant:hover img
{
	top:15%;
	width:55%;
}

.box.owlboy
{
	display:block;
	
	background:url('img/OwlboyPane/owlboypane.png');
	background-position:center;
	
	/*background-size:100%;*/
	background-size:100%;
	
	transition: .2s;
	color: transparent;
	
	position:relative;
	text-decoration: none;  /* remove underline */
	cursor:pointer;
}

.box.owlboy:hover
{
	/*background: -webkit-linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('img/OwlboyPane/owlboypane.png');*/
	background-position:center;
    /*background-size:110%;*/
    background-size:110%;
	
	color: white;
}

.box.owlboy img
{
	transition: .2s;
	position:absolute;
	bottom:10%;
	left:5%;
	width:40%;
	opacity:1;
}

.box.owlboy:hover img
{
	width:50%;
	bottom:20%;
}

.box.newsletter
{
	background: url("img/newletterBackground.png");
	background-size: 100%;
	background-position:center;
	
	transition: .2s;
}

.box.newsletter:hover
{
	background-size:102%;
}

.box.newsletter img
{
	width:45%;
	opacity:1;
	
	transition: 0.2s;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%); /* Shifts the image back by half of its own width and height */
}

.box.newsletter:hover img
{
	top:42.5%;
}

.box.newsletter p
{
	position:absolute;
	bottom:1%;
	left:50%;
	transform: translate(-50%, 0%); /* Shifts the image back by half of its own width and height */
	margin:0.5rem;
	color:transparent;
	font-size:1.25rem;
	text-shadow: none;
	width:85%;
}

.box.newsletter:hover p
{
	color:white;
	text-shadow: 0px 0px 3px black;
}

/* SOCIAL MEDIA BOXES */
.box.social
{
	background-size:170%;
	background-position:center;
	background-color: rgba(255,255,255, 0);
	min-height:1rem;
	
	transition: 0.2s;
}

.box.social:hover
{
	background-size:180%;
	background-color: rgba(255,255,255, 0.25);
	background-blend-mode: lighten; /* 'lighten' works well with a white overlay */
}

.box.social img
{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%); /* Shifts the image back by half of its own width and height */
	
	transition: 0.2s;
	
	width:40%;
}

.box.social:hover img
{
	top:48.5%;
	width:47.5%;
}

.box.facebook
{
	background-image: url("img/FacebookBack.png"); 
}

.box.twitter
{
	background-image: url("img/TwitterBack.png"); 
}

.box.youtube
{
	background-image: url("img/YoutubeBack.png"); 
}

.box.mail
{
	background-image: url("img/MailBack.png"); 
}

.box.twitch
{
	background-image: url("img/TwitchBack.png"); 
}

@media (max-width: 1200px) 
{
	.box.owlboy:hover img
	{
		opacity:0;
	}
	
	.box.savant:hover img
	{
		opacity:0;
	}
	
	.box.newsletter:hover img
	{
		opacity:0;
	}
	
	.box.newsletter p
	{
		top:50%;
		left:50%;
		transform: translate(-50%, -50%); /* Shifts the image back by half of its own width and height */
	}
}

/* ---- RESPONSIVE BEHAVIOR ---- */

@media (max-width: 800px) {
  .row.three {
    grid-template-columns: repeat(3, 1fr);
  }

  .row.two {
    /*grid-template-columns: 1fr;*/
	grid-template-columns: repeat(2, 1fr);
  }

  .box.hero {
    /*aspect-ratio: 4 / 3;
	*/
	width:100%;
  }
}

#footer
{
    margin: auto auto 10% auto;
    clear:both;
    background: none;
    width: 100%;
    color: rgb(154, 153, 154);
    text-shadow: 0 2px 5px black;
	font-size:1rem;
}

#footer:hover
{
    box-shadow: none;
}

.emailsigil
{
    color: rgb(88, 88, 88);
}

.hiddenclear
{
    visibility:hidden;
    clear: both;
}