/* Main page */



/* =============== PAGE ====================== */
.trial_canvas_page {
  height: 900vh;
  max-height: 1200vh;
  overflow: hidden;
  position: fixed; /* always in same place on page relative to viewport */
  background-color: #fdfdfd;
}

#canvas {
  position: absolute;
  background-color:lightgrey
}

/* =============== BOAT ====================== */
/* original dimensions are 624 x 419 = 1.49 ish */

/* General settings for clouds */ 

/* Clouds  - read more about how to create them here: https://lauryndbrown.github.io/2017/06/08/creating-clouds-in-css.html and here 
https://codepen.io/codnanddrmn/pen/BRZvPm */
.cloudwrapper{
  position: absolute;
  width: 100%;
  top: 10%;
  height: 30%;
  height: auto;
  animation: move 20s linear infinite; /* animate the container holding the object not the clouds themselves */ 
}

#cloud {
	width: 200px;
	height: 60px;
	background: white;
	position: relative;
	border-radius: 200px;
	z-index: 2000;
}

#cloud:before,
#cloud:after {
	content: "";
	background: white;
	position: absolute;
	width: 100px;
	height: 80px;
	top: -15px;
	left: 10px;
	border-radius: 100px;
	transform: rotate(30deg);

}

#cloud:after {
	width: 120px;
	height: 120px;
	top: -55px;
	left: auto;
	right: 15px;
}


@keyframes move {
  0% {
    transform: translatex(5%);
  }
  25% {
    transform: translatex(8%);
  }
  32% {
    transform: translatex(9%);
  }
  41% {
    transform: translatex(10%);
  }
  70% {
    transform: translatex(9%px);
  }
  100% {
    transform: translatex(8%px);
  }
}

