* {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	font-family: sans-serif;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
}

body {
	min-height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 350px 1fr;
	grid-template-rows: 80px 1fr;
	grid-template-areas:
    "nav header"
    "nav main";
	background-color: #121b27;
}
@media (max-width: 768px) { body {
	grid-template-columns: 1fr;
	grid-template-rows: 140px auto 1fr;
	grid-template-areas:
	"header"
	"nav"
	"main";
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #606879;
}}

#header {
	position: relative;
	grid-area: header;
	height: 80px;
	background-color: #121b27;
}
@media (max-width: 768px) { #header {
	height: 140px;
}}

#title {
	position: absolute;
	font-size: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}
@media (max-width: 768px) { #title {
	top: 29%;
}}

#user {
	position: absolute;
	width: auto;
	height: 50px;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	display: flex;
	gap: 10px;
}
@media (max-width: 768px) { #user {
	top: 71%;
	right: 50%;
	transform: translate(50%, -50%);
}}

#avatar {
	height: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	background-color: #121b27;
}

#connexion {
	width: 130px;
	height: 100%;
	right: 0;
	border-radius: 10px;
	font-size: 17px;
	background-color: #606879;
}
#connexion:hover { background-color: #4c5361; cursor: pointer }
#connexion:active { background-color: #3a3f49 }

#nav {
	grid-area: nav;
	width: 350px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #121b27;
}
@media (max-width: 768px) { #nav {
	width: 100%;
	height: auto;
	flex-direction: row;
	justify-content: space-evenly;
}}

#navUpper, #navLower {
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media (max-width: 768px) { #navUpper, #navLower { margin: 20px 0 }}

#avatarBot {
	width: 275px;
	aspect-ratio: 1;
	border-radius: 15%;
	margin-bottom: 20px;
}
@media (max-width: 768px) { #avatarBot { width: 200px }}
@media (max-width: 500px) { #avatarBot { width: 150px }}

#nameBot {
	font-size: 40px;
	margin-bottom: max(20px, calc(50vh - 500px));
}
@media (max-width: 768px) { #nameBot { margin-bottom: 0 }}
@media (max-width: 500px) { #nameBot { font-size: 25px !important }}

.navBtn { text-align: center }
.navBtn:not(:last-child) { margin-bottom: 20px }

#main {
	position: relative;
	grid-area: main;
	background-color: #606879;
	border-radius: 20px 0 0 0;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 50px 50px 0 50px;
}
@media (max-width: 768px) { #main { border-radius: 0; overflow-y: unset }}
@media (max-width: 500px) { #main { padding: 30px 30px 0 30px }}

#inMain {
	position: absolute;
	width: calc(100% - 100px);
	padding-bottom: 50px;
}
@media (max-width: 500px) { #inMain { width: calc(100% - 60px); padding-bottom: 30px }}

/* -------------------- */

@media (max-width: 500px) { * { font-size: 15px }}

p { text-align: center }