/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. */

@media only screen and (min-width: 600px){
	img:hover {
 	   width: 450px;
		transition-timing-function: ease;
	}
}

h1 {
  text-align: center;
  font-size: 3em;
  font-family: impact, sans-serif;
  color: white;
  text-shadow: 2px 3px 3px black;
  -webkit-text-stroke: 2px black;
}
  
h2 {
  font-family: impact, sans-serif;
    font-size: 2em;
  color: white;
  text-shadow: 1px 2px  black;
  -webkit-text-stroke: 1.5px black;
}

p {font-family: sans-serif;
	color: white;
	text-shadow: 1.5px 1px 1px black;
    text-align: justify;
    font-size: 125%;
}

table {font-family: sans-serif;
    border-collapse: collapse;
    text-align: center;
}

th, td {
    padding: 2px;
}

tr:hover{background-color:#b3e0ff}

img {
    width: 210px;
    border-radius: 8px;
    transition: width 1.5s, height 1.5s, transform 1.5s;
    box-shadow: 4px 6px 4px rgb(30,30,69);
}

img:hover {
	-webkit-filter: blur(0px);filter: blur(0px);
}

a:link    {color:white;
    background-color:transparent; 
    text-decoration:underline;
    font-size: 125%;
}
a:visited {color:white;
    background-color:transparent;
    text-decoration:underline;
}
a:hover   {color:violet;
    background-color:transparent;
    text-decoration:underline;
}
a:active  {color:yellow;
    background-color:transparent;
    text-decoration:underline;
}

div {
	height: 100%;
	background-attachment: fixed;
    background-repeat: no-repeat;
	border-radius: 20px;
	background: #0069eb;
	padding: 10px;
    box-shadow: 5px 10px 10px 1px rgb(0,0,69);
    text-indent: 3em;
}

body {
    height: 100%;
    background: blue; /* For browsers that do not support gradients */
    background: linear-gradient(lightblue, blue, darkblue); /* Standard syntax (must be last) */
    height: 250%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.blur {
	-webkit-filter: blur(7px); /* Safari 6.0 - 9.0 */
	filter: blur(7px);
}

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px);
}