*
{
	margin: 0pt;
	padding: 0pt;

	/* This prevents drag and select text/images */

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;	
    
    /* Prevents double tap zoom in mobile */
    touch-action: manipulation;
    
	
}

:root
{
  --minigameMargin: 100pt;
}

@media (hover: none) and (pointer: coarse)
{
    :root
    {
      --minigameMargin: 10pt;
    }
}

em
{
	font-style:normal;
}

body
{
	/* text */
	
	background-color:rgb(27,69,65);
    background-image:url('images/web-background.png');
	font-family: helvetica, arial, sans-serif;
	
    min-height:100vh;
	/*overflow:hidden;*/
	
}

#welcomeDisclaimer
{
    position:absolute;
    left:450px;
    top:240px;
    
    transition: opacity 0.5s ease-in-out;
    
    transform:translate(-50%, 0%);
    
	text-shadow: 0 0 10px #fff;

    font-style:italic;
    font-family:serif;
    font-size:50px;
    color:rgb(255,255,229);
    text-align:center;
    
    opacity:0.5;

    font-size:14px;
}



#minigame
{
	display:block;
    width:900px;
    height:360px;
	background-color:rgb(178,220,175);
	background-image:url('images/background.png');
	background-size:100%;
    image-rendering: crisp-edges;
	position:absolute;
    clip: rect(0px, 900px, 360px, 0px);
}

#myst
{
	display:block;
    left:0px;
    top:185px;
    width:900px;
    height:175px;
    image-rendering: crisp-edges;
	position:absolute;
    z-index:0;
}

#vignette, #fader
{
	display:block;
    width:900px;
    height:360px;
    image-rendering: crisp-edges;
	position:absolute;
}

#seaBackground
{
	display:block;
    width:900px;
    height:44px;
    image-rendering: crisp-edges;
	position:absolute;
    left:0px;
    top:316px;
    bottom:0px;
    z-index:-1;
}

#seaForeground
{
	display:block;
    width:900px;
    height:33px;
    image-rendering: crisp-edges;
	position:absolute;
    left:0px;
    top:327px;
    bottom:0px;
    z-index:0;
}

#glowBackground, #glowForeground
{
    transition: opacity 1s ease-in-out;
}

#glowBackground
{
    position:absolute;
    z-index:-2;
    opacity: 0;
}

#glowForeground
{
    position:absolute;
    z-index: 0;
    opacity: 0;
}

#ship
{
	display:block;
	position:absolute;
	top:260px;
	left:130px;
	
	width:147px;
	height:68px;
    
	transition: rotate 0.15s ease-in-out;    
    transition: filter 0.15s ease-in-out;  
    transition: transform 0.15s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

.stick
{
	display:block;
	position:absolute;
	top:260px;
	left:0px;
	width:51px;
	height:155px;
}

.parallaxObject
{
	display:block;
	position:absolute;
    bottom:0px;
    z-index: -3;
}

.wave
{
	display:block;
	position:absolute;
	/*top:110px;*/
    top:137px;
	left:0px;
	width:543px;
	height:218px;
    
    transform-origin:385px 217px;
    transition: transform 2.0s ease-in-out;
    transform:scale(50%);
}

/*
.parallax1Object1
{
	display:block;
	position:absolute;
    image-rendering: auto;
}
*/

#hope, #letter
{
    transition: opacity 1s ease-in-out;
}

#hope
{
    display:block;
    position:absolute;
    left:347px;
    top:39px;
}

#letter
{
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}

#helpText
{
    font-size:18px;
	margin-top:3px;	
}

#points
{
    display:block;
	
	opacity: 0.0;
	transition: opacity 0.5s ease-in-out;
	
	text-shadow: 0 0 10px rgb(179,254,229);	
	
    position:absolute;
    right: 60px;
    top: 20px;
    text-align:right;
    color:rgb(179,254,229);
    font-style:italic;
    font-family:serif;
    font-size:21px;
}

#minigame, #vignette, #fader
{
    border-radius:20px 20px 0px 0px;    
}

.menu
{
	display:block;

	opacity:    0.0;
	transition: opacity 0.5s ease-in-out;
	
	text-shadow: 0 0 10px #fff;

    font-style:italic;
    font-family:serif;
    font-size:50px;
    color:rgb(255,255,229);
    text-align:center;	
	
	position:absolute;
	left:50%;
	top:42%;
	transform:translate(-50%, -50%);
	
	width:100%;
}

#gameOverScore
{
    font-size:16px;
	margin-top:5px;	
}

#welcomeStart, #gameOverRestart
{
    font-size:20px;
    margin-top:20px;
	transition: opacity 0.5s ease-in-out;
}

#welcomeTitle
{
	font-size:45px;
}

#welcomeScore
{
	font-size:16px;
	margin-top:10px;	
}

#fader
{
	opacity:0.4;
}



#minigame
{
	display:block;
	position:absolute;
	left:calc(100vw / 2);
	top:calc(100vh / 2);
	transform:translate(-50%, -50%) scale(min(100vw  / (900px + var(--minigameMargin) * 2), 100vh / (360px + var(--minigameMargin) * 2)));
    overflow: hidden;
   
}

@-moz-document url-prefix()
{
    /* Firefox doesn't evaluate the division of things like 2px / 2rem as an unitless value that can be passed to scale,
       so adjusting the layout the way is done with other browsers is not possible
       see: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc#browser_compatibility */
    
    #minigame
    {
        transform:translate(-50%, -50%);
       
    }
}