body
{
text-align:center;
background-image:url('img/rainbow.png');
font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
position:fixed;
background-size:100%;
}

h
{
font-size:25px;
font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
text-align:center;
}

.path1
{
width:45px;
height:45px;
background-color:#FF0000;
position:relative;
float:left;
margin:5px;
}

.path2
{
width:45px;
height:45px;
background-color:#FF6A00;
position:relative;
float:left;
margin:5px;
}

.path3
{
width:45px;
height:45px;
background-color:#FFE200;
position:relative;
float:left;
margin:5px;
}


.path4
{
width:45px;
height:45px;
background-color:#2DB000;
position:relative;
float:left;
margin:5px;
}

.path5
{
width:45px;
height:45px;
background-color:#0000FF;
position:relative;
float:left;
margin:5px;
}

.path6
{
width:45px;
height:45px;
background-color:#57007F;
position:relative;
float:left;
margin:5px;
}

.path7
{
width:45px;
height:45px;
background-color:#A70792;
position:relative;
float:left;
margin:5px;
}

a:link,a:visited
{
display:block;
width:100%;
position:fixed;
top:0px;
left:0px;
font-weight:bold;
font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
color:#FFFFFF;
background: -webkit-linear-gradient(#A34775, #7A297A); 
background: -o-linear-gradient(#A34775, #7A297A); 
background: -moz-linear-gradient(#A34775, #7A297A); 
background: linear-gradient(#A34775, #7A297A); 
text-align:center;
padding:10px;
text-decoration:none;
text-transform:uppercase;
}

.fence
{
width:55px;
height:20px;
position:relative;
float:left;
margin:0px;
}

.fen
{
width:55px;
height:20px;
position:relative;
float:left;
margin:0px;
}

@media screen and (max-width: 320px)
{
.path
{
height:40px;
width:40px;
margin:3px;
}
.boulder
{
height:40px;
width:40px;
margin:3px;
}
.fence
{
height:19px;
width:45px;
}
}
