body{
  font:20px/1.1em arial, sans-serif;
  background:white;
}

.main {
	padding: 0px 10px 0px 10px;
}

.grid-gif {
	position: relative;
	z-index: 2000;
	display: grid;
  grid-template-columns: auto auto auto auto;
}

.container-list-link {
	-webkit-column-count:4;
	-moz-column-count:4;	
	columns: 4;
}

h1 {
	font-family: 'anthony';
	font-size: 50px;
	margin-top: 20px;
	margin-bottom: 29px;
	text-align: center;
}

h1 a {
	font-family: 'anthony';
	font-size: 50px;
	color: black;
}

a:hover {
	color: #fff;
	text-shadow: 0 0 7px red, 0 0 10px red, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);
	animation: colorblink_a 0.1s steps(1, end) infinite;
}

@keyframes colorblink_a { 
0% {color: #fff;
	text-shadow: 0 0 7px red, 0 0 10px red, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);
}
33.33% {color: #fff;
	text-shadow: 0 0 7px green, 0 0 10px green, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);}
66.66% { color: #fff;
	text-shadow: 0 0 7px blue, 0 0 10px blue, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);} 
}


a:visited {color: black;}

p, a {
	font-family: 'FT88_regular';
	font-size: 8px;
	line-height: normal;
	text-decoration: none;
	color: black;
}

hr {
	margin-top: 2em;
	margin-bottom: 2em;
}

img {
	width: 100%;
}


video {
    height: 100%;
    margin: auto;
  }

.v-item {
	background-color: black;
	aspect-ratio: 16 / 9;
}

.control-buttons {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border: solid black 1px;
	padding:5px;
	background-color: white;
}


.introload {
	display: grid;
	height: 100%;
  align-content: space-between; 
  justify-content: center;
}

.colophon {
}


.R_style {
	color:black; 
	text-shadow: none;
	animation: colorblink_R 1s steps(1, end) infinite;
}

@keyframes colorblink_R { 
0% { }
25% { color: #fff;
	text-shadow: 0 0 7px #e71717, 0 0 10px #e71717, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);} 
40% { color: black; 
text-shadow: none;} 
}


.G_style {
	color:black; 
	text-shadow: none;
	animation: colorblink_G 1s steps(1, end) infinite;
}

@keyframes colorblink_G { 
0% { }
50% { color: #fff;
	text-shadow: 0 0 7px green, 0 0 10px green, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);} 
65% { color: black; text-shadow: none;} 
}

.B_style {
	color:black; 
	text-shadow: none;
	animation: colorblink_B 1s steps(1, end) infinite;
}

@keyframes colorblink_B { 
0% { }
75% { color: #fff;
	text-shadow: 0 0 7px #0800ff, 0 0 10px #40f, 0 0 42px rgb(8, 0, 255), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);} 
90% { color: black; text-shadow: none;} 
}


.tour_style {
	color:black; 
	text-shadow: none;

}


.contribute {
	position: fixed;
	z-index: 2200;
  width: 300px;
  bottom: 27px;
	right: -100px;
  transform: rotate(-45deg);
  animation: blinker 2s steps(1, end) infinite;
}

.contribute h1 {
	font-size: 16px;
	line-height: 0;
  text-align: center;
  font-family: 'FT88_regular';
}

.contribute:hover {
	cursor: pointer;
}

@keyframes blinker {
  90% {
    color: white;
  }
  93% {
    color: black;
  }
  96% {
    color: white;
  }
}





.sidebar {
	z-index: 3000;
	position: fixed;
	right: 0;
	height: 100%;
	width: 40%;
	background: white;
	padding: 10px;
  overflow-y: scroll;
}

h3 {
	font-family: 'FT88_regular';
	text-align: center;
}

.sidebar p {
	font-size: 16px;
	margin-left: 20px;
	margin-bottom: 0.5em;
}

.sidebar li {
	font-size:16px;
	margin-left: 20px;
	margin-top: 2em;
}

.sidebar li p {
	margin-left: 0px;
}

.sidebar p a {
	font-size: 16px;
	color: #fff;
	text-shadow: 0 0 7px red, 0 0 10px red, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);
	animation: colorblink_a 0.1s steps(1, end) infinite;
}

@keyframes colorblink_a { 
0% {color: #fff;
	text-shadow: 0 0 7px red, 0 0 10px red, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);
}
33.33% {color: #fff;
	text-shadow: 0 0 7px green, 0 0 10px green, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);}
66.66% { color: #fff;
	text-shadow: 0 0 7px blue, 0 0 10px blue, 0 0 42px rgb(230, 18, 124), 0 0 77px rgb(230, 18, 124), 0 0 100px rgb(255, 0, 128);} 
}

.overflow-ellipsis {
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.top-button-sidebar {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	margin-bottom: 2em	; 

}


.language a {
	font-size: 16px;
}

.active a {
	text-decoration: underline;
}


/* media queries */
@media screen and (max-width: 900px) {
  h1, h1 a {
    font-size: 40px;
  }
}


/* media queries */
@media screen and (max-width: 720px) {
  h1, h1 a {
    font-size: 30px;
  }
}

/* media queries */
@media screen and (max-width: 520px) {
  h1, h1 a {
    font-size: 20px;
  }

  .sidebar {
  	width: 100%;
  }
}