/* Sun  */
.theSun {
	opacity: 1;
	box-shadow: 0px 0px 15px 3px yellow;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 5vh;
	left: 30vw;
	animation: sunpulse 2s alternate infinite;
	border-radius: 50%;
	background-image: radial-gradient(circle, #ffd200 95%, #f7971e);
}

@keyframes sunpulse {
	from {
		box-shadow: 0 0 100px #ff0, 0 0 100px #ff0;
	}
	to {
		box-shadow: 0 0 25px #ff0, 0 0 75px #ff0;
	}
}

/* Sun rays */
.ray_box {
	position: absolute;
	margin: auto;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	width: 70px;
	/* If you change the time here you need to change the time for the sky animation below to be the same time*/
	animation: ray_anim 50s linear infinite;
}

.ray {
	background: -webkit-linear-gradient(
		top,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background: linear-gradient(
		top,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	margin-left: 10px;
	border-radius: 80% 80% 0 0;
	position: absolute;
	opacity: 0.1;
}

.ray1 {
	height: 170px;
	width: 30px;
	transform: rotate(180deg);
	top: -175px;
	left: 15px;
}

.ray2 {
	height: 100px;
	width: 8px;
	transform: rotate(220deg);
	top: -90px;
	left: 75px;
}

.ray3 {
	height: 170px;
	width: 50px;
	transform: rotate(250deg);
	top: -80px;
	left: 100px;
}

.ray4 {
	height: 120px;
	width: 14px;
	transform: rotate(305deg);
	top: 30px;
	left: 100px;
}

.ray5 {
	height: 140px;
	width: 30px;
	transform: rotate(-15deg);
	top: 60px;
	left: 40px;
}

.ray6 {
	height: 90px;
	width: 50px;
	transform: rotate(30deg);
	top: 60px;
	left: -40px;
}

.ray7 {
	height: 180px;
	width: 10px;
	transform: rotate(70deg);
	top: -35px;
	left: -40px;
}

.ray8 {
	height: 120px;
	width: 30px;
	transform: rotate(100deg);
	top: -45px;
	left: -90px;
}

.ray9 {
	height: 80px;
	width: 10px;
	transform: rotate(120deg);
	top: -65px;
	left: -60px;
}

.ray10 {
	height: 190px;
	width: 23px;
	transform: rotate(150deg);
	top: -185px;
	left: -60px;
}

@keyframes ray_anim {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}




.boat-container {
  position: absolute;
  display: flex;  /* allows any children to become flex box elements so it can grown or shrink to fit container */ 
  top: 50%;
  left: 20%;  
  opacity: 1;
  height: 50vh; 
  z-index: 400;
  border: 5px solid transparent;
  border-radius: 5px; /* rounded */ 
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  animation: rock-boat 3s ease-in-out infinite; 
  -webkit-animation: rock-boat 3s ease-in-out infinite; 
  img {
    max-width: 100%;
    max-height: 100%;
    flex-shrink:0;
    min-width:100%;
    min-height:100%
  }; 
}; 


.boat{
  justify-content:center;
  width: 100%;
  height: 100%;
  z-index: 700;
  top: 50%;
  visibility: 'hidden';
  animation: rock-boat 3s ease-in-out infinite; 
  -webkit-animation: rock-boat 3s ease-in-out infinite;
    img {
    max-width: 100%;
    max-height: 100%;
    flex-shrink:0;
    min-width:100%;
    min-height:100%
  }
}

@-webkit-keyframes rock-boat {	
	  50% { -webkit-transform:rotate(-5deg) translateY(-5px) }
}

.boat::after{
  content: ''; 
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 700;
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;
  -webkit-background-size: 20px;
  background-size: 20px;
  animation: steam 1s 2s infinite;  
  -webkit-animation: steam 1s 2s infinite;  
    img {
    max-width: 100%;
    max-height: 100%;
    flex-shrink:0;
    min-width:100%;
    min-height:100%
  }
}

@-webkit-keyframes steam {
  40%,
  60% {opacity:1}
  100% {-webkit-transform: translate(-15%, -35%) rotateZ(20deg)}
}

/* Substitute for boat could be rectangle */ 
.rectangle{
  visibility: hidden; 
  position: absolute;
  top: 50%;
  left: 20%;
  height: 2%;
  width: 2%;
  border: 3px solid #964B00;
  border-radius: 12px;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  z-index: 700; /* needs to be more than the ocean components */ 
}

.boat-container::after{
  content: ''; 
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 700;
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/steam.png') no-repeat;
  -webkit-background-size: 20px;
  background-size: 20px;
  animation: steam 1s 2s infinite;  
  -webkit-animation: steam 1s 2s infinite;
}; 

input[type=range] {
  -webkit-appearance: none;  /* Override default CSS styles */
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  position: absolute;
  top: 95%;
  left: 0%;
  z-index: 40;
}

/* =============== OCEAN WRAPPER ====================== */
/* This codes stuff relative to the height of the screen
in percentage so 100vh is 100% of viewing height */
.ocean-wrapper {
  height: 100vh;
  width: 100vw;
}

.ocean-container {
  position: absolute;
  top: 5%;
  left: 1%;
  height: 80vh; 
  width: 95vw; 
  border: 3px solid #807256;
  border-radius: 12px;
  overflow: hidden;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

/* Attach this classes to your mask element divs */
.show-element{
  display: block; 

}
.hide-element{
  display: none; 
}

/* Sky */
.sky {
  position: absolute;
  height: 30%;
  width: 100%;
  background: linear-gradient(to bottom, #037ccb 0%, #82ccef 100%);*/
  /* animation: skyChange 50s linear infinite; */ 
}


/* Sea or waves */
.sea {
  position: absolute;
  left: 0%;
  top: 30%;
  height: 47%;
  width: 100%;
  border-radius: 0 0 10% 10%;
  background: linear-gradient(to bottom, rgba(8,122,193,1) 0%, rgba(18,156,192,1) 25%, rgba(42,212,229,1) 50%, rgba(150,233,239,1) 75%, rgba(222,236,211,1) 100%);
  animation: wave_flow ease-in-out 10s infinite;
  -webkit-animation: wave_flow ease-in-out 10s infinite;
  transform-origin: 50% 0%;
  overflow: hidden;
  z-index: 20;
}

@keyframes wave_flow {
  0%   { transform: scaleY(1.00); }
  35%  { transform: scaleY(1.20); }
  69%  { transform: scaleY(1.00); }
  100% { transform: scaleY(1.00); }
}
@-webkit-keyframes wave_flow {
  0%   { transform: scaleY(1.00); }
  35%  { transform: scaleY(1.20); -webkit-transform: scaleY(1.20); -moz-transform: scaleY(1.20); -ms-transform: scaleY(1.20); -o-transform: scaleY(1.20); }
  69%  { transform: scaleY(1.00); }
  100% { transform: scaleY(1.00); }
}

.wet-sand {
  position: absolute;
  left: 0%;
  top: 70%;
  height: 14%;
  width: 100%;
  border-radius:0 0 25% 25%;
  background: #ecc075;
  box-shadow: 0 10px 10px 0 #ecc075;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation: wet-sand ease-in-out 10s infinite;
  -webkit-animation: wet-sand ease-in-out 10s infinite;
  /*cubic-bezier(.08,.91,.83,.67):;
  /*https://cubic-bezier.com/#.08,.91,.83,.67  modify the parameters here */;
  -webkit-border-radius:0 0 25% 25%;
  -moz-border-radius:0 0 25% 25%;
  -ms-border-radius:0 0 25% 25%;
  -o-border-radius:0 0 25% 25%;
}

@keyframes wet-sand {
  0%   { opacity: 0.2; }
  34%  { opacity: 0.2; }
  35%  { opacity: 0.7; }
  100% { opacity: 0.2; }
}
@-webkit-keyframes wet-sand {
  0%   { opacity: 0.2; }
  34%  { opacity: 0.2; }
  35%  { opacity: 0.7; }
  100% { opacity: 0.2; }
}

/* ---------------------------------- */
/* SEAFOAM AND WAVES                  */
/* ---------------------------------- */
.seafoam {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 80%;
  background: linear-gradient(to bottom, transparent 0%, transparent 90%, white 100%);
  -webkit-animation: seafoam ease-in-out 10s infinite;
  animation: seafoam ease-in-out 10s infinite;

}

@keyframes seafoam {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}
@-webkit-keyframes seafoam {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

.sand {
  position: absolute;
  top: 50%;
  height: 50%;
  width: 100%;
  background: #fdf1d7;
}

.sand-front {
  position: absolute;
  height: 10%;
  width: 100%;
  background: #fdf1d7;
  top: 90%;
}

/* =============== SLIDER STUFF ====================== */
.slidecontainer {
  width: 100; /* Width of the outside container */
}

/* The bucket slider itself */
input[type=range] {
  -webkit-appearance: none;  /* Override default CSS styles */
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  position: absolute;
  top: 95%;
  left: 0%;
  z-index: 40;
}

.button-container{
  position: absolute;
  height: 100px;
  width: 300px;
  left: 40%;
  top: 90%;
}

#bucket-button-next {
  display: block;
  right:    50%;
  bottom:   50%;
  padding: 6px 12px;
  margin:  0 auto; 
  font-size: 14px;
  font-weight: 400;
  font-family: 'VIC', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border-radius: 12px;
  border-color: rgba(18,156,192,1);
  background-color:  rgba(18,156,192,1);
}


/* Different versions of the slider thumb */ 
.clicked::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: rgba(18,156,192,1);
  border-radius: 10px;   
  cursor: pointer; /* Cursor on hover */
  overflow: visible;
}

.clicked::-moz-range-thumb {
 -webkit-appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 15px; /* Slider handle height */
  background: rgba(18,156,192,1);
  cursor: pointer; /* Cursor on hover */
  top: 2%;
  left: 0%; 
  overflow: visible; 
}

.unclicked::-webkit-slider-thumb {
  opacity:0;
}

.unclicked-thumb::-moz-range-thumb {
  opacity:0;
}