/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
* {
  margin: 0;
  padding: 0;
}
/* -------------------------- */
body, html {
  height: 100%;
  width:100%;
  margin: 0;
  color: #D4951A;
  /*font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";*/
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}


@media only screen and (max-aspect-ratio: 1/1) {
	/*portrait*/
	html{font-size:4vh;}
}
@media only screen and (min-aspect-ratio: 1/1) {
	/*landscape*/
	html{font-size:7vh;}
}


.h-centered {
  display: flex;
  width: 100%;
  justify-content: center;
}
.v-centered {
  display: flex;
  width: 100%;
  align-items: center;
}

#letus {
  position: relative;
  padding-top:10vh;
  z-index: 1000;
  width: 100%;
  /*background-color: brown;*/
  text-align: center;
  font-size: 60%;
}
#kamala {
  position: relative;
  /*background-color: darkseagreen;*/
}

#wish {
  position: relative;
  padding-top:15vh;
  z-index: 1000;
  width: 100%;
  margin: auto;
  text-align: center;
  font-family: xmasfont;
  font-size:110%;
  line-height: 100%;
}
.who {
  font-size: 60%;
}

@font-face {
    font-family: 'xmasfont';
	 src: url('../_fonts/OvertheRainbow-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}

#audioContainer {
  position: relative;
  left: calc(50% - 5vh); /*subtract half of the width of audiobutton*/
  z-index: 1100;
  cursor: pointer;
  width: 100%;
 /* background-color: darkorchid;*/
  justify-content: center;
}


#btnToggle {
  position: absolute;
  top:4vh;

}
#buttonToggleImage {
  /*margin-left: 2vh;*/
	width:10vh;
	height:auto;
}

#songInfo {
  position: absolute;	
  left: 110px;
  top:4vh;
  /*background-color: crimson;*/
}


.attribution{
	font-size: 40%;
	position: absolute;
	bottom: 4vh;
	z-index: 1000;
	width:100%;
	text-align: center;
}

a:link, a:visited, a:hover, a:active{
	color: #D4951A;
	text-decoration: underline;

}




/* -------------------------- */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}




.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(images/clouds.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}