@import url('https://fonts.googleapis.com/css?family=Tangerine');
@import url('https://fonts.googleapis.com/css?family=Spectral+SC');

body{
  height: 0;
  padding-bottom: 7.25%;
  position: relative;
  background-image: url("background0.jpg");
  background-repeat:no-repeat;
  /* background-attachment: local; */
  background-position: 50% 0;
  font-family: 'Tangerine', serif;
  cursor:url(cursor.gif), none;
  /* cursor:url(hand.png), none; */
}

html{
  cursor:url(cursor.gif), none;
}

#swal2-title {
  font-family: Spectral SC, serif;
  font-size: 20px;
} /*Sweetalert2 ID */

#swal2-validation-message {
  font-family: Spectral SC, serif; 
  font-size: 15px; 
  font-weight: bold;
  background: none;
  color: black;
} /*Sweetalert2 ID for validation message div */

div {
  /* display: grid; */
  justify-items: center;
  text-align: center;
}

.container {
  display: grid;
}

h1 {
  margin: 10px;
  font-family: 'Tangerine', serif;
  color: #002b15;
  text-align: center;
  text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
  animation: fadein 14s;
  -webkit-animation: fadein 14s; 
}

h4 {  
  margin: 10px;
  font-family: 'Tangerine';
  color: #002b15;
  text-align: center;
  line-height: 21pt;
  text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
  animation: endtext 40s;
  -webkit-animation: endtext 40s;
  -moz-animation: endtext 40s; 
  -ms-animation: endtext 40s;
}

p, #Tale {
  width: 810px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 15px;
  color: #002b15;
  font-size: 31px;
  text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
  text-align: center;
  font-weight: bolder;
  line-height: 24pt;
  animation: fadein2 2.5s;
  -webkit-animation: fadein2 2.5s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein2 2.5s; /* Firefox < 16 */
  -ms-animation: fadein2 2.5s; /* Internet Explorer */
}

@media (max-width: 850px) {
  p, #Tale {
    width: 100%;
    }
  }

@media (max-width: 700px) {
  body {
  zoom: 0.7; 
  -moz-transform: scale(0.7);
  /* -moz-transform-origin: 0 0; */
  background-size: 100%;
  /* background-position: 0 -10px; */
  /* -moz-background-size: 0.5; */
  } 

  p, #Tale {
    padding-left: 3%;
    width: 90%;
    }
}

@media (max-width: 650px) {
  p, #Tale {
    padding-right: 1%;
    padding-left: 1%;
    width: 94%;
    }
  body{
    background-image: url("background1.jpg");
    /* background-repeat: repeat-y; */
    }
}

button {
  color: rgb(255, 255, 255); font-size: 15px; line-height: 15px; padding: 7px; border-radius: 3px; 
  font-family: Spectral SC, serif; 
  font-weight: normal; 
  text-decoration: none; 
  font-style: normal; 
  font-variant-ligatures: normal; 
  font-variant-caps: normal; 
  text-transform: none; 
  background-image: linear-gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 50%, rgb(20, 78, 117) 100%);
  box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px; 
  border: 2px solid rgb(28, 110, 164); 
  -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}  

#start {
  color: rgb(255, 255, 255); font-size: 15px; line-height: 15px; padding: 7px; border-radius: 3px; 
  font-family: Spectral SC, serif; 
  font-weight: normal; 
  text-decoration: none; 
  font-style: normal; 
  font-variant-ligatures: normal; 
  font-variant-caps: normal; 
  text-transform: none; 
  background-image: linear-gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 50%, rgb(20, 78, 117) 100%); 
  box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px; 
  border: 2px solid rgb(28, 110, 164); 
  -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-animation: fadein 14s;
    animation: fadein 14s;
    
}  

#Start, button:hover {
  background: #1C6EA4; 
  cursor:url(hand.png), auto;
  transform: scale(1.1)
}

#playButton {
  z-index: 1;
  zoom: 0.5;
  -moz-transform: scale(0.5);
  position: absolute;
  right: 70%;
  /* bottom: 50%; */
  border: 0;
  background: transparent;
  box-sizing: border-box;
  width: 0;
  height: 74px;
  border-color: transparent transparent transparent #202020;
  transition: 200ms all ease;
  cursor: url(hand.png), auto;
  border-style: solid;
  border-width: 37px 0px 37px 60px;
}
#playButton.paused {
  border-style: double;
  border-width: 0px 0px 0px 60px;
}
#playButton:hover {
  transform: scale(1.2);
  -moz-transform: scale(0.8);
}

a, a:hover, a:active, a:visited {
  cursor: url(hand.png), auto;
}

@keyframes endtext {
  from { color: #f2e8d9;
    text-shadow: none;
  opacity: 0}
  70% {color: #f2e8d9;
    text-shadow: none;
    opacity: 0 }  
  to   { color: #002b15}
}

@keyframes fadein {
  from { opacity: 0;}
  50% {opacity: 0;}
  to   { opacity: 1;}
}

@keyframes fadein2 {
  from { opacity: 0;}
  to   { opacity: 1;}
}

/* @keyframes blur {
  from { filter: blur(0px); }
  to   { filter: blur(5px); }
}

@keyframes deblur {
  from { filter: blur(5px); 
}
  to   { filter: blur(0px); }
} */