Template:Mainpage.css

/* Header */

1. mainpage-header {

   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8f8ff;
   border: 2px solid #cc0000;
   border-radius: 12px;
   padding: 15px;
   font-size: 120%;

}

/* Header logo and text */

1. mainpage-header .header-logo { flex:0 0 auto; margin-right:15px; }
2. mainpage-header .header-text { flex:1; }

/* Category boxes */ .mainpage-categories {

   display:flex;
   gap:10px;
   justify-content:center;
   margin-top:15px;

} .mainpage-categories .category-box {

   flex:1;
   display:flex;
   padding:10px;
   border:1px solid #aaa;
   border-radius:8px;
   align-items:center;
   transition: box-shadow 0.2s;

} .mainpage-categories .category-text { flex:1; } .mainpage-categories .category-icon {

   flex:0 0 50px;
   display:flex;
   align-items:center;
   justify-content:center;

} .mainpage-categories .category-box:hover {

   box-shadow:0 2px 8px rgba(0,0,0,0.2);
   cursor:pointer;

}

/* Discord box */

1. mainpage-discord {

   text-align:center;
   margin-top:20px;

}

1. mainpage-discord .discord-box {

   display:inline-flex;
   align-items:center;
   gap:8px;
   border:1px solid #5865F2;
   border-radius:8px;
   padding:8px 12px;
   background:#f0f2ff;
   transition:box-shadow 0.2s;

}

1. mainpage-discord .discord-box img { vertical-align:middle; }
2. mainpage-discord .discord-box:hover {

   box-shadow:0 2px 8px rgba(0,0,0,0.2);
   cursor:pointer;

}

1. mainpage-discord p { margin:0; }

/* Optional category-specific colors */ .category-pokehero { background:#eaf9e8; } .category-moves { background:#e8f1fa; } .category-items { background:#fff3e6; } .category-locations { background:#f6e8fa; } .category-characters { background:#fceaea; } .category-mechanics { background:#eaf8f9; }