Template:Main Page/1996/styles.css

.PKMN30Container {
	font-family: serif;
	max-width: 1080px;
}

.PKMN30MobileTop {
	text-align: center;
	background: #202c37;
	padding: 10px;
	color: #FFF;
	font-size: 90%;
}

.PKMN30MobileImage img {
	max-width: 500px!important;
	width: 100%;
	height: auto;
}

.PKMN30MobileNav {
	text-align: center;
	font-size: 16px;
}

.PKMN30TitleArea {
	background: #202c37;
	padding: 10px;
	text-align: center;
	color: #FFF;
}

.PKMN30NavBar {
	box-sizing: border-box;
	padding-top: 5px;
	padding-bottom: 10px;
	background: #202c37;
}

.PKMN30NavHeading {
	padding-top: 5px;
	text-align: center; 
	color: #FFF;
}

.PKMN30NavItem {
	margin: 2px 5px;
	background: #A1CF31;
	display: flex;
	align-items: center;
	border-radius: 0 20px 20px 0;
}

.PKMN30NavItem :hover {
	background: #FFF;
	font-weight: bold;
}

.PKMN30TopNav {
	text-align: center;
	font-size: 12px;
}

.PKMN30Showcase {
	margin: 10px auto;
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: 5px;
}

.PKMN30Bulbasaur {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.PKMN30Starburst {
	width: 172px;
	height: 172px;
	background: red;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 110%;
	line-height: 120%;
	clip-path: polygon(99.54% 56.79%,85.03% 64.73%,89.51% 80.65%,72.97% 80.27%,68.89% 96.29%,54.76% 87.7%,43.21% 99.54%,35.27% 85.03%,19.35% 89.51%,19.73% 72.97%,3.71% 68.89%,12.3% 54.76%,0.46% 43.21%,14.97% 35.27%,10.49% 19.35%,27.03% 19.73%,31.11% 3.71%,45.24% 12.3%,56.79% 0.46%,64.73% 14.97%,80.65% 10.49%,80.27% 27.03%,96.29% 31.11%,87.7% 45.24%);
}

.PKMN30MainGrid {
	margin: 10px 0;
}

.PKMN30MftE {
	font-size: 90%;
	line-height: 100%;
}

.PKMN30HelpOut {
	background-color: #3E7614;
	color: #FFF;
	text-align: center;
	padding: 5px 8px 8px 8px;
}

.PKMN30HelpOutGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.PKMN30HelpOutGridBox {
	text-align: center;
	font-size: 110%;
}

.PKMN30Visitor {
	text-align: center;
}

.PKMN30VisitorNo {
	background: #000; 
	color: #FFF; 
	font-family: monospace;
}

.PKMN30TickerContainer {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 3px;
}

.PKMN30TickerBulb {
	display: flex;
	align-items: center;
}

.PKMN30Ticker {
	overflow-x: hidden;
    display: flex;
}

.PKMN30TickerText {
	width: 100%;
	display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 1rem;
}

.NewsDateBox {
	border-radius: 0!important;
	background: transparent!important; 
	padding: 0!important; 
	text-align: left!important; 
	font-weight: normal!important;
	line-height: 110%!important;
	white-space: nowrap;
	color: #202c37;
}

.NewsGridBox {
	gap: 0px!important;
	margin-bottom: 0px!important;
}

.NewsBigDate {
	font-size: 90%!important;
}

.NewsHeadline {
	font-size: 90%!important;
}

.PKMN30Affiliates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.PKMN30NIWA {
	margin: 8px auto; 
	background: #FFF; 
	padding: 3px; 
	font-size: 10px; 
	line-height: 11px; 
	font-family: serif; 
	text-align: center;
}

.PKMN30BulbaNetwork {
	margin: 8px 2px;
	text-align: center;
}

.PKMN30BulbaTitle {
	font-size: 20px;
}

/* MOBILE */
@media (max-width:600px) {
	.PKMN30MobileHide {
		display: none;
	}
	
	.PKMN30TickerText {
		animation: ticker 55s linear infinite;
	}
}

@keyframes ticker {
	0% {
       	transform: translateX(100%);
    }
    100% {
       	transform: translateX(-2000%);
    }
}

/* SMALL DESKTOP & TABLET */
@media (min-width:601px) {
	@media (max-width: 949px) {
		.PKMN30MobileHide {
			display: none;
		}
	
		.PKMN30TickerText {
			animation: marquee 45s linear infinite;
		}
	}
}

/* DESKTOP */
@media (min-width:950px) {
	.PKMN30DesktopHide {
		display: none;
	}
	
	.PKMN30Container {
		display: grid;
		grid-template-columns: 200px 1fr;
	}
	
	.PKMN30MainGrid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 10px;
	}
	
	.PKMN30TickerText {
		animation: marquee 55s linear infinite;
	}
	
}

@keyframes marquee {
	0% {
       	transform: translateX(100%);
    }
    100% {
       	transform: translateX(-700%);
    }
}