@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
	--font1: 'Poppins';
	--font2: 'Rubik';
	--font3: 'Ubuntu';
	--font4: 'Lexend Giga';

	--color1: #131c25;
	--color2: #eee;
	--color3: #222;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	outline: none;
}

html{
	font-size: 62.5%;
	scroll-behavior: smooth;
	/* border: 1px solid red; */
}

body {
    font-family: var(--font1), Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    position: relative;
    margin: 0;
    background: #222;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: 
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
        url("imgs/hero.jpg") no-repeat top center;
    background-size: cover;
    filter: blur(8px);
    z-index: -1;
}

img{
	width: 100%;
}

h1{
	font-size: 2rem;
	font-weight: 500;
}


/* INFO */
main{
	width: 90%;
	max-width: 600px;
	box-shadow: 0 0 5px #bbb;
	border-radius: 20px;
	background: var(--color3);
	color: var(--color2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5rem;
	margin: 5rem auto;
}

.hero {
    position: relative;
    display: inline-block;
	margin-bottom: 2rem;
}

.hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* Dark bottom overlay */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%; /* controls how much of the bottom is dark */
    
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0)
    );
    
    pointer-events: none;
}

.info .logo-wrapper img{
	border-radius: 50%;
	margin-bottom: 1rem;
}

.name{
	font-size: 3rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

.desc{
	font-size: 1.5rem;
	opacity: .9;
	margin-bottom: 1rem;
}

.socials{
	display: flex;
	justify-content: center;
	gap: 2rem;
	padding: 2.5rem 0;
	flex-wrap: wrap;
}

.socials i{
	font-size: 2.2rem;
	color: var(--color2);
	border-radius: 50%;
	border: 1.5px solid transparent;
	padding: .8rem;
}
.socials i:hover{
	color: goldenrod;
	border: 1.5px solid goldenrod;
	box-shadow: 0 0 5px goldenrod;
}


/* NAV */
nav{
	display: flex;
	gap: 2.5rem;
	margin-bottom: 5rem;
}

nav a{
	color: var(--color2);
	border-bottom: 1.5px solid transparent;
	opacity: .8;
	padding: .8rem;
}
nav a:hover{
	opacity: 1;
	color: goldenrod;
	border-bottom: 1.5px solid goldenrod;
}


/* LATEST RELEASE */
.section{
	text-align: left;
	display: flex;
	flex-direction: column;
	margin-bottom: 5rem;
}

.section h3{
	font-weight: 600;
	margin-top: 1rem;
}

section .title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

section .title h2, section .title a{
	font-size: 2.2rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	color: var(--color2);
}
section .title a{
	font-size: 1.5rem;
}

.image-box {
    position: relative;
    display: inline-block;
	border: 1px solid #222;
	transition: all .2s ease-in-out;
}
.image-box:hover{
	opacity: .8;
	transform: scale(1.02);
}

.image-box img {
    display: block;
    width: 100%;
    max-width: 550px;
}

.image-text {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    
    color: var(--color1);
    font-size: 1.5rem;
    font-weight: 500;

    background: var(--color2);
    padding: 8px 15px;
    border-radius: 5px;

	transition: all .2s ease-in-out;
}
/* .image-box:hover .image-text{
	background: red;
} */

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 70px;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon i {
    /* background: rgba(0,0,0,0.5); */
    border-radius: 50%;
}

/* MERCH */
/* Container for merch items */
.box {
    display: flex;
    flex-wrap: wrap;         /* allow items to wrap on small screens */
    gap: 1rem;               /* space between items */
    justify-content: center; /* center the two columns */
	padding: 0;
}

/* Individual merch item */
.box .div {
    flex: 0 0 48%;           /* two items per row with gap (~48% each) */
    max-width: 50%;
    text-align: center;
    padding: 0;
    border-radius: 12px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover effect */
.box .div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Images inside each item */
.box .div img {
    width: 100%;
    border-radius: 12px;
}

/* Text styling */
.box .div p:first-of-type {
    font-weight: 600;
    margin-bottom: 5px;
}

.box .div p:last-of-type {
    color: #eee;
    font-weight: 400;
	opacity: .8;
}

/* Responsive: single column on small screens */
/* @media (max-width: 768px) {
    .box .div {
        flex: 0 0 100%;
        max-width: 100%;
    }
} */

footer{
	width: 100%;
	border-top: 1.5px solid #aaa;
}

footer img{
	width: 10rem;
	border-radius: 50%;
	margin: 2rem 0;
}

footer p{
	font-size: 1.2rem;
}