p, h2, h3, h4, li, #ticker_item
{
	color:white;
	text-shadow: 1px 1px 2px black;
}
body
{
	background-image: url(img/background.png)
}
td
{
	width: 25%;
}
td img
{
	width: 100%;
}
a:link 
{
	color: dodgerblue;
}
a:visited
{
	color: blueviolet;
}
ul
{
	text-align: left;
}
ul li:nth-child(odd)
{
	list-style-type: none;
    font-size: 12px;
    margin-bottom: 5px;
}
#centered
{
	margin: auto; 
	display:block; 	
	align-content: center;
	
	width: 720px; 
	min-height: 90vh;
	
	text-align: center; 
}
.card
{
	padding: 10px;
	border: ridge 5px white; 
	margin: auto;
	width: 490px; /* width (490px) + border (5px + 5px) = 500px */
}
.large_card
{
    overflow:auto;
    width: 690px; /* padding (10px) + width (690px) + border (5px + 5px) = #centered width */
}
.card_shadow
{ background-color: rgba(0,0,0,0.7); }

#quote
{
	font-family: Georgia;
	font-style: italic;
	color:gold;
	text-shadow: 1px 1px 2px darkgoldenrod;
}
#lang, #gonav
{	
	width: 19%;
	float: left;
	border: ridge 3px white;
}
#gonav
{
	float: right;
	width: auto;
	background-color: black;
}
#gonav a 
{
	float: right;
}
#gonav a img
{
	width: 100%;
}
h2
{
	clear: both;
}

#ticker_wrap
{
	border: ridge 3px white;
	width:78%;
	float:right;
}
/*ty Lewis Carey for this ticker code https://codepen.io/lewismcarey/pen/GJZVoG*/
#ticker_wrap
{
	overflow:hidden;
	box-sizing: content-box;
}
#ticker
{
	display: inline-block;
	box-sizing: content-box;
	white-space: nowrap;
	animation: ticker 15s linear infinite;
}
#ticker_item
{
	display:inline-block;
	padding: 0 2rem;
}
#ticker_item:first-child
{
	padding: 0 2rem 0 24rem;
}

nav
{
	display: flex;
	
}
nav a
{
	max-width: 25%;
}
nav a button
{
	background-image: linear-gradient(gray, beige);
	height:100%;
}
nav a button img
{
	width: 100%;
}
#videoinfo, #videosongs, #windowtop
{
	width:49%; 
}
#videoinfo, #videosongs, #mediaplayer
{
	border:outset grey 3px;
	border-top-width: 0px;
}
#videoinfo, #videosongs
{
	height: 320px; 
	overflow:auto;
}
#videoinfo
{
	float: left; 
	text-align: left;
}
#videosongs
{
	float: right; 
}
#windowtop
{
	font-family: "Microsoft Sans Serif";
	color: white;
	border:outset grey 3px;
	border-bottom-width: 0px;
	background-image: linear-gradient(90deg, blue, teal);
	text-align: left;
}
#windowtop img
{
	width:20px;
	height:20px;
	margin-right: 4px;
	margin-bottom: -4px;
}
#mediaplayer
{
	height: 363px;
}
#mediaplayer_controls
{
	padding: 1%;
	flex-direction: column;
	width:15%;
	float:right;
	background-image: linear-gradient(steelblue, black); 
}
#mediaplayer_controls a
{
	max-width: 100%;
}
#mediaplayer_controls button
{
	background-image: linear-gradient(grey, beige);
	position: relative;
}
#btn_stat
{
	width: 10%;
	position: absolute;
	left: 2px;
	top: 2px;
	z-index: 1;
}
#mediaplayer_video
{
	float:left;
	width:83%;
	height:360px
}

