body{
  font-family: sans-serif;
  text-align: center;

}
.container{
  padding: 60px;
  background-repeat: no-repeat;
  background-size:cover; 
  position: fixed;
  width: 100%;
  height: 100vh; 
  background-image: url('./images/photo.jpeg');
  background-position: center 
   
}
.text{
  font-weight :100;
  font-size: 60px;
  color :orange;
  text-align: center;
  text-shadow: 0 -3px 0 #333,
    0 6px 8px rgba(0,0,0,.4),
    0 9px 10px rgba(0,0,0,.15),
    0 30px 10px rgba(0,0,0,.18),
    0 15px 10px rgba(0,0,0,.21);
}
.shadow{
  font-size:16em;
  text-align:center;
  text-shadow: 0 -3px 0 red,
    0 6px 8px rgba(0,0,0,.4),
    0 9px 10px rgba(0,0,0,.15),
    0 30px 10px rgba(0,0,0,.18),
    0 15px 10px rgba(0,0,0,.21);
}


h1 {
color: rgb(248, 153, 10);
font-size: 2em;
font-weight: bold;
font-family: Helvetica;
/* text-shadow: 0 1px 0 pink, 0 2px 0 pink, 0 3px 0 pink, 0 4px 0 pink, 0 5px 0 white, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px; */
color: black;
font-size: 6em;
}
.container h1{
	text-transform: uppercase;
	margin-top: -100px;
	font-size: 70px;
	padding: 120px 50px;
	-background: white;
	width:180px;
	/* font-family: 'Abril Fatface', cursive; */
  font-weight: lighter;
  color:black;
}

.container p{
	-float: left;
	padding-left: 500px;
	margin-top: -400px;
	font-size: 28px;
	font-family: 'Open Sans', sans-serif;
	font-weight: thin;
	/* background: rgba(0,0,0,.5); */
	-animation: type 7s steps(108);
	overflow: hidden;
	white-space: nowrap;
	/* width: 600px; */
  /* margin-left: 170px; */
  color: black;

}

span{
	text-shadow: white;
	color:rgb(248, 153, 10);
	font-family:'Open Sans', sans-serif;
	font-weight: lighter;

}
@media screen and (min-width: 200px) and (max-width: 600px) {
  span{
      background-color:red;
      color:blue;
      
  }
}