/* =========================
GLOBAL
========================= */

body {

margin: 0;
font-family: Arial, sans-serif;

background-color: #000;
color: #fff;

}

.wrapper {

max-width: 900px;
margin: auto;
padding: 20px;

}

/* =========================
HEADER
========================= */

.header {

display: flex;
align-items: center;
justify-content: space-between;

background: #000;

padding: 10px 20px;

border-bottom: 2px solid gold;

position: sticky;
top: 0;
z-index: 999;

}

.logo {

height: 55px;

}

.menu-area {

display: flex;
flex-wrap: wrap;

}

.menu-area a {

color: #fff;

text-decoration: none;

margin: 4px;

padding: 8px 14px;

border-radius: 6px;

background: #111;

font-size: 14px;

transition: 0.3s;

}

.menu-area a:hover {

background: linear-gradient(
45deg,
gold,
orange
);

color: #000;

}

/* =========================
HERO
========================= */

.hero {

background: linear-gradient(
45deg,
#000,
#111
);

padding: 60px 20px;

text-align: center;

border-bottom: 2px solid gold;

}

.hero-content h1 {

font-size: 32px;

color: gold;

margin-bottom: 15px;

}

.hero-content p {

max-width: 700px;

margin: auto;

line-height: 1.7;

margin-bottom: 25px;

}

.hero-btn {

background: linear-gradient(
45deg,
gold,
orange
);

color: #000;

padding: 12px 24px;

border-radius: 8px;

text-decoration: none;

font-weight: bold;

transition: 0.3s;

}

.hero-btn:hover {

transform: scale(1.05);

}

/* =========================
TITLE
========================= */

.title {

font-size: 24px;
font-weight: bold;

text-align: center;

margin-top: 20px;
margin-bottom: 20px;

color: gold;

}

/* =========================
ARTICLE
========================= */

.article {

background: #111;

padding: 20px;

border-radius: 10px;

line-height: 1.8;

margin-bottom: 25px;

}

/* =========================
FEATURED
========================= */

.featured-title {

font-size: 18px;

font-weight: bold;

color: gold;

margin-bottom: 10px;

}

.featured-box {

display: flex;
align-items: center;
justify-content: space-between;

background: linear-gradient(
45deg,
#111,
#222
);

padding: 15px;

border-radius: 10px;

border: 2px solid gold;

margin-bottom: 25px;

}

.site-name {

font-weight: bold;

font-size: 18px;

color: gold;

}

.site-link {

font-size: 13px;

color: #ccc;

}

/* =========================
SITE LIST
========================= */

.site-item {

background: #111;

padding: 14px;

margin-bottom: 10px;

border-radius: 8px;

border: 1px solid #222;

display: flex;
justify-content: space-between;
align-items: center;

transition: 0.3s;

}

.site-item:hover {

border-color: gold;

box-shadow: 0 0 10px rgba(255,215,0,0.4);

}

.site-item a {

text-decoration: none;

color: #fff;

font-weight: bold;

}

.site-item a:hover {

color: gold;

}

/* =========================
BUTTON
========================= */

.visit-btn {

background: linear-gradient(
45deg,
gold,
orange
);

color: #000;

padding: 8px 16px;

border-radius: 6px;

text-decoration: none;

font-weight: bold;

transition: 0.3s;

}

.visit-btn:hover {

transform: scale(1.05);

}

/* =========================
PAGINATION
========================= */

.pagination {

margin-top: 20px;

text-align: center;

}

.page-btn {

background: #111;

color: #fff;

border: 1px solid #333;

padding: 8px 12px;

margin: 4px;

border-radius: 6px;

cursor: pointer;

transition: 0.3s;

}

.page-btn:hover {

background: linear-gradient(
45deg,
gold,
orange
);

color: #000;

border-color: gold;

}

.page-btn.active {

background: linear-gradient(
45deg,
gold,
orange
);

color: #000;

border-color: gold;

font-weight: bold;

}

/* =========================
FOOTER
========================= */

.footer {

margin-top: 40px;

background: #111;

border-top: 2px solid gold;

padding: 30px 20px;

text-align: center;

}

.footer-title {

font-size: 18px;

font-weight: bold;

color: gold;

margin-bottom: 10px;

}

.footer-links {

margin-top: 15px;

}

.footer-links a {

color: #ccc;

margin: 0 10px;

text-decoration: none;

font-size: 14px;

}

.footer-links a:hover {

color: gold;

}

.copyright {

margin-top: 15px;

font-size: 13px;

color: #777;

}

/* =========================
MOBILE
========================= */

@media (max-width: 768px) {

.header {

flex-direction: column;

}

.menu-area {

justify-content: center;

}

.featured-box {

flex-direction: column;
text-align: center;

}

}