#portrait
{
	border: outset 3px brown;
	margin: 5px;
	margin-left: 10px;
}
#headercard
{ 
	border: ridge 3px white;
	border-top: none;
	background-image: linear-gradient(purple ,teal);
	clear: both;
}
#indexcard
{ background-image: linear-gradient(lightslategrey, grey);	}
#aboutcard
{ background-image: linear-gradient(SteelBlue, midnightBlue);}
#aboutcard p, #contactcard p, #resourcecard p
{ text-align: left;}
#videocard
{ background-image: linear-gradient(#1C1C1C , crimson); }
#contactcard
{ background-image: linear-gradient(azure , grey); }
#resourcecard
{ background-image: linear-gradient(darkblue, lime); }
#video_itemcard_0	/*lifeful company*/
{ background-image: linear-gradient(#1C1C1C , springgreen); }
#video_itemcard_1	/*barotrauma video*/
{ background-image: linear-gradient(darkgoldenrod, darkblue); }
#video_itemcard_2	/*content warning video*/
{ background-image: linear-gradient(black, lightslategrey); }
#video_itemcard_3	/*random clips video*/
{ background-image: linear-gradient(mediumorchid, white); }
#video_itemcard_4	/*sotf video*/
{ background-image: linear-gradient(steelblue, beige, limegreen); }
#video_itemcard_5	/*straftat video*/
{ background-image: linear-gradient(darkseagreen, darkslategrey); }
#secret
{
	display: inline-block; /*fixes animation not working */
	text-decoration: none;
	color: white;
}
#secret:hover
{
	animation: vibrate 0.1s infinite;
}
#unavailablecard {
    background-image: linear-gradient(180deg, #383838, #8a8a8a, #383838);
	background-size: 10% 1000%;
    animation: staticbg 0.3s linear infinite;
}
/* animations */
.rainbowtext
{
	animation: rainbow 2s linear infinite;
}
@keyframes rainbow 
{
	0%, 100% { color: red; text-shadow: -1px 0 0 orange, -2px 0 0 yellow, -3px 0 0 lime, -4px 0 0 green, -5px 0 0 blue, -6px 0 0 magenta; }
	14% { color: orange; text-shadow: -1px 0 0 yellow, -2px 0 0 lime, -3px 0 0 green, -4px 0 0 blue, -5px 0 0 magenta, -6px 0 0 red; }
	28% { color: yellow; text-shadow: -1px 0 0 lime, -2px 0 0 green, -3px 0 0 blue, -4px 0 0 magenta, -5px 0 0 red, -6px 0 0 orange; }
	43% { color: lime; text-shadow: -1px 0 0 green, -2px 0 0 blue, -3px 0 0 magenta, -4px 0 0 red, -5px 0 0 orange, -6px 0 0 yellow; }
	57% { color: green; text-shadow: -1px 0 0 blue, -2px 0 0 magenta, -3px 0 0 red, -4px 0 0 orange, -5px 0 0 yellow, -6px 0 0 lime; }
	71% { color: blue; text-shadow: -1px 0 0 magenta, -2px 0 0 red, -3px 0 0 orange, -4px 0 0 yellow, -5px 0 0 lime, -6px 0 0 green; }
	86% { color: magenta; text-shadow: -1px 0 0 red, -2px 0 0 orange, -3px 0 0 yellow, -4px 0 0 lime, -5px 0 0 green, -6px 0 0 blue; }
} 
.glow
{
	animation: glowBurst 2s linear infinite;
}	

@keyframes glowBurst {
    0% { text-shadow: 0 0 10px #ff0000; border-color: #ff3333; }
    10% { text-shadow: 0 0 30px #ff0000, 0 0 50px #ff0000, 0 0 70px #ff0000; border-color: #ff6666; }
    20% { text-shadow: 0 0 10px #ff0000; border-color: #ff3333; }
    100% { text-shadow: 0 0 10px #ff0000; border-color: #ff3333; }
}

@keyframes vibrate {
    0% { transform: translate(0px, 0px); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(-1px, -1px); }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
/* ty https://www.gradient-animator.com/ for this */

@-webkit-keyframes staticbg {
    0%{background-position:50% 0%;}
    100%{background-position:50% 100%;}
}
@-moz-keyframes staticbg {
    0%{background-position:50% 0%;}
	100%{background-position:50% 100%;}
}
@keyframes staticbg {
    0%{background-position:50% 0%;}
	100%{background-position:50% 100%;}
}