@font-face {
    font-family: 'BelanidiSerif'; 
    src: url("BelanidiSerif-Regular.otf");
}

body{
  background-image: url('stars.gif');
  font-family: 'BelanidiSerif', serif;
}

main{
  width: 40%;
  margin: auto;
}

header, footer, .box{
  background-color: rgba(0,0,0,0.5);
  color: white;
  text-align: center;
  border: 40px solid;
  border-image: url("vinewrap.png") 
    200 / 40px / 0 round;} 
    
.court{
  border: 2px dashed midnightblue;
  margin: 10px;
  padding-bottom: 10px;
  background: #FFFFFF;
background: linear-gradient(to bottom, #FFFFFF 0%, #74ceda 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

a img{padding: 8px;
  border: 1px solid rgba(0,0,0,0);
  }
  
li a{border: 1px solid rgba(0,0,0,0)}
    
li{
  list-style: "*";
}

h1, h2, h3{
  margin: 10px;
  border-bottom: 2px dashed midnightblue;
}

h1, h2, h3, p, li{
background: #FFFFFF;
background: linear-gradient(to bottom, #FFFFFF 0%, #74ceda 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

    
@keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

@-webkit-keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

fadein-out
{
	text-decoration: none;
	animation: fade-in-out 2s ease-in-out infinite alternate;
	-webkit-animation: fade-in-out 2s ease-in-out infinite alternate;
}


li a:hover, a img:hover
{
	border: 1px dashed #000;
	border-image: url('data:image/gif;base64,R0lGODlhCgAKAPAAAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgD/ACwAAAAACgAKAAACEYwDmagN7FZUcFppq9NNn1AAACH5BAUKAAIALAAAAAAKAAoAAAIPRB6gKu0Po5zu0IvpUigVACH5BAUKAAIALAAAAAAKAAoAAAIPBIJhy+2r3okOSXulrskUACH5BAUKAAIALAAAAAAKAAoAAAIQhINhy+2rHnpgyugw3TCtAgAh+QQFCgACACwAAAAACgAKAAACEIQRGce9fR5EE0lXab1bsQIAIfkEBQoAAgAsAAAAAAoACgAAAhGEHRmy4g+jnFSYijNdzR5QAAAh+QQFCgACACwAAAAACgAKAAACDwx+oYqd3gyctE5562KxAAAh+QQFCgACACwAAAAACgAKAAACD0yAaJYN7KKctNp35MrJFAAh+QQFAQACACwAAAAACgAKAAACEIyBaJEN7BKMtNo6Y27LrQIAOw==') 1 repeat;
	//border-image: url('http://files.eyeburn.info/images/marching-ants/selection_border.gif') 1 repeat;
}

@media screen and (max-width: 1000px) {

main{
  width: 80%;
  margin: auto;
}

}