@import url('https://use.typekit.net/qkd0qog.css');
@import url('https://unpkg.com/xp.css@/dist/98.css');
@import url('../textfonts.css');

/* 1px = 0.052vw*/

/* @media screen  */
/* and (min-device-width: 1200px)  */
/* and (-webkit-min-device-pixel-ratio: 1) { */
A:link { 
	text-decoration: underline; 
	color: white; 
}

A:visited { 
	text-decoration: underline; 
	color: white; 
}

A:active { 
	text-decoration: underline; 
	color: white; 
}

A:hover { 
	text-decoration: underline; 
	color:#0000ff;
}

h1 {
	font-family: 'Papyrus', sans-serif;
	font-size: 1.5rem;
	color: #6600ff;
	text-shadow: 0px 0px 5px lightpink;
}

p {
	font-family: "chaparral-pro", serif;
	font-weight: 400;
	font-style: normal;
	/* color: #FFFFFF; */
	margin-top: 0px;
}

body {
	background-image: url('../graphics/bgwire.gif.jpeg');
	p {
		font-size: 2rem;
		margin-bottom: 1rem;
		color: white;
		text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px darkred;
	}
	a {
		font-size: 1.5rem;
		color: white;
		font-family: 'Papyrus', sans-serif;
		text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	}

	ul li::marker {
  		color: white;
	}
}

@-webkit-ind-keyframes cursor {
  0% {cursor: url('../graphics/index/hottie-0.gif'), auto;}
  100% {cursor: url('../graphics/index/hottie-1.gif'), auto;}
} 

@keyframes cursor {
  0% {cursor: url('../graphics/index/hottie-0.gif'), auto;}
  100% {cursor: url('../graphics/index/hottie-1.gif'), auto;}
}

/* body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('https://idylladrian.github.io/graphics/forest.jpg');
      background-size: contain;
	  background-repeat: no-repeat;	
      background-position: center;
      z-index: -1;
} 
*/

.loader-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.loader {
	display: block;
	background-image: url('../graphics/frog_loader.gif');
	width: 5.2vw;
	height: 3.9vw;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 4.16vw;
	animation: loader 0.9s infinite ease;
}

@keyframes loader {
	0% { transform: translateX(0px);}
	7% { transform: translateX(-1.56vw);}
	14% { transform: translateX(-2.6vw);}
	21% { transform: translateX(-4.16vw);}
	28% { transform: translateX(-5.72vw);}
	35% { transform: translateX(-6.24vw);}
	42% { transform: translateX(-6.76vw);}
	49% { transform: translateX(-7.28vw);}
	56% { transform: translateX(-7.8vw);}
	63% { transform: translateX(-7.8vw);}
	70% { transform: translateX(-7.8vw);}
	77% { transform: translateX(-7.8vw);}
	84% { transform: translateX(-7.8vw);}
	91% { transform: translateX(-3.12vw);}
	100% { transform: translateX(0px);}
}

.content {
	display: block;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.center.block1 {
	background: rgba(245, 66, 144, 0.3);
	text-align: center;
	vertical-align: center;
	border: 3px solid white;
	/* padding-bottom: 20px; */
	width: 70vw;
	color: white;
}

#head-bloc {
	height: 4.16vw;
}

#navigation-panel {
	/* position: relative; */
	left: 0px;
	top: 0px;
	margin-top: 1.04vw;
	margin-left: auto;
	margin-right: auto;
	z-index: 0;
	float: none;
	/* max-width: 1920px; */
	width: 70vw;
}
}

#welcome-text {
	left: 50%;
}

#hot-not-table {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#nav-table {
	vertical-align: top;
	
	td, th { /* table cells */
		padding: .52vw;
	}
}

.graphic {
	display: block;
	position: absolute;
	left: 50%;
	background-repeat: no-repeat;
	background-origin: content-box;
}