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

html,
body {
	--black: hsl(240, 6%, 13%);
	--gray: hsl(240, 9%, 89%);

	background: linear-gradient(hsl(0, 0%, 0%), hsl(0, 0%, 19%));
	height: 100vh;
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
}

body {
	display: grid;
	place-items: center;
}

main {
	position: relative;
	background: url("images/background.svg") no-repeat center/cover;
	width: 100vw;
	min-height: 812px;
	height: 100vh;
	display: flex;
	justify-content: center;
}

.container {
	max-width: 250px;
	margin: 0 auto;
	color: var(--gray);

	text-align: center;
}

.avatar {
	width: 10rem;
	margin: 11.5rem auto 0;

	position: relative;
}

.avatar span {
	position: absolute;
	top: -15px;
	z-index: 1;
}

.avatar > img {
	width: 10rem;
	height: 11.5rem;
	object-fit: cover;

	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

h1 {
	font-size: 1.5rem;

	margin-top: 1.5rem;
}

a {
	color: var(--grey);
	text-decoration: none;

	margin-top: 0.25rem;

	display: flex;
	gap: 0.75rem;

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

p {
	margin-top: 2rem;
}

ul {
	margin-top: 4rem;

	list-style: none;
	padding: 0;

	display: flex;
	gap: 0.5rem;

	justify-content: center;
}

hr {
	display: none;
}

.faixa {
	display: none;
}

.degrade {
	display: none;
}

@media (min-width: 700px) {
	main {
		max-width: 450px;
		min-height: 683px;
		max-height: 683px;
	}
	.holder {
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 600px;
		width: 120px;
	}

	.faixa {
		display: flex;
		width: 118px;
		margin-left: 2px;
	}

	hr {
		display: flex;
		border: 2px solid #000;
		width: 122px;
	}
	.degrade {
		display: flex;
		position: absolute;
		top: -0.75rem;
		left: 0.75rem;
	}

	.degrade-holder {
		display: flex;
	}
}

@media (min-width: 700px) and (max-width: 1366) {
}