:root {
	--lightbrown:	#916e42;
	--brown:		#6e4e41;
	--darkbrown:	#48323b;
	--lightcyan:	#00c692;
	--cyan:			#0d9c95;
	--darkcyan:		#13667e;
	--darkercyan:	#153765;
	--darkestcyan:	#1b1437;
	--pink:			#e3329a;
	--darkpink:		#890094;
	--white:		#ffffff;
	--black:		#000000;
	--darkblue:		#090512;
}

* {
	box-sizing: border-box;
	margin: 0;
}

body {
	font-family: Arial, sans-serif;
	background-color: var(--darkblue);
	color: var(--white);
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;

	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--darkblue);

	padding: 0 20px;
	z-index: 1000;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 30px;
}

.header-logo {
	height: 40px;
}

nav a {
	padding: 8px 16px;
	border: 2px solid var(--white);
	border-radius: 10px;

	color: var(--white);
	text-decoration: none;
	font-weight: bold;

	transition: 0.3s;
}

nav a:hover {
	background-color: var(--white);
	color: var(--darkblue);
}

.header-right img {
	height: 25px;
	margin-left: 15px;
}

main {
    margin-top: 70px;
    text-align: center;

    background-image: 
        linear-gradient(to top, var(--darkblue) 0%, var(--darkblue) 50%, transparent 100%),
        url("../imgs/main_background.png");

    background-repeat: no-repeat, repeat-x;
    background-position: top, top;

    background-size: auto 600px, auto;
}

section {
    scroll-margin-top: 80px;
	margin-top: 70px;
	margin-bottom: 70px;
}

h2 {
	font-size: 30px;
}

h3 {
	font-size: 25px;
}

p {
    font-size: 20px;
    line-height: 1.6;
}

.colored-text {
	color: var(--pink);
	font-weight: bold;
}

#main-logo {
	margin-top: 70px;
	width: 640px;
}

.pixel-perfect-image{
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

#about {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.text {
	max-width: 700px;
	margin: auto;
}

.members-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.member { 
	position: relative; 
	padding: 2rem; 
	margin: 2rem 0; 
	border-radius: 16px; 

	background-color: rgba(25, 25, 30, 1); 
	overflow: hidden; 
	box-shadow: 0 8px 25px var(--black); 

	flex: 1 1 300px; 
	max-width: 450px; 
}

.member::before { 
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 120px; 

	background-size: cover; 
	background-position: center;
	 z-index: 0; 
	 opacity: 0.8; 
}

#murilo::before {
	background-image: url("../imgs/murilo_header.jpg");
}

#daniel::before {
	background-image: url("../imgs/daniel_header.jpg");
}

.member > * { 
	position: relative; 
	z-index: 1; 
}

.member-header {
	position: relative;
	display: flex;
	align-items: center;
}

.profile-pic { 
	width: 120px; 
	height: 120px;
	margin: 40px auto 0 auto; 

	border-radius: 50%; 
	object-fit: cover; 

	box-shadow: 0 4px 10px var(--black); 
}

.member-linkedin {
	position: absolute;
	right: 0;
	top: 110px;
}

.member-linkedin img { 
	width: 30px; height: auto; 
}

.member-name {
	margin: 0.25rem 0;
  	font-weight: bold;
}

.member-role {
	color: rgba(80, 80, 90, 1); 
  	font-style: italic;
}

.member-description {
	margin: 0.5rem 0;
	text-align: justify;
}

.partners-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
	justify-content: center;
}

.partner {
    width: 140px;
}

.partner-pic { 
	width: 75px; 
	height: 75px;
	margin: 20px auto 0 auto; 

	border-radius: 50%; 
	object-fit: cover; 

	box-shadow: 0 4px 10px var(--black); 
}

.partner-name {
	margin: 0.10rem 0;
  	font-weight: bold;
}

.partner-role {
	color: rgba(80, 80, 90, 1);
	font-size: 16px;
  	font-style: italic;
}

.partner-description {
	font-size: 16px;
}

#daniel {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#daniel .partner-pic {
    width: 100px;
    height: 100px;
    margin: 0;
}

#daniel .partner-info {
    text-align: left;
}

.game {
	margin-top: 40px;
}

.game-capsule img {
	border-radius: 8px;
}

footer {
	text-align: center;
	margin: 50px 0 30px;
}

footer p {
	color: rgba(60, 60, 100, 1); 
	font-size: 15px;
}