#profile{
	h1.user-name{
		display: flex;
		align-items: center;
		justify-content: space-between;

		.identite{
			display: flex;
			align-items: center;
			flex: 8;

			img{
				width: 80px;
				height: 80px;
				margin-right: 20px;
			}
		}

		.field{
			flex: 1;
		}
	}

	.avatars{
		display: flex;
		justify-content: space-between;

		.avatar-choice{
			width: 80px;
			height: 80px;
			border: 2px solid transparent;
			padding: 1px;
			border-radius: 80px;
			display: inline-box;
			cursor: pointer;

			&.active{
				border: 2px solid #555;
			}
		}
	}
}

@media screen and (max-width: 768px){
	#profile{
		h1.user-name{
			flex-direction: column;

			.identite{
				margin-bottom: 20px;
				width: 100%;
				justify-content: center;
			}

			.field{
				flex: 2;
				width: 100%;
			}
		}
	}
}

@media screen and (min-width: 481px) and (max-width: 600px){
	#profile{
		.avatars{
			.avatar-choice{
				width: 60px;
				height: 60px;
				border-radius: 60px;
			}
		}
	}
}

@media screen and (min-width: 405px) and (max-width: 480px){
	#profile{
		.avatars{
			.avatar-choice{
				width: 40px;
				height: 40px;
				border-radius: 40px;
			}
		}
	}
}


@media screen and (max-width: 405px){
	#profile{
		h1.user-name{
			.identite{
				font-size: 1.5rem;

				img{
					width: 60px;
					height: 60px;
					margin-right: 20px;
				}
			}
		}

		.avatars{
			.avatar-choice{
				width: 30px;
				height: 30px;
				border-radius: 30px;
			}
		}
	}
}