body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #000;
    color: #fff;
    
}
div.wrapper {
	width: 95%;
	margin: 0 auto;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-size: 1em;
	line-height: normal;
	min-width: 320px;
	max-width: 620px;
}
.responsive-nav {
	background-color:darkred;
	text-align: right;
	position: sticky;
	top: 0;
    height: 3rem;
}

.responsive-nav .hamburger {
	font-size: 1.5em;
	color: yellow;
	background-color:
		transparent;
	cursor: pointer;
	border: none;

}

.responsive-nav .nav-items {
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
}

.responsive-nav li {
	padding: 0.5em;
}

.responsive-nav a {
	text-decoration: none;
	color: yellow;
    font-size: 2rem;
}
.hidden_slash {
		/*the slash for the nav bar*/
		display: unset;
		color: white;
        font-size:1.3rem ;
	}
footer{
    padding: .1rem;
    background-color: #2C2C2C;
    font-size: 15px;
    color: #aaa;
    text-align: center;
}

/*the same style from the home page ends here*/
.robin_hero {
    text-align: center;
    padding: 4rem 1rem;
    background-size: cover;
    background-position: center;
}


.nightwing-hero {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(180deg, #111, #000);
}

.robin_hero h1 {
    font-size: 4rem;
    margin-bottom: 0;
    color: #0aafff;
}

.robin_hero h2 {
    font-size: 2rem;
    color: #fff;
}


.robin_info {
    display: flex;
    gap: 1rem;
    padding: 2rem 1rem;
    align-items: center;
}

.robin_image img {
    width: 300px;
    border-radius: 10px;
    border: 2px solid #0aafff;
}

.robin_text h2 {
    color: #0aafff;
    margin-bottom: .5rem;
}


.robin_stats {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(180deg,  #000,#111);
    
}

.robin_stats h2 {
    color: #0aafff;
}

.robins_stats ul {
    list-style: none;
    padding: 0;
}

.robin_stats li {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}


.big-showcase {
    position: relative;
    margin-top: 3rem;
    background: #111;
    
    padding: 3rem 1rem;
    text-align: center;
}

.big-showcase img {
    width: 60%;
    border-radius: 15px;
}

.showcase-text {
    margin-top: 1rem;
}

.showcase-text h2 {
    color: #0aafff;
}
@media (min-width: 48rem) {
    div.wrapper {
		font-size: 1em;
		min-width: 48rem;
		max-width: none;
		width: 95%;
		margin: 0 auto;
        line-height: normal;
	}

    .responsive-nav {
		text-align: left;
		position: sticky;
		top: 0;
	}
    .responsive-nav .hamburger {
		display: none;
	}

	.responsive-nav .nav-items {
		font-size: .7em;
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
	}
}