/* vw, vh, vmin, vMax: https://www.sitepoint.com/css-viewport-units-quick-start/*/
/*calc(1vw + 1vh);*/
/*clamp(1.5em, 2.8vw, 4em); /*min, val, max*/

html{
	margin:0;
	padding:0;
	  height: 100%;
  width: 100%;
}

body {
  margin: 0 auto;
  background: #263357; /*#73b4ab;*/
  height: 100%;
  width: 100%;
  overflow: hidden;
  cursor: pointer;	/*make it easier to show one can click anywhere*/			
  display: flex;
  align-items: center;
  justify-content: center;
	
}

#xmasContainer{
	padding:4vh 4vh 4vh 4vh;	
	width: 100vw;
	height: 100vh;			
	display: flex;
	/*align-items: center;*/
	justify-content: center;
	/*background-color: darkmagenta;*/

}


#headlineText{
	width:80%;
	margin:auto;
	top:clamp(50px, 7vh, 200px);
	position: absolute;
	z-index:300;
	font-family: NothingYouCouldDo, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	/*font-size: clamp(2em, 3vmax, 3em);/*min, val, max*/
	font-size: clamp(14px, 2.5vmax, 48px);/*min, val, max*/
	line-height: 1em;
	color:#FFF;	
	text-align:center;
	/*background-color: crimson;*/
}

#headlineText > .smaller{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 50%;
	line-height: 1em;
	padding: 10px 0 10px 0;
}

/*unused*/
#shakeText{
	position: absolute;
	z-index:400;
	font-size: clamp(12px, 1.4vmax, 22px);
	line-height: clamp(12px, 1.5vmax, 22px);	
	color:#FFF;
	bottom: 0px;	
	width:100%;
	text-align:center;
	/*background-color:darkcyan;*/
}


#attribution{
	width:100%;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	position: absolute;
	z-index:400;
	font-size: clamp(12px, 1.2vmax, 22px);
	line-height: 1em; 
	color:#BBB;
	bottom: 3vh;		  
	text-align:center;
	/*background-color:darkcyan;*/
}

a, a:visited, a:hover, a:focus, a:active{
	color:#BBB;
}

 
#globe {
  position: absolute;
  top: 33vh;
  margin: 0px;	
  width: 50vh;   
  height: 50vh;
  transform-origin: 50% 60%; /*regpoint for shaking*/  
  /*background-color: coral;*/
}

#globe:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(img/globe.svg?v=20231222) center center / contain no-repeat;
  
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index:100;
}

#audioContainer {
	display: none;
}


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

@font-face {
    font-family: 'ComforterBrush';
	 src: url('fonts/ComforterBrush-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'NothingYouCouldDo';
	 src: url('fonts/NothingYouCouldDo-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'OvertheRainbow';
	 src: url('fonts/OvertheRainbow-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'Whisper';
	 src: url('fonts/Whisper-Regular.ttf');
	font-style: normal;
    font-weight: 400;
}