User:Qerke/common.css

@import "https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css";

/* Header Styles */ display: none; /* Hide Wikipedia logo */ }
 * 1) p-logo {

float: right; /* Align search bar to the right */ margin-top: 10px; /* Add some top margin for spacing */ }​
 * 1) p-search {

/* Main Content Styles */ margin: 0 auto; /* Center content on the page */ max-width: 800px; /* Set maximum width for content */ background-color: #1a1a1a; /* Dark background color */ color: #fff; /* Light text color */ padding: 20px; /* Add padding to content for spacing */ box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2); /* Add a subtle box shadow */ }
 * 1) content {

/* Links and Typography */ a { color: #007acc; /* Set link color in dark mode */ text-decoration: none; /* Remove underlines from links */ transition: color 0.2s; /* Add a smooth color transition */ }

a:hover { text-decoration: underline; /* Underline links on hover */ color: #ff6600; /* Change link color on hover */ }

/* Table Styles */ table { border-collapse: collapse; /* Collapse table borders */ width: 100%; /* Make tables full width */ margin-bottom: 20px; /* Add bottom margin for spacing */ }

th, td { border: 1px solid #333; /* Darken table cell borders */ padding: 10px; /* Add more padding to cells for spacing */ text-align: center; /* Center align content within cells */ color: #fff; /* Light text color */ background-color: #333; /* Dark cell background color */ }

/* Footer Styles */ background-color: #333; /* Dark footer background color */ padding: 10px; /* Add padding to footer */ text-align: center; /* Center align text within footer */ font-size: 14px; /* Set font size for footer text */ color: #bbb; /* Light text color for the footer */ }
 * 1) footer {

/* Dark Mode Toggle Styles */ .dark-mode-toggle { position: absolute; top: 10px; right: 10px; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer; }

/* Fancy Hover Effects */ .card { transition: transform 0.2s; border: 1px solid #ddd; padding: 10px; margin: 10px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); }

.card:hover { transform: scale(1.05); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); }

/* Custom Buttons */ .button { display: inline-block; padding: 10px 20px; background-color: #ff6600; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; transition: background-color 0.2s; }

.button:hover { background-color: #ff3300; }

@keyframes gradientAnimation { 0% {   background-position: 0% 50%; } 50% {    background-position: 100% 50%; } 100% {    background-position: 0% 50%; } }

/* Cool Text Animation */ @keyframes coolTextAnimation { 0% {   transform: translateY(0); opacity: 0; } 50% {    transform: translateY(-10px); opacity: 0.5; } 100% {    transform: translateY(0); opacity: 1; } }

.cool-text { animation: coolTextAnimation 2s ease infinite; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }

/* Gradient Text */ .gradient-text { background-image: linear-gradient(45deg, #ff6600, #ff3300); background-clip: text; -webkit-background-clip: text; color: transparent; }

/* Icon Hover Animation */ .icon { font-size: 24px; transition: transform 0.2s; }

.icon:hover { transform: scale(1.2); color: #ff6600; }

/* Neon Text Button */ .neon-button { display: inline-block; padding: 10px 20px; background-color: transparent; /* Transparent background */ color: #ff6600; /* Neon text color */ border: 2px solid #ff6600; /* Neon border */ border-radius: 5px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; transition: background-color 0.2s, color 0.2s; /* Smooth color transition */ }

.neon-button:hover { background-color: #ff6600; /* Neon background on hover */ color: #fff; /* White text on hover */ }

/* Cool Stuff Button */ .cool-button { display: inline-block; padding: 10px 20px; background-color: #ff6600; /* Orange background */ color: #fff; /* White text */ border: none; border-radius: 5px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; transition: background-color 0.2s; /* Smooth background color transition */ }

.cool-button:hover { background-color: #ff3300; /* Darker orange background on hover */ }