p, h2, h3, h4, li
{
	color:white;
	text-shadow: 1px 1px 2px black;
}
body
{
	background-image: url(img/background.png)
}
td
{
	width: 25%;
}
td img
{
	width: 100%; /* kakogo huya on ne rabotaet bez etoj hujni? po defaultu, ne vse img width 100%? */
}
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: outset 5px black; 
	margin: auto;
}
.video_card
{
    overflow:auto;
    width: 690px; /* padding (10px) + width (690px) + border (5px + 5px) = #centered width */
}
.card_bg
{
	background-color: rgba(0,0,0,0.5);
}
#indexcard
{
	background-image: linear-gradient(purple ,teal);
	width: 490px; /* width (490px) + border (5px + 5px) = 500px */
}
#aboutcard
{
	background-image: linear-gradient(midnightBlue, SteelBlue);
	width: 490px; /* width (490px) + border (5px + 5px) = 500px */
}
#aboutcard p
{
	text-align: left;
}
#portrait
{
	border: outset 3px brown;
	margin: 5px;
	margin-left: 10px;
}
#videocard
{
	background-image: linear-gradient(#1C1C1C , crimson);
	width: 680px;
}
#qacard
{
	background-image: linear-gradient(azure , wheat);
	width: 490px; /* width (490px) + border (5px + 5px) = 500px */
}
#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);
}
#secret
{
	display: inline-block; /*fixes animation not working */
	text-decoration: none;
	color: white;
}
#secret:hover
{
	animation: vibrate 0.1s 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); }
}