@charset "UTF-8";
/* CSS Document */



body,td,th {
    font-family: 'Hind Madurai', Helvetica Neue, Helvetica, Arial, sans-serif;    
    font-style: normal;
    font-size: 30px;
    color: #FF0004;
    font-weight: 400;
}

@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@400;600;700&display=swap');

html, body {
    background-color: #347ccc;
    background-image: url(images/repeating%20background.png);
    background-repeat: repeat;
    height: 100%;
    margin: 0px;
}
    
a:link {
    color: #FF0004;
    text-decoration: none;
}
a:visited {
    color: #FF0004;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
a:active {
    color: #FFFD00;
    text-decoration: none;
}

h1{    
    font-weight: 700;    
    font-style: normal;
}

h2{    
    font-weight: 600;
    font-style: normal;
}

.ParentBox {
	width: 100%;
	height: 100%;
    display: grid;
    place-items: center; 
}

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #537db9;
     color: #FFF;
}


/* ******** HOME PAGE CSS ******** */

.MainContainer {
    width: 1366px;
    height: 768px;
    background-image: url(images/Xenoblade_home_menu_gif.gif);
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
    border: 5px solid #000000;
    border-radius: 30px;
    position: relative;
    background-position: 0% 0%;
    background-origin: padding-box;
    background-size: cover;
    border-spacing: 0px 0px;
}

.HomeMainMenu_Logo {
    position: absolute;
    top: 118px;
    left: 115px;
}
.HomeAbout_Nav {
    position: absolute;
    padding-top: 0px;
    top: 114px;
    right: 51px;
}
.HomeCharacter_Nav {
    position: absolute;
    top: 214px;
    right: 45px;
}
.HomeWorlds_Nav {
    position: absolute;
    top: 311px;
    right: 39px;
}
.HomeMusic_Nav {
    position: absolute;    
    top: 403px;
    right: 37px;
}

.MenuMusic {
    position: absolute;
    bottom: 80px;
    right: 80px;
}



/* ******** ABOUT PAGE CSS ******** */


.MainContainerAbout {
    width: 1366px;
    height: 768px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/Background.png);
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
    border: 5px solid #000000;
    border-radius: 30px;
    position: relative;
    background-position: 0% 0%;
    background-origin: padding-box;
    background-size: cover;
    border-spacing: 0px 0px;
}


.IntAboutMenu_Logo {
    position: absolute;
    left: 30px;
    top: 30px;
}


.IntAbout_Nav {
    position: absolute;
    left: 00px;
    top: 30px;
}

.IntAbout_Character {
	position: absolute;
    left: 550px;
    top: 35px;
}
.IntAbout_Worlds {
  position: absolute;  
    left: 800px;
    top: 40px;
}

.IntAbout_Music {
	position: absolute; 
    left: 1050px;
    top: 30px;
}

.About_Page_Text {
	top: 186px;
	left: 50px;
	width: 550px;
	height: 450px;
	text-align: right;
	position: absolute;
	padding-left: 30px;
    padding-right: 40px;
    padding-top: 30px;
    padding-bottom: 40px;
	overflow-y: auto;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.52);
}

.TextInside{
    font-family: 'Hind Madurai', sans-serif;
	margin: 0;
    color:#000;
    font-weight: 300;
    font-style: normal;
	font-size: 20px;
	text-shadow: 2px 2px 2px #FFFFFF;
    line-height: 30px;
}

.Video {
    position: absolute;
    border: 4px solid #F10004;
    top: 210px;
    right: 40px;
    width: 600px;
    height: 400px;
}



/* ******** CHARACTERS PAGE CSS ******** */



.MainContainerCharacters {
    width: 1366px;
    height: 768px;
    background-image: url(images/Xenoblade_home_menu_gif.gif);
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
    border: 5px solid #000000;
    border-radius: 30px;
    position: relative;
    background-position: 0% 0%;
    background-origin: padding-box;
    background-size: cover;
    border-spacing: 0px 0px;
}
.IntCharacterAbout_Nav {
    position: absolute;
    left: 420px;
    top: 30px;
}


.CharactersLeftSide{    
    left: 20px;
    top: 52px;
    width: 180px;
    height: 768px;
    position: absolute;
}

.Click{	
    top: 23px;
    left: 53px;
    position: absolute;
    font-size: 15px;
	margin-bottom: 10px;
	text-align: center;
	color: #000000;
    font-style: normal;
	font-weight: 600;
	text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
}

.CharactersRightSideLargeImagethatSwaps{
    /* width: 974px; */
    left: 200px;
    top: 100px;
    position: absolute;
}

.Stroke{
    border: 1px dashed #FFFFFF;
    margin-bottom: 6px;
}

