@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "armada", sans-serif;
	font-weight: 700;
	font-style: normal;
}	
html {
	font-family: "armada", sans-serif;
	font-size: 16px;
}

body {
	max-width: 100%;
	max-height: auto;
	background-color: rgba(0,0,0,1.00);
	overflow-x: hidden;
	background-image: url("pfmbackground2.png");
}

hr {
	background-color: rgba(255,255,255,1.00);
	height: 2px;
	width: 100%
}

header {
	text-align: center;
}

img {
	max-width: 25vw;
	border-radius: 50%;
	max-height: auto;
	object-fit: cover;
}

.profileHeader {
	background-color: rgba(0,0,0,1.00);
	text-align: center;
	height: 50%;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 25%;
	padding-bottom: 0.7em;
}

.profile {
	display: flex;
	gap: 1em;
	align-self: center;
}

.profilePhoto {
	background-color: rgba(255,255,255,0.00);
	width: 25vw;
	border-radius: 50%;
	height: 25vw;
	object-fit: cover;
}

.line {
	width: 100%;
	background-color: rgba(255,255,255,0.00);
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(255,255,255,0.00);
    color: white;
}

.hamburger span {
    display: block;
    height: 0.4vh;
    width: 100%;
    background-color: white;
    border-radius: 5px;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Initially hidden */
    position: absolute;
    top: 50px; /* Position it below the hamburger menu */
    right: 20px;
    background-color: #444;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 80vw; /* Optional: Set a fixed width for the menu */
    text-align: left; /* Align links to the left */
}

.nav-links li {
    margin: 0;
    width: 100%; /* Make each item span the full width */
}

.nav-links li a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #555;
}

.nav-links li a:hover {
    background-color: #555;
}

.nav-links li:last-child a {
    border-bottom: none; /* Remove border for the last item */
}

.footer {
	text-align: center;
	background-color: rgba(255,255,255,1.00)
}
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0,0,0,0.00);
	display: flex;
	flex-direction: column;
}
.subtitle {
	color: rgba(255,255,255,1.00);
	font-size: 5vw;
}
.poster {
	width: 35%;
	border: 0.75em solid rgba(255,255,255,1.00);
	align-self: center;
}
.mixlink {
	float: center;
	padding-top: 3vh;
}
.ytlink {
	padding-top: 5vh;
	width: 35%;
}

.menuTitle {
	color: rgba(255,255,255,1.00);
	text-align: right;
	padding-right: 1vw;
	font-size: 1.8em;
}

.instagram-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Center the content */
	gap: 0.2em; /* Space between embeds */
}

/* Individual embed styling */
.instagram-media {
	max-width: 326px; /* Adjust the width of each embed */
	width: 100%; /* Ensure responsiveness */
	background: #fff;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.instagram-embed {
    flex: 1 1 calc(50% - 16px); /* Two per row: Adjusts size to fit two in one row with spacing */
 	max-width: 500px; /* Optional: Set a max width to prevent overly large embeds */
  	min-width: 300px; /* Prevents embeds from getting too small */
  	box-sizing: border-box; /* Includes padding and border in size calculations */
	position: relative;
  	padding-top: 62vh; /* Aspect ratio (100% = 1:1 square, adjust as needed) */
  	height: 0; /* Use padding to enforce aspect ratio */
}

.instagram-embed iframe,
.instagram-embed blockquote {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Matches the aspect ratio */
  border: none;
}


@media (max-width: 500px) {
	header {
		max-width: 100%;
		display: flex;
		flex-direction: column;
    	justify-content: center;
    	height: auto;
    	margin: 0;
		text-align: center;
	}

	h1 {
		font-size: 2.5em;
	}

	.title {
		color: rgba(255,255,255,1.00);
		text-align: center;
	}

	.about {
		width: 100%;
		background-color: rgba(0,0,0,1.00);
		margin-top: 2em;
		color: rgba(255,255,255,1.00);
		text-align: center;

	}
	.hamburger {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 4vh;
		width: 8vw;
		padding-right: 3.5vw;
		padding-top: 0.5em;
	}
}

@media (min-width: 501px) and (max-width: 2000px) {
	header {
		max-width: 100%;
		display: flex;
		flex-direction: column;
    	justify-content: center;
    	height: auto;
    	margin: 0;
		text-align: center;
	}

	h1 {
		font-size: 4.5em;
	}

	.title {
		color: rgba(255,255,255,1.00);
		text-align: center;
	}
	
	.about {
		width: 100%;
		height: auto;
		background-color: rgba(0,0,0,1.00);
		margin-top: 4em;
		color: rgba(255,255,255,1.00);
		text-align: center;
		font-size: 1.15em;
	}
	.hamburger {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 4vh;
		width: 2em;
		padding-right: 1.2em;
		padding-top: 0.5em;
	}
}


@media (min-width: 2001px) {
	header {
		max-width: 100%;
		display: flex;
		flex-direction: column;
    	justify-content: center;
    	height: auto;
    	margin: 0;
		text-align: center;
	}

	h1 {
		font-size: 5em;
	}

	nav {
		width: 100%;
	}
	
	ul {
		display: inline-block; /* Arrange list items in a row */
      	list-style: none; /* Remove default bullet points */
      	padding: 0;
      	margin: 0;
	}

	ul li {
		color: rgba(255,255,255,1.00);
		margin-right: 5em;
		padding-left: 10.5em;
		float: left;
		
	}
	
	ul li a {
		color: #FFFFFF;
		text-decoration: none;
		font-size: 2em;
	}
	ul li:hover a {
		color: #FF0000;
	}

	.title {
		color: rgba(255,255,255,1.00);
		text-align: center;
	}
	
	.about {
		width: 100%;
		height: auto;
		background-color: rgba(0,0,0,1.00);
		margin-top: 7em;
		color: rgba(255,255,255,1.00);
		text-align: center;
		font-size: 1.5em
	}
	.nav-links {
        display: flex; /* Display links horizontally */
        position: static; /* Remove absolute positioning for a regular layout */
        flex-direction: row; /* Ensure links are in a row */
        background-color: transparent; /* Remove background for inline links */
        box-shadow: none; /* Remove shadow */
        width: auto; /* Let the width adjust automatically */
        padding: 0;
    }

    .nav-links li {
        margin: 0 10px; /* Add spacing between items */
    }

    .nav-links li a {
        color: white;
        text-decoration: none;
        border-bottom: none; /* Remove borders for inline links */
		padding-right: 1.2em;
    }

    .hamburger {
        display: none; /* Hide hamburger icon on larger screens */
    }
	
	.menuTitle {
		display: none;
	}
}