/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/** END OF RESET **/


/* Box Model Hack */
*{
  box-sizing: border-box;
}

/********************************************************************************
/* LAYOUT FOR THE INITIAL VISUALS (FIRST PAGE BEFORE ANY CHARACTERS ARE CHOSEN).
/********************************************************************************/
body {
  background: black;
  height: 937px;
  overflow-x: hidden;
}

section {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

h1 {
  text-align: center;
  color: #6a040f;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  margin-bottom: 60px;
  font-size: 2.5rem;
}

ul{
  display: flex;
  justify-content: center;
  gap: 40px;
}

li{
  display: flex;
  justify-content: center;
}

img{
  display: flex;
  height: 500px;
  position: relative;
  top: 0;
}


/* For the hover styling, when we hover over a card,we want our cards to pulse the
box-shadow/glow, and we want the card to slightly lift up. We have to copy and paste this code
for each character instead of using one class to select all four cards because the keyframe
is specific to each character (the keyframe's box-shadow glow colors specifically). I tried 
to find a way to minimalize repetition, but keyframes are tricky. *************************/

/* The animations and transitions for Chrollo's card. */
#cimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: cpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes cpulse {
  0% {
    box-shadow: 0 0 30px 30px #7609b1;
  }
  60% {
    box-shadow: 0 0 15px 15px #7609b1;
  }
  100% {
    box-shadow: 0 0 30px 30px #7609b1;
  }
}

/* The animations and transitions for Gon's card. */
#gimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: gpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes gpulse {
  0% {
    box-shadow: 0 0 30px 30px #528b2b;
  }
  60% {
    box-shadow: 0 0 15px 15px #528b2b;
  }
  100% {
    box-shadow: 0 0 30px 30px #528b2b;
  }
}

/* The animations and transitions for Killua's card. */
#kilimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: kilpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes kilpulse {
  0% {
    box-shadow: 0 0 30px 30px #96e6ff;
  }
  60% {
    box-shadow: 0 0 15px 15px #96e6ff;
  }
  100% {
    box-shadow: 0 0 30px 30px #96e6ff;
  }
}

/* The animations and transitions for Kurapika's card. */
#kurimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: kurpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes kurpulse {
  0% {
    box-shadow: 0 0 30px 30px #e15aa6;
  }
  60% {
    box-shadow: 0 0 15px 15px #e15aa6;
  }
  100% {
    box-shadow: 0 0 30px 30px #e15aa6;
  }
}

/*****  .fight is a class assigned to all four character's sections in HTML.
We are choosing all four of them and setting all of the SPECIAL visuals 
(after a character is chosen) to be display: none, aka completely hidden 
from the viewport. All we want to see before we choose a character is the 
initial styling and initial page. *****************************************/
.fight {
  display: none;
}



/*******************************************************************************************************************************************************************
/* STYLING FOR ONCE A CHARACTER IS CHOSEN. I STYLE BY COMMON SECTIONS, FOR EXAMPLE: ALL BACKGROUNDS, THEN ALL HEADINGS, THEN ALL SPANS, ETC. THIS REDUCES REPTITION.
/********************************************************************************************************************************************************************/


/* .fight selects all four character's sections. 
All of their backgrounds will have these styles: */
.fight {
  background-repeat: no-repeat;
  background-size: cover;
}

/* Setting each character's specific background */
.chrolloVid {
  background-image: url("./imgs/chrollobg.jpg");
}

.gonVid {
  background-image: url("./imgs/gonbg.jpg");
}

.killuaVid {
  background-image: url("./imgs/killuabg.jpg");
}

.kurapikaVid {
  background-image: url("./imgs/kurapikabg.jpg");
}

/* The container for the heading & span (character's name) */
.youChose {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
}

/* The heading that says "You chose:" */
h2 {
  color: black;
  font-size: 3rem;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  animation: fadeIn linear 3s, moveUp 4s;
  margin: 0;
} 

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes moveUp {
  0% {transform: translateY(200px);}
  30% {transform: translateY(200px);}
  100% {transform: translateY(0px);}
}

/* The span that contains the character's name. */
.fight span {
  color: black;
  font-size: 5rem;
  font-weight: 800;
  opacity: 0;
  animation: fadeIn forwards 3s;
  animation-delay: 4s;
}

/* Setting each character's name to have a text "outline" by manipulating text-shadow  */
.chrolloVid span {
  text-shadow: -1px 0 #6a040f, 0 1px #6a040f, 1px 0 #6a040f, 0 -1px #6a040f;
}

.gonVid span {
  text-shadow: -1px 0 #ba3223, 0 1px #ba3223, 1px 0 #ba3223, 0 -1px #ba3223;
}

