pages/assets/css/latte.css

@import url(/global.css);

img {
	pointer-events: none;
	user-select: none;
}

body {
	color: #4c4f69;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: #eff1f5;
	min-height: 100vh;
	overflow-x: hidden;
}

.languages {
	margin-bottom: 20px;
}

strong {
	font-weight: 900;
	color: #1e66f5;
}

.info {
	margin-top: 50px;
}

#profile-picture {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

.name {
	font-size: 24px;
	margin-top: 10px;
}

.time,
.weather,
.age,
.hobbies {
	font-size: 18px;
	color: #5c5f77;
	margin-bottom: 10px;
}

.hobbies {
	font-size: 16px;
}

.cards {
	background-color: #e6e9ef;
	border: 2px solid #bcc0cc;
}

.cards:hover {
	border: 2px solid #acb0be;
}

#status {
	font-weight: bold;
	margin: 10px 0 15px 10px;
	color: #7287fd;
}

.activity {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	width: 100%;
	gap: 2px;
}

#activity-name {
	flex-grow: 1;
	text-align: left;
	color: #5c5f77;
}

#activity-image {
	display: block;
	height: 36px;
	width: 36px;
}

.languages,
.contact,
.software {
	margin-top: 30px;
	width: 100%;
}

.language-item {
	display: block;
	background-color: #dde0e8;
	padding: 10px 15px;
	border-radius: 8px;
	transition: background-color 0.3s, transform 0.2s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	margin: 10px;
}

.language-item:hover {
	background-color: #ccd0da;
	transform: translateY(-5px);
}

.language-item:hover span,
.language-item:hover .language-name {
	color: #1e66f5;
}

.name-percent-container {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

div[class="name-percent-container"] > img.image {
	width: 30px;
	height: 20px;
	border-radius: 2px;
}

.language-item .language-name,
.language-item .percent {
	font-size: 16px;
	color: #6c6f85;
	font-weight: bold;
}

.percentage-bar {
	display: block;
	width: 100%;
	height: 8px;
	background-color: #bcc0cc;
	margin-top: 10px;
	border-radius: 5px;
	position: relative;
}

.percentage-bar .bar-after {
	position: relative;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #40a02b 0%, #a6e3a1 50%, #40a02b 100%);
	border-radius: 5px;
	background-size: 200% 100%;
	animation: shimmer 2s infinite ease-in;
}

.language-item:hover .percentage-bar .bar-after {
	background: linear-gradient(to right, #179299 0%, #04a5e5 50%, #179299 100%);
}

.tooltip {
	display: flex;
	justify-content: center;
	position: relative;
}

.tooltip::after,
a[class="skill-item tooltip"]::after,
a[class^="software-item tooltip"]::after {
	content: attr(data-tooltip);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 125%;
	background-color: #dce0e8;
	border: 2px solid #ccd0da;
	color: #4c4f69;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 14px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	cursor: default;
}

.tooltip:hover::after {
	opacity: 1;
	visibility: visible;
}

@keyframes shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

#skills-div:not(#skills-div > h2) {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 600px;
}

.software:not(.software > h2) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	width: 100%;
	max-width: 600px;
}

.skill-item,
.contact-item,
.software-item {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #dde0e8;
	padding: 15px;
	border-radius: 8px;
	transition: background-color 0.3s, transform 0.2s;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	text-align: center;
	margin: 10px;
}

.skill-item {
	flex-direction: column;
	margin: 0 20px;
}

.skill-item:hover,
.software-item:hover {
	background-color: #ccd0da;
	transform: translateY(-5px);
	filter: brightness(1);
}

.skill-item:hover .skill-name {
	color: #1e66f5;
}

.skill-item > .image,
.software-item > .image {
	margin-bottom: 10px;
	filter: brightness(0.75);
}

.skill-item:hover > .image,
.software-item:hover > .image {
	filter: brightness(1);
}

.image {
	height: 50px;
	border-radius: 5px;
	transition: 0.1s;
}

.software-item > .image {
	height: 50px !important;
	border-radius: 0px;
}

.skill-name,
.contact-name,
.software-name {
	font-size: 16px;
	color: #6c6f85;
	transition: 0.1s;
}

.card-header {
	color: #4c4f69;
	text-align: left;
	width: 100%;
	grid-column: span 2;
}

.contact-item:hover .contact-name,
.software-item:hover .software-name {
	color: #1e66f5;
}

.github-contact {
	background-color: #dce0e8;
}

.github-contact:hover {
	background-color: #ccd0da;
}

.instagram-contact {
	background-color: #f2d5cf;
}

.instagram-contact:hover {
	background-color: #eebebe;
}