@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&family=Roboto:wght@300&display=swap');

/* Background pattern from Toptal Subtle Patterns */

html, body {margin:0px; padding:0px;}
body {background-color:#50055b; background-image:url('../images/wild_oliva.png'); color:#fff;}

div#header {display:block; padding:20px; text-align:center; background-image: linear-gradient(#f56342, #fcd63d);}
div#header h1 {font-family: 'Shadows Into Light', cursive; display:inline; font-size:120px;  text-shadow:2px 2px #000;}

h2 {font-family: 'Shadows Into Light', cursive; font-size:60px; padding:10px; margin:0px;}

.fancy {
  line-height: 0.5;
  text-align: center;
margin-bottom:30px;
}
.fancy span {
  display: inline-block;
  position: relative;  
font-size:30px; text-shadow:1px 1px #000;
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 500px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

#nav {}
#nav a {display:inline-block; padding:5px 10px; border:1px solid red; border-radius:5px; text-decoration:none; font-size:xx-large;
background-color:#f56342; color:white; font-weight:bold; text-shadow:1px 1px #000;}
#nav a:hover {background-color:#fcd63d;}

div#body {max-width:1200px; margin:0px auto;}
p {font-size:24px; color:#fff; font-family: 'Roboto', sans-serif;}
.button {display:inline-block; padding:5px 10px; border:1px solid red; border-radius:5px; text-decoration:none; font-size:xx-large;
background-color:#f56342; color:white; font-weight:bold; text-shadow:1px 1px #000;}
.button:hover {background-color:#fcd63d;}
div#footer {border-top:1px solid #fff; padding:20px;}