.killuaVid span {
  text-shadow: -1px 0 #8cd2f5, 0 1px #8cd2f5, 1px 0 #8cd2f5, 0 -1px #8cd2f5;
}

.kurapikaVid span {
  text-shadow: -1px 0 #e861ae, 0 1px #e861ae, 1px 0 #e861ae, 0 -1px #e861ae;
}

/* Positioning the images and videos. Should have an image on each side of the video.  */
/* .chosen chooses the section that holds the two images and video; it is applied to all four character's corresponding sections */

.chosen {
  display: flex;
  flex-direction: row;
  height: 80%;
  margin-bottom: 100px;
  align-items: center;
  gap: 100px;
}

.chosen img {
  display: flex;
  height: 500px;
  width: 400px;
  opacity: 0;
  animation: floating 3s infinite ease-in-out, fadeIn 3s 6s forwards;
}

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}

/* Setting the specific glow for each character's images and videos */
.c2 img {
  box-shadow: 0 0 30px 30px #63154f;
}

.g2 img {
  box-shadow: 0 0 30px 30px #e4722e;
}

.kil2 img {
  box-shadow: 0 0 30px 30px #9045cd;
}

.kurapika2 img {
  box-shadow: 0 0 28px 28px #e861ae;
}

/* Positioning the character's videos and adding opacity: 0 so 
that our animation fadeIn is compatible. Remember, we wrote the 
code for fadeIn earlier so we don't have to write it again down here. 
The style sheet will find it in the cascade and apply it, as we have 
called for it with animation: fadeIn *******************************/
.chosen video {
  display: flex;
  width: 33.33%;
  height: 360px;
  align-items: center;
  opacity: 0;
  animation: fadeIn 1s 7.5s forwards;
}

/* Adding glow to the character's videos
how to use box-shadow: x offset, y offset, blur size, spread size, color
blur size and spread size are optional (they default to 0) */
#chrolloVid {
  box-shadow: 0 0 30px 30px #63154f;
}

#gonVid {
  box-shadow: 0 0 30px 30px #e4722e;
}

#killuaVid {
  box-shadow: 0 0 30px 30px #9045cd;
}

#kurapikaVid {
  box-shadow: 0 0 30px 30px #e861ae;
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/** END OF RESET **/


/* Box Model Hack */
*{
  box-sizing: border-box;
}

/********************************************************************************
/* LAYOUT FOR THE INITIAL VISUALS (FIRST PAGE BEFORE ANY CHARACTERS ARE CHOSEN).
/********************************************************************************/
body {
  background: black;
  height: 937px;
  overflow-x: hidden;
}

section {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

h1 {
  text-align: center;
  color: #6a040f;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  margin-bottom: 60px;
  font-size: 2.5rem;
}

ul{
  display: flex;
  justify-content: center;
  gap: 40px;
}

li{
  display: flex;
  justify-content: center;
}

img{
  display: flex;
  height: 500px;
  position: relative;
  top: 0;
}


/* For the hover styling, when we hover over a card,we want our cards to pulse the
box-shadow/glow, and we want the card to slightly lift up. We have to copy and paste this code
for each character instead of using one class to select all four cards because the keyframe
is specific to each character (the keyframe's box-shadow glow colors specifically). I tried 
to find a way to minimalize repetition, but keyframes are tricky. *************************/

/* The animations and transitions for Chrollo's card. */
#cimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: cpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes cpulse {
  0% {
    box-shadow: 0 0 30px 30px #7609b1;
  }
  60% {
    box-shadow: 0 0 15px 15px #7609b1;
  }
  100% {
    box-shadow: 0 0 30px 30px #7609b1;
  }
}

/* The animations and transitions for Gon's card. */
#gimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: gpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes gpulse {
  0% {
    box-shadow: 0 0 30px 30px #528b2b;
  }
  60% {
    box-shadow: 0 0 15px 15px #528b2b;
  }
  100% {
    box-shadow: 0 0 30px 30px #528b2b;
  }
}

/* The animations and transitions for Killua's card. */
#kilimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: kilpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes kilpulse {
  0% {
    box-shadow: 0 0 30px 30px #96e6ff;
  }
  60% {
    box-shadow: 0 0 15px 15px #96e6ff;
  }
  100% {
    box-shadow: 0 0 30px 30px #96e6ff;
  }
}

/* The animations and transitions for Kurapika's card. */
#kurimg:hover {
  transition: top ease 0.5s;
  top: -20px;
  animation-name: kurpulse;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite; 
}

