:root{
	--g:#00A651;
	--r:#E53935;
	--4:#303030;
	--b:#1E88E5;
	--y:#FDD835;
	--bg:#111827;
	--card:#b9bfc7;
	--card1:#C7A8AE}

*{box-sizing:border-box}
	body{
		margin:0;font-family:Segoe UI,Arial,sans-serif;
		background:linear-gradient(180deg,#111827,#1f2937);
		color:#000000}

header{background:#0b1220;
	padding:16px 30px;
	position:sticky;
	top:0}

nav a{color:#fff;
	text-decoration:none;
	margin-right:20px}

.hero{background:var(--card); padding:50px 10px;text-align:center}
.logo{font-size:4rem;font-weight:800}

.logo span:nth-child(1){color:var(--g)} 
.logo span:nth-child(2){color:var(--r)} 
.logo span:nth-child(3){color:var(--4)} 
.logo span:nth-child(4){color:var(--b)} 
.logo span:nth-child(5){color:var(--y)}
.container{max-width:1100px;
	margin:auto;
	padding:30px}
.card{background:var(--card);
	padding:25px;
	border-radius:18px;
	margin:20px 0}
	
.card1{background:var(--card1);
	padding:25px;
	border-radius:18px;
	margin:20px 0}	
.btn{display:inline-block;
	padding:14px 22px;
	border-radius:10px;
	color:white;
	text-decoration:none;
	margin:8px;
	font-weight:bold}
.g{background:var(--g)} 
.b{background:var(--b)}
.grid{display:grid;
	grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
	gap:20px}
footer{text-align:center;
	padding:20px;
	background:#0b1220;
	margin-top:40px}

.main-logo {
	width: 500px;
	height: auto;
	display: block;
	margin: 30px auto;
	}

.download-logo {
	width: 750px;
	height: auto;
	display: block;
	margin: 30px auto;
	}	
	
.download-logo-small {
	width: 175px;
	height: auto;
	display: block;
	margin: 10px auto;
	}	
	
.mid-game-logo {
	width: 750px;
	height: auto;
	display: block;
	margin: 30px auto;
	}	
	
.download-notice {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px 25px;
    border: 4px solid #F01307;
    border-radius: 10px;
    background-color: #B9BFC7;
    text-align: center;
    box-sizing: border-box;
}

.download-notice h2 {
    margin-top: 0;
}

.download-notice p {
    line-height: 1.6;
}