@charset "UTF-8";

<style>
body {
  background:#fefbf6;
  font-family:'Georgia',serif;
  color:#4b3832;
  text-align:center;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

a {
  color:#b28d52;
  text-decoration:none;
}

a:hover {
  color:#a67c52;
}

.section {
  background:#fffaf0;
  border:1px solid #e4d7c6;
  border-radius:12px;
  padding:25px;
  margin:40px auto;
  max-width:850px;
  box-shadow:0 0 20px rgba(178,141,82,0.1);
  position:relative;
  z-index:1;
}

h1,h2 {
  color:#a67c52;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:15px;
}

.tipMenu ul,.rules ul {
  list-style:none;
  padding:0;
  margin:0;
  font-size:17px;
}

.tipMenu li,.rules li {
  padding:10px 0;
  border-bottom:1px dotted #d2b48c;
  color:#5c5049;
}

.banner {
  width:100%;
  max-width:900px;
  margin:20px auto;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 0 25px rgba(178,141,82,0.2);
}

.sparkle {
  pointer-events:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background-image:url(https://i.imgur.com/x0zNh9Q.gif);
  background-size:cover;
  opacity:.12;
  animation:sparkleFade 10s infinite alternate;
}

@keyframes sparkleFade {
  0% {
    opacity:.05;
  }

  100% {
    opacity:.12;
  }
}

.button {
  display:inline-block;
  background:#b28d52;
  color:white;
  padding:12px 20px;
  margin:10px;
  border-radius:30px;
  font-size:16px;
  text-decoration:none;
  transition:background .3s ease;
}

.button:hover {
  background:#a67c52;
}