.TextAtRight{
	top: 385px;
	right: 70px;
	width: 540px;
	height: 294px;
	position: absolute;
	font-size: 20px;
	text-align: left;
	color: #000000;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
	padding: 20px;
	overflow-y: auto;
	border-radius: 10px;
	background-color: rgba(255,255,255,0.75);
	-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 10px rgba(0,0,0,0.75);
}



/* ******** MENU ON ALL INTERIOR CHARACTER-LIKE PAGES CSS ******** */



.IntMainMenu_Logo {
    position: absolute;
    left: 200px;
    top: 11px;
}

.IntAbout_Nav {
    position: absolute;
    top: 30px;
    left: 310px;
    text-align: center;
}
.IntCharacter_Nav {
    position: absolute;
    top: 39px;
    left: 620px;
}
.IntWorlds_Nav {
    position: absolute;
    top: 47px;
    left: 838px;
}
.IntMusic_Nav {
    position: absolute;
    top: 37px;
    left: 1027px;
}


/* ******** WORLD PAGE CSS ******** */



.MainContainerWorld {
    width: 1366px;
    height: 768px;
    background-image: url(images/Makna%20Forest.jpg);
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
    border: 5px solid #000000;
    border-radius: 30px;
    position: relative;
    background-position: 0% 0%;
    background-origin: padding-box;
    background-size: cover;
    border-spacing: 0px 0px;
}
.WorldsMainMenu_Logo {
    position: absolute;
    top: 118px;
    left: 115px;
}
.WorldsAbout_Nav {
    position: absolute;
    padding-top: 0px;
    top: 114px;
    right: 51px;
}
.WorldsCharacter_Nav {
    position: absolute;
    top: 214px;
    right: 45px;
}
.HomeWorlds_Nav {
    position: absolute;
    top: 311px;
    right: 39px;
}
.WorldsMusic_Nav {
    position: absolute;    
    top: 403px;
    right: 37px;
}

.WorldsMusic {
    position: absolute;
    bottom: 80px;
    right: 80px;
}
.WorldsVideo {
	position: absolute;
    border: 4px solid 	#0000FF;
    top: 210px;
    right: 350px;
    width: 600px;
    height: 400px;
}
/* ******** MUSIC PAGE CSS ******** */

.MainContainerMusic {
    width: 1366px;
    height: 768px;
    background-image: url(images/music.jpg);
    background-repeat: no-repeat;
    -webkit-box-shadow: 3px 3px 10px #000000;
    box-shadow: 3px 3px 10px #000000;
    border: 5px solid #000000;
    border-radius: 30px;
    position: relative;
    background-position: 0% 0%;
    background-origin: padding-box;
    background-size: cover;
    border-spacing: 0px 0px;
}
.MusicMainMenu_Logo {
    position: absolute;
    top: 666px;
    left: 1101px;
}
.MusicAbout_Nav {
    position: absolute;
    padding-top: 0px;
    top: 114px;
    right: 51px;
}
.MusicCharacter_Nav {
    position: absolute;
    top: 214px;
    right: 45px;
}
.MusicWorlds_Nav {
 position: absolute;
    top: 311px;
    right: 39px;
}
.MusicMusic_Nav {
    position: absolute;    
    top: 403px;
    right: 37px;
}

.AnObstacleInOurPathVideo {
	position: absolute;
    border: 4px solid #FFFFFF;
    top: 20px;
    left: 86px;
    width: 360px;
    height: 215px;
}

.YouWillKnowOurNames {
	position: absolute;
    border: 4px solid #FFFFFF;
    top: 408px;
    left: 86px;
    width: 360px;
    height: 215px;
}

.MechanicalRhythm {
	position: absolute;
    border: 4px solid #FFFFFF;
    top: 408px;
    left: 686px;
    width: 360px;
    height: 215px;
}

.GaurPlain {
	position: absolute;
    border: 4px solid #FFFFFF;
    top: 20px;
    left: 686px;
    width: 360px;
    height: 215px;
}

.AnObstacleInOurPathText{
    top: 250px;
    left: 40px;
    width: 540px;
    height: 68px;
    position: absolute;
    font-size: 40px;
    color: #000000;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
    padding: 30px;
    overflow-y: auto;
}

.YouWillKnowOurText{
    top: 643px;
    left: -22px;
    width: 540px;
    height: 28px;
    position: absolute;
    font-size: 40px;
    color: #000000;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
    padding: 30px;
    overflow-y: auto;
    text-align: center;
}
.GaurPlainText{
    top: 252px;
    left: 674px;
    width: 312px;
    height: 41px;
    position: absolute;
    font-size: 40px;
    color: #000000;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
    padding: 30px;
    overflow-y: auto;
    text-align: center;
}

.MechanicalRhythmText{
    top: 670px;
    left: 682px;
    width: 387px;
    height: 52px;
    position: absolute;
    font-size: 40px;
    color: #000000;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-shadow: 2px 2px 1px rgba(255,255,255,0.70);
    overflow-y: auto;
    text-align: center;
}