@import url("/Assets/CSS/Chatranjali.css");

body {
	background: url("/Hindi/Gulzar/KidsCorner/HindiForHeart/HindiForHeart.jpg") no-repeat fixed center;
	background-size: contain;
}

page.text {
	color: #000000;
}
page.dark {
	color: #B8344B;
}
page.lite {
	color: #CC5771;
}

audio {
	preload: "auto";
}

#Introduction {
	margin-top: 25vh;
	width: 45vw;
}

#Letters object {
	width: 15%;
	cursor: pointer !important;
}
.vowel, .vowel:hover,
.velar, .velar:hover,
.palatal, .palatal:hover,
.retroflex, .retroflex:hover,
.dental, .dental:hover,
.labial, .labial:hover,
.semi-vowel, .semi-vowel:hover,
.fricative, .fricative:hover {
	transition-duration: 1s;
}

.vowel,
.velar,
.palatal,
.retroflex,
.dental,
.labial,
.semi-vowel,
.fricative {
	fill-opacity: 0;
	stroke: #000;
	stroke-width: 0.2;
}
.vowel:hover,
.velar:hover,
.palatal:hover,
.retroflex:hover,
.dental:hover,
.labial:hover,
.semi-vowel:hover,
.fricative:hover {
	fill-opacity: 1;
}
.vowel {
	fill: #000000;
}
.velar {
	fill: #FF0000;
}
.palatal {
	fill: #00FF00;
}
.retroflex {
	fill: #0000FF;
}
.dental {
	fill: #FF9900;
}
.labial {
	fill: #00FFFF;
}
.semi-vowel {
	fill: #FF00FF;
}
.fricative {
	fill: #C0C0C0;
}