/*
*
{
-webkit-transition: all 0.2s ease-out !important; 
-moz-transition: all 0.2s ease-out !important; 
-o-transition: all 0.2s ease-out !important; 
transition: all 0.2s ease-out !important;
}
*/

body
{
font: 600 26px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
letter-spacing: -1px;
margin: 0;
}

a
{
color: #fff;
}

p a:hover, address a:hover
{
position: relative;
top: 1px;
}

i, em
{
font-weight: 300;
}

section, header, nav, footer
{
display: block;
}

section
{
width: 80%;
min-height: 400px;
padding: 10%;
}

footer
{
width: 80%;
padding: 2% 10%;
background-color: #111;
font-size: .7em;
text-align: right;
}

footer p
{
margin: 0;
}

footer address
{
float: left;
font-style: normal;
font-size: 1.6em;
line-height: 1;
}

body, #intro
{
	background-color: #ffad36;
}

#tgod-imperfect,  a[href="#tgod-imperfect"], #tgod-imperfect .download
{
	background-color: #333333;
}

#handsomejack,  a[href="#handsomejack"], #handsomejack .download,
#deadspace,  a[href="#deadspace"], #deadspace .download
{
	background-color: #ed5d26;
}

#nemo, a[href="#nemo"], #nemo .download,
#metropolis, a[href="#metropolis"], #metropolis .download
{
	background-color: #6abf8c;
}

#ai, a[href="#ai"], #ai .download,
#mewtwo, a[href="#mewtwo"], #mewtwo .download
{
	background-color: #7c1a53;
}

#howl, a[href="#howl"], #howl .download
{
	background-color: #c20042;
}



/***** INTRO *****/

h1
{
margin: 0 0 .5em;
font-size: 2em;
letter-spacing: -3px;
}

header h1
{
font-size: 2.5em;
line-height: 1.2;
}

nav
{
margin-top: 2em;
}

nav ul
{
padding-left: 0;
list-style-type: none;
column-count: 2;
}

nav li
{
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
line-height: 1.3;
}

nav a
{
padding: 1.3rem;
text-decoration: none;
color: #fff;

display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: 0.5em;

}

nav a, .title
{
font-size: 1.1em;
}

nav a:hover
{
background-color: #fff;
}

title-video-and-song
{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 0.10em;
}

nav span
{
display: block;
font-size: .6em;
margin-top: -.2em;
}

nav i
{
font-style: normal;
}


a[href="#tgod-imperfect"]:hover {color: #333333; }
a[href="#handsomejack"]:hover, a[href="#deadspace"]:hover {color: #ed5d26; }
a[href="#nemo"]:hover, a[href="#metropolis"]:hover  { color: #6abf8c; }
a[href="#ai"]:hover, a[href="#mewtwo"]:hover { color: #7c1a53; }
a[href="#howl"]:hover { color: #c20042; }





i.title
{
font-style: italic;
float: none;
font-weight: inherit;
}

nav .title
{
line-height: 1.2;
margin-bottom: .5rem;
}




/***** SECTIONS *****/

#tgod-imperfect .video-info, #tgod-imperfect .video-js .vjs-big-play-button, #tgod-imperfect .video-js .vjs-control-bar
{
	background-color: #111111;
}

#handsomejack .video-info, #handsomejack .video-js .vjs-big-play-button, #handsomejack .video-js .vjs-control-bar,
#deadspace .video-info, #deadspace .video-js .vjs-big-play-button, #deadspace .video-js .vjs-control-bar
{
	background-color: #b53300;
}

#nemo .video-info, #nemo .video-js .vjs-big-play-button, #nemo .video-js .vjs-control-bar,
#metropolis .video-info, #metropolis .video-js .vjs-big-play-button, #metropolis .video-js .vjs-control-bar{
	background-color: #4ea772;
}

#ai .video-info, #ai .video-js .vjs-big-play-button, #ai .video-js .vjs-control-bar,
#mewtwo .video-info, #mewtwo .video-js .vjs-big-play-button, #mewtwo .video-js .vjs-control-bar
{
	background-color: #590637;

}
#howl .video-info, #howl .video-js .vjs-big-play-button, #howl .video-js .vjs-control-bar
{
	background-color: #a30036;
}

.video-info
{
padding: 2.5%;
width: 95%;
margin: 2.5% 0;
position: relative;
}

dl
{
font-size: .8em;
padding: 0;
margin: 0;
}

dd
{
margin-top: -1.5em;
margin-left: 5em;
}

.download
{
display: block;
float: right;
font-size: 3em;
text-decoration: none;
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
right: 0;
margin: 2.5%;
}

.download span
{
display: block;
}

.download-icon
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
position: relative;
left: 2px;
}

.download-line
{
border-bottom: 4px solid;
width: 65%;
height: 83px;
margin: 0 auto;
}

.download:hover .download-icon
{
margin-top: 6px;
}

.download:hover .download-line
{
height: 77px;
}

.video-js
{
height: auto !important;
width: 100% !important;
aspect-ratio: 1.7;
font: 600 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.vjs-default-skin .vjs-big-play-button:before,
.vjs-default-skin .vjs-big-play-button,
.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus,
.vjs-default-skin .vjs-control:before
{
text-shadow: none !important;
box-shadow: none !important;
}

.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus
{
font-size: 4em;
}

/* VIDEO-JS v8.23.4 Subtitles */


.vjs-texttrack-settings
{
  display: none !important;
}

.vjs-text-track-cue div
{

background-color: unset !important;
text-shadow: 
	  1px 1px 2px black,
	  0 0 1em black,
	  0 0 0.2em black,
	-1px -1px 0 black,
	1px -1px 0 black,
	-1px 1px 0 black,
	1px 1px 0 black;
	  
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;

padding: 0.1em 0.25em;
color: white !important;
font-size: clamp(16px, 1.4em, 22px) !important;
}

/* Custom Subtitle colors 

#video-handsomejack .vjs-text-track-cue div
{
	color: #ffcc66 !important;
}

*/

/***** SUB/SUP *****/

sub, sup
{
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%; 
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
vertical-align: baseline;
}
 
sup
{
/* Move the superscripted text up */
top: -0.5em;
}
 
sub
{
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.25em;
}



/***** RESPONSIVITY *****/

@media screen and (max-width: 600px) {
	body
	{
	font-size: 20px !important;
	}

	nav ul
	{
	column-count: 1;
	}
}