body {
  background-image: url('patch/images/asset/bg.png');
  background-size: cover;      
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-position: center;
}

h1 {
  text-align: center;
  font-weight: 1000;
  color: lightgreen;  
  
}

h2 {
    text-align: center;
    color: lightgreen;
}

.nav a{
   color: wheat; 
}

.rules {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 40px auto;
  padding: 15px 40px;
  background-color: lightgreen;
  border-top: 4px solid darkgreen;
  border-bottom: 4px solid darkgreen;
}

.rules ol {
  max-width: 400px;
  margin: 0 auto;
  padding-left: 20px;
  text-align: left; 
}

.secret{
  color: lightgreen;
}
.secret::marker{
  color: black;
}

.tatopatch {
  max-width: 1000px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.tatocard{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background-color: lightgreen;
  color: darkgreen;
  border: 2px solid brown;
  border-radius: 5px;
  text-align: center;
  font-weight: bolder;
  font-size: large  ;
  text-decoration: none;
  padding: 20px;
  height: 160px;
}

.tatocard:hover{
  background-color: darkgreen;
  color: lightgreen;
  transform: scale(1.05);
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.cardimg {
  width: 100px;
  height: 100px;
  image-rendering: pixelated;
}