@keyframes kurpulse {
  0% {
    box-shadow: 0 0 30px 30px #e15aa6;
  }
  60% {
    box-shadow: 0 0 15px 15px #e15aa6;
  }
  100% {
    box-shadow: 0 0 30px 30px #e15aa6;
  }
}

/*****  .fight is a class assigned to all four character's sections in HTML.
We are choosing all four of them and setting all of the SPECIAL visuals 
(after a character is chosen) to be display: none, aka completely hidden 
from the viewport. All we want to see before we choose a character is the 
initial styling and initial page. *****************************************/
.fight {
  display: none;
}



/*******************************************************************************************************************************************************************
/* STYLING FOR ONCE A CHARACTER IS CHOSEN. I STYLE BY COMMON SECTIONS, FOR EXAMPLE: ALL BACKGROUNDS, THEN ALL HEADINGS, THEN ALL SPANS, ETC. THIS REDUCES REPTITION.
/********************************************************************************************************************************************************************/


/* .fight selects all four character's sections. 
All of their backgrounds will have these styles: */
.fight {
  background-repeat: no-repeat;
  background-size: cover;
}

/* Setting each character's specific background */
.chrolloVid {
  background-image: url("./imgs/chrollobg.jpg");
}

.gonVid {
  background-image: url("./imgs/gonbg.jpg");
}

.killuaVid {
  background-image: url("./imgs/killuabg.jpg");
}

.kurapikaVid {
  background-image: url("./imgs/kurapikabg.jpg");
}

/* The container for the heading & span (character's name) */
.youChose {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
}

/* The heading that says "You chose:" */
h2 {
  color: black;
  font-size: 3rem;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  animation: fadeIn linear 3s, moveUp 4s;
  margin: 0;
} 

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes moveUp {
  0% {transform: translateY(200px);}
  30% {transform: translateY(200px);}
  100% {transform: translateY(0px);}
}

/* The span that contains the character's name. */
.fight span {
  color: black;
  font-size: 5rem;
  font-weight: 800;
  opacity: 0;
  animation: fadeIn forwards 3s;
  animation-delay: 4s;
}

/* Setting each character's name to have a text "outline" by manipulating text-shadow  */
.chrolloVid span {
  text-shadow: -1px 0 #6a040f, 0 1px #6a040f, 1px 0 #6a040f, 0 -1px #6a040f;
}

.gonVid span {
  text-shadow: -1px 0 #ba3223, 0 1px #ba3223, 1px 0 #ba3223, 0 -1px #ba3223;
}

.killuaVid span {
  text-shadow: -1px 0 #8cd2f5, 0 1px #8cd2f5, 1px 0 #8cd2f5, 0 -1px #8cd2f5;
}

.kurapikaVid span {
  text-shadow: -1px 0 #e861ae, 0 1px #e861ae, 1px 0 #e861ae, 0 -1px #e861ae;
}

/* Positioning the images and videos. Should have an image on each side of the video.  */
/* .chosen chooses the section that holds the two images and video; it is applied to all four character's corresponding sections */

.chosen {
  display: flex;
  flex-direction: row;
  height: 80%;
  margin-bottom: 100px;
  align-items: center;
  gap: 100px;
}

.chosen img {
  display: flex;
  height: 500px;
  width: 400px;
  opacity: 0;
  animation: floating 3s infinite ease-in-out, fadeIn 3s 6s forwards;
}

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}

/* Setting the specific glow for each character's images and videos */
.c2 img {
  box-shadow: 0 0 30px 30px #63154f;
}

.g2 img {
  box-shadow: 0 0 30px 30px #e4722e;
}

.kil2 img {
  box-shadow: 0 0 30px 30px #9045cd;
}

.kurapika2 img {
  box-shadow: 0 0 28px 28px #e861ae;
}

/* Positioning the character's videos and adding opacity: 0 so 
that our animation fadeIn is compatible. Remember, we wrote the 
code for fadeIn earlier so we don't have to write it again down here. 
The style sheet will find it in the cascade and apply it, as we have 
called for it with animation: fadeIn *******************************/
.chosen video {
  display: flex;
  width: 33.33%;
  height: 360px;
  align-items: center;
  opacity: 0;
  animation: fadeIn 1s 7.5s forwards;
}

/* Adding glow to the character's videos
how to use box-shadow: x offset, y offset, blur size, spread size, color
blur size and spread size are optional (they default to 0) */
#chrolloVid {
  box-shadow: 0 0 30px 30px #63154f;
}

#gonVid {
  box-shadow: 0 0 30px 30px #e4722e;
}

#killuaVid {
  box-shadow: 0 0 30px 30px #9045cd;
}

#kurapikaVid {
  box-shadow: 0 0 30px 30px #e861ae;
}