@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
	outline: none;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
	padding-left: 0;
}

html,
body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

/* div {border: 3px solid red} */

/* Root */

:root {
	--main-color: #00ffaa;
	--second-color: #fff;

	--main-background-color: #1e1e1f;
	--second-background-color: #121212;
	--third-background-color: #2b2b2c;
	--hover-background-color: #585858;

	--main-border-size: 20px;
	--second-border-size: 30px;
	--third-border-size: 10px;
}

/* Main */

#main {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
}

/* Loading */

#loading {
	position: absolute;
	opacity: 1;
	z-index: 9999;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--second-background-color);
	transition: all 0.5s;
}

#loading.hidden {
	opacity: 0;
	z-index: -1;
}

.loader {
	height: 48px;
	width: 48px;
	border: 5px solid var(--main-background-color);
	border-bottom-color: var(--main-color);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Profile */

#profile {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: var(--second-background-color);
}

#profile .sidebar {
	position: relative;
	height: 100%;
	width: 30%;
	display: flex;
	justify-content: end;
	align-items: center;
}

#profile .sidebar .content-sidebar {
	position: relative;
	margin-right: 20px;
	height: 90%;
	width: 60%;
	border-radius: var(--second-border-size);
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	background-color: var(--main-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	transition: all 1s;
}

#profile .sidebar .content-sidebar.hidden {
	z-index: -1;
	opacity: 0;
	transform: translateX(-50px);
}

#profile .sidebar .content-sidebar .item-sidebar {
	position: relative;
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#profile .sidebar .content-sidebar .avatar {
	position: relative;
	margin-top: 20px;
	width: 80%;
	aspect-ratio: 1 / 1;
	border-radius: var(--main-border-size);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* box-shadow: 0 0 0 0.5px #565656, rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
}

#profile .sidebar .content-sidebar .avatar img {
	height: 80%;
	width: 80%;
	border-radius: var(--main-border-size);
}

#profile .sidebar .content-sidebar .name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#profile .sidebar .content-sidebar .name .realname {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 35px;
}

#profile .sidebar .content-sidebar .name .nickname {
	margin-top: 5px;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
}

#profile .sidebar .content-sidebar ul.bio {
	position: relative;
	margin-top: 5px;
	height: auto;
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}

#profile .sidebar .content-sidebar ul.bio li {
	margin-top: 10px;
	/* width: 90%; */
	padding: 5px 12px;
	color: var(--main-background-color);
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	border-radius: var(--third-border-size);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--main-color);
}

#profile .sidebar .content-sidebar ul.bio li a {
	color: var(--main-background-color);
}

#profile .sidebar .content-sidebar ul.page {
	position: relative;
	margin-top: 0px;
	height: auto;
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#profile .sidebar .content-sidebar ul.page li {
	position: relative;
	margin-top: 10px;
	width: 90%;
	padding: 8px 0px;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	border-radius: var(--third-border-size);
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	background-color: var(--third-background-color);
	transition: all 0.5s;
	cursor: pointer;
}

#profile .sidebar .content-sidebar ul.page li:hover {
	background-color: var(--hover-background-color);
}

#profile .sidebar .content-sidebar ul.page li.selected {
	color: var(--third-background-color);
	background-color: var(--second-color);
}

#profile .sidebar .content-sidebar ul.page li ion-icon {
	font-size: 18px;
}

#profile .sidebar .content-sidebar ul.page li ion-icon.icon {
	margin-left: 18px;
}

#profile .sidebar .content-sidebar ul.page li span {
	margin-left: 6px;
	font-family: "Open Sans", sans-serif;
}

#profile .sidebar .content-sidebar ul.page li ion-icon.icon-arrow {
	position: absolute;
	right: 10px;
}

#profile .display {
	position: relative;
	height: 100%;
	width: 70%;
	display: flex;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display {
	position: relative;
	margin-left: 20px;
	height: 90%;
	width: 83%;
	border-radius: var(--second-border-size);
	background-color: var(--main-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	transition: all 1s;
}

#profile .display .content-display.hidden {
	z-index: -1;
	opacity: 0;
	transform: translateX(50px);
}

#profile .display .content-display .item-display {
	position: absolute;
	padding: 20px 30px;
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	transition: all 0.5s;
}

#profile .display .content-display .item-display.hidden {
	z-index: -1;
	opacity: 0;
	transform: translateY(30px);
}

#profile .display .content-display .item-display .title {
	color: var(--main-color);
	font-family: "Open Sans", sans-serif;
	font-size: 35px;
}

#profile .display .content-display .item-display .line {
	margin: 10px 0px;
	height: 5px;
	width: 50px;
	border-radius: 20px;
	background-color: var(--main-color);
}

#profile .display .content-display .item-display.about .cover {
	margin-top: 20px;
	height: 300px;
	width: calc(100% - 30px * 2 - 5px);
	border-radius: var(--main-border-size);
	overflow: hidden;
}

#profile .display .content-display .item-display.about .cover img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top;
}

#profile .display .content-display .item-display.about .bio {
	margin-top: 20px;
	height: auto;
	width: calc(90% - 30px * 2);
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	/* text-align: center; */
}

#profile .display .content-display .item-display.about .social {
	margin-top: 15px;
	height: auto;
	width: calc(100% - 30px * 2);
	gap: 40px;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display .item-display.about .social a {
	padding: 10px 20px;
	min-width: 80px;
	text-align: center;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .social a:hover {
	background-color: var(--hover-background-color);
}

#profile .display .content-display .item-display.about .social a ion-icon {
	margin: 0 6px -4px 0;
	font-size: 20px;
}

#profile .display .content-display .item-display.about .music {
	margin-top: 15px;
	height: auto;
	width: calc(100% - 30px * 2);
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display .item-display.about .music .thumbnail {
	height: 100px;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display .item-display.about .music .thumbnail img {
	height: 90%;
	width: 90%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music {
	margin-left: 10px;
	flex: 1;
}

#profile .display .content-display .item-display.about .music .info-music .timeline {
	display: flex;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-current {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar {
	flex: 1;
	margin: 0 10px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	transition: all 0.3s ease;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-moz-range-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-ms-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-scrollbar::-ms-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .timeline .timeline-end {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
}

#profile .display .content-display .item-display.about .music .info-music .control {
	margin-top: 15px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-action {
	height: 100%;
	width: 50%;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-action .icon-action-music {
	color: var(--second-color);
	font-size: 22px;
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-action .name-music {
	margin-left: 10px;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume {
	height: 100%;
	width: 50%;
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .icon-volume-music {
	margin-right: 10px;
	color: var(--second-color);
	font-size: 22px;
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	transition: all 0.3s ease;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-moz-range-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-ms-track {
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar::-ms-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 18px;
	width: 18px;
	border-radius: var(--third-border-size);
	background-color: var(--main-color);
	clip-path: circle(35% at 50% 50%);
	cursor: pointer;
}

#profile .display .content-display .item-display.project {
	overflow: hidden;
}

#profile .display .content-display .item-display.project .source {
	position: absolute;
	top: 20px;
	right: 90px;
	padding: 10px 30px;
	border-radius: var(--third-border-size);
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.project .source:hover {
	background-color: var(--hover-background-color);
}

#profile .display .content-display .item-display.project .type {
	height: auto;
	width: calc(100% - 30px * 2);
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.project .type li {
	padding: 10px 0;
	width: calc(100% / 3);
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
	cursor: pointer;
}

#profile .display .content-display .item-display.project .type li:nth-child(1) {
	border-top-left-radius: var(--third-border-size);
	border-bottom-left-radius: var(--third-border-size);
}

#profile .display .content-display .item-display.project .type li:nth-child(3) {
	border-top-right-radius: var(--third-border-size);
	border-bottom-right-radius: var(--third-border-size);
}

#profile .display .content-display .item-display.project .type li:hover {
	background-color: var(--hover-background-color);
}

#profile .display .content-display .item-display.project .type li.selected {
	color: var(--third-background-color);
	background-color: var(--second-color);
}

#profile .display .content-display .item-display.project .list {
	height: 480px;
	width: calc(100% - 30px * 2);
	overflow-y: auto;
	scrollbar-width: none;
}

#profile .display .content-display .item-display.project .list ul {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, calc((100% - 20px * 2) / 3 - 1px));
	grid-auto-rows: 180px;
	gap: 20px;
}

#profile .display .content-display .item-display.project .list ul li {
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	cursor: pointer;
}

#profile .display .content-display .item-display.project .list ul li .img-list {
	height: 75%;
	width: 100%;
	border-top-left-radius: var(--third-border-size);
	border-top-right-radius: var(--third-border-size);
	overflow: hidden;
}

#profile .display .content-display .item-display.project .list ul li img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

#profile .display .content-display .item-display.project .list ul li .info-list {
	height: 25%;
	width: 100%;
	display: flex;
	align-items: center;
	border-bottom-left-radius: var(--third-border-size);
	border-bottom-right-radius: var(--third-border-size);
	overflow: hidden;
}

#profile .display .content-display .item-display.project .list ul li .info-list span {
	margin-left: 20px;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
}

#profile .display .content-display .item-display.album .gallery {
	height: 530px;
	width: calc(100% - 30px * 2);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	scrollbar-width: none;
}

#profile .display .content-display .item-display.album .gallery .item-gallery {
	margin-bottom: 40px;
	height: auto;
	width: calc(100% - 10px * 2);
	padding: 0px 10px;
}

#profile .display .content-display .item-display.album .gallery .item-gallery .time {
	width: 100%;
	display: flex;
	align-items: center;
}

#profile .display .content-display .item-display.album .gallery .item-gallery .time span {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
}

#profile .display .content-display .item-display.album .gallery .item-gallery .time .line-gallery {
	margin: 0px 5px 0px 10px;
	height: 10px;
	flex: 1;
	border-radius: var(--third-border-size);
	background-color: var(--second-color);
}

#profile .display .content-display .item-display.album .gallery .item-gallery .photo {
	margin-top: 20px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, calc((100% - 20px * 2) / 3 - 1px));
	/* grid-auto-rows: 180px; */
	gap: 20px;
}

#profile .display .content-display .item-display.album .gallery .item-gallery .photo li {
	aspect-ratio: 1 / 1;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	cursor: pointer;
	overflow: hidden;
}

#profile .display .content-display .item-display.album .gallery .item-gallery .photo li img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top;
}

#profile .display .content-display .item-display.contact .tree {
	position: relative;
	margin-top: 20px;
	padding-left: 30px;
	border-left: 3px solid var(--second-color);
}

#profile .display .content-display .item-display.contact .tree .item-tree {
	margin: 40px 0;
	position: relative;
}

#profile .display .content-display .item-display.contact .tree .item-tree::before {
	content: "";
	position: absolute;
	left: -40px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--second-color);
	border-radius: 50%;
	background-color: var(--second-color);
}

#profile .display .content-display .item-display.contact .tree .item-tree ion-icon {
	color: var(--second-color);
	margin: 0 6px -4px 0;
	font-size: 20px;
}

#profile .display .content-display .item-display.contact .tree .item-tree span {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
}

#profile .display .content-display .item-display.contact .tree .item-tree.resume span a {
	color: var(--second-color);
	text-decoration: underline;
}

#profile .display .content-display .item-display.contact .tree .item-tree.resume span a:hover {
	color: var(--main-color);
}

#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used {
	display: flex;
	flex-direction: row;
}

#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used {
	margin-left: 20px;
	display: flex;
	flex-direction: column;
}

#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used .item-technologys-used {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used .item-technologys-used:nth-child(1) .icon-technologys-used {
	font-size: 30px;
	margin-right: 10px;
}

#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used .item-technologys-used:nth-child(2) .icon-technologys-used,
#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used .item-technologys-used:nth-child(3) .icon-technologys-used {
	margin-right: 10px;
}

#profile .display .content-display .item-display.contact .note {
	margin-top: 20px;
	width: calc(90% - 10px * 2);
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
}

#profile .display .content-display .item-display.contact .send {
	margin-top: 20px;
	height: auto;
	width: calc(100% - 10px * 2);
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

#profile .display .content-display .item-display.contact .send .item-send {
	padding: 10px 20px;
	border-radius: var(--third-border-size);
	background-color: var(--third-background-color);
	box-shadow: 0 0 0 0.5px #565656, rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

#profile .display .content-display .item-display.contact .send .item-send:nth-child(1) {
	margin-right: 20px;
}

#profile .display .content-display .item-display.contact .send .item-send:nth-child(3) {
	margin-left: 20px;
}

#profile .display .content-display .item-display.contact .send .item-send .icon-send {
	margin: 0 6px -4px 0;
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
}

#profile .display .content-display .item-display.contact .send .item-send a {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
	text-decoration: underline;
}

#profile .display .content-display .item-display.contact .send .item-send a:hover {
	color: var(--main-color);
}

#profile .display .content-display .item-display.contact .send .or {
	color: var(--second-color);
	font-family: "Open Sans", sans-serif;
}

@media screen and (max-width: 500px) {
	html,
	body {
		background-color: var(--second-background-color);
		overflow-y: auto;
	}

	#profile {
		flex-direction: column;
		justify-content: start;
	}

	#profile .sidebar {
		margin-top: 40px;
		height: auto;
		width: 85%;
		justify-content: center;
	}

	#profile .sidebar .content-sidebar {
		margin: 20px 0 0 0;
		height: 100%;
		width: 100%;
		flex-direction: column;
	}

	#profile .sidebar .content-sidebar.hidden {
		transform: translateX(0px);
		transform: translateY(-50px);
	}

	#profile .sidebar .content-sidebar .item-sidebar {
		margin-left: -3px;
		flex-direction: row;
	}

	#profile .sidebar .content-sidebar .item-sidebar ul {
		flex-direction: row;
	}

	#profile .sidebar .content-sidebar .avatar {
		margin-top: 20px;
		width: 30%;
	}

	#profile .sidebar .content-sidebar .name {
		margin: 10px 0 0 10px;
		flex-direction: column;
	}

	#profile .sidebar .content-sidebar ul.bio {
		width: 80%;
	}

	#profile .sidebar .content-sidebar ul.bio li {
		margin: 0 0 0 5px;
	}

	#profile .sidebar .content-sidebar ul.page {
		margin-left: 20px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	#profile .sidebar .content-sidebar ul.page li.item-page:nth-child(1) {
		grid-area: 1 / 1 / 2 / 2;
	}

	#profile .sidebar .content-sidebar ul.page li.item-page:nth-child(2) {
		grid-area: 1 / 2 / 2 / 3;
	}

	#profile .sidebar .content-sidebar ul.page li.item-page:nth-child(3) {
		grid-area: 2 / 1 / 3 / 2;
	}

	#profile .sidebar .content-sidebar ul.page li.item-page:nth-child(4) {
		grid-area: 2 / 2 / 3 / 3;
	}

	#profile .display {
		margin-top: -15px;
		height: calc(100% - 33%);
		width: 85%;
		justify-content: center;
		align-items: start;
	}

	#profile .display .content-display {
		margin: 40px 0 0 0;
		height: 100%;
		width: 100%;
		flex-direction: column;
	}

	#profile .display .content-display.hidden {
		transform: translateX(0px);
		transform: translateY(50px);
	}

	#profile .display .content-display .item-display .title {
		font-size: 28px;
	}

	#profile .display .content-display .item-display.about .cover {
		height: 100%;
	}

	#profile .display .content-display .item-display.about .bio {
		width: calc(100% - 30px * 2);
		font-size: 15px;
	}

	#profile .display .content-display .item-display.about .social {
		gap: 10px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	#profile .display .content-display .item-display.about .social a {
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#profile .display .content-display .item-display.about .social a ion-icon {
		margin-bottom: 0;
	}

	#profile .display .content-display .item-display.about .music .thumbnail {
		display: none;
	}

	#profile .display .content-display .item-display.about .music .info-music {
		margin-left: 0;
	}

	#profile .display .content-display .item-display.about .music .info-music .control {
		flex-direction: column;
	}

	#profile .display .content-display .item-display.about .music .info-music .control .control-action {
		width: 100%;
		justify-content: center;
	}

	#profile .display .content-display .item-display.about .music .info-music .control .control-action .name-music {
		font-size: 14px;
	}

	#profile .display .content-display .item-display.about .music .info-music .control .control-volume {
		margin-top: 15px;
		padding-left: 10px;
		width: 100%;
		justify-content: center;
	}

	#profile .display .content-display .item-display.about .music .info-music .control .control-volume .volume-scrollbar {
		flex: 1;
	}

	#profile .display .content-display .item-display.project .source {
		padding: 10px 15px;
		font-size: 13px;
	}

	#profile .display .content-display .item-display.project .type {
		height: 35px;
	}

	#profile .display .content-display .item-display.project .type li {
		padding: 0 0;
		height: 100%;
		font-size: 13px;
	}

	#profile .display .content-display .item-display.project .list ul {
		grid-template-columns: repeat(1, calc(100% - 2px));
	}

	#profile .display .content-display .item-display.project .list ul li {
		margin-left: 1px;
	}

	#profile .display .content-display .item-display.album .gallery .item-gallery .time span {
		font-size: 15px;
	}

	#profile .display .content-display .item-display.album .gallery .item-gallery .photo {
		margin-left: 2px;
		grid-template-columns: repeat(2, calc((100% - 20px * 2) / 2 - 1px));
	}

	#profile .display .content-display .item-display.contact .tree .item-tree {
		width: 85%;
	}

	#profile .display .content-display .item-display.contact .tree .item-tree span {
		font-size: 14px;
	}

	#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used {
		margin-left: 0;
	}

	#profile .display .content-display .item-display.contact .tree .item-tree.technologys-used .list-technologys-used .item-technologys-used {
		margin-bottom: 10px;
	}

	#profile .display .content-display .item-display.contact .note {
		font-size: 15px;
	}

	#profile .display .content-display .item-display.contact .send {
		width: calc(100% - 30px * 2);
		flex-direction: column;
		justify-content: center;
	}

	#profile .display .content-display .item-display.contact .send .item-send {
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#profile .display .content-display .item-display.contact .send .item-send:nth-child(1) {
		margin-right: 0px;
		margin-bottom: 5px;
	}

	#profile .display .content-display .item-display.contact .send .item-send:nth-child(3) {
		margin-left: 0px;
		margin-top: 5px;
	}

	#profile .display .content-display .item-display.contact .send .item-send .icon-send {
		margin-bottom: 0;
	}

	#profile .display .content-display .item-display.contact .send .item-send a {
		font-size: 13px;
	}
}