/*
Description: This is the styling for my self-introduction website.
Version: 1.0.1
Author: Marvin Schank
Author URI: https://marvinschank.de/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------
 * These are style decisions for links. Since every logo to an external source has its own colours, they have to be matched individually.
 * -------------------------------------------
 */
.linksSection {
	display: flex;
	align-items: center;
	align-content: space-around;
	justify-content: space-around;
}

a[class^='link'],
a[class*=' link'] {
	display: flex;
	margin-left: 24px;
	margin-right: 24px;
	margin-top: 55px;
	align-items: center;
	justify-content: center;
	max-width: 60px;
	aspect-ratio: 1 / 1;
	border-width: 2px;
	border-color: rgb(248 250 252);
	border-radius: 9999px;
}

a[class^='link']:hover,
a[class*=' link']:hover,
a[class^='link']:active,
a[class*=' link']:active {
	transform: scale(1.25);
	transition-duration: 300ms;
	transition-timing-function: ease-out;
}

a[class^='link'] svg,
a[class*=' link'] svg {
	width: 100%;
	height: 100%;
}

.svgIconContent {
	height: 90%;
	width: 90%;
	border-radius: 9999px;
	fill: white;
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
	}
	50% {
		transform: translateY(0);
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	}
}

.tooltip {
	font-size: 14px;
	color: green;
	visibility: hidden;
	position: absolute;
	top: -25px;
	border-radius: 6px;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	white-space: nowrap;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	background-color: rgb(156 163 175);
	animation: bounce 1s infinite;
}

a[class^='link']:hover .tooltip,
a[class*=' link']:hover .tooltip,
a[class^='link']:active .tooltip,
a[class*=' link']:active .tooltip {
	visibility: visible;
}

.link-github {
	background-color: #333;
}
.link-soundcloud {
	background-color: #ff8800;
	background: linear-gradient(120deg, #ff8800, #ff3300);
}
.link-telegram {
	background-color: #25a3e1 !important;
}
.link-youtube {
	background-color: #ff0000;
}
.link-email {
	background-color: rgb(61 122 235);
}
.link-website {
	background-color: #8b5cf6;
}
.link-spotify {
	background-color: #1ed760;
}
.link-medium {
	background-color: #000;
}
.link-beatstars {
	background-color: black;
}
.link-matrix {
	background-color: black;
}
.link-letterboxd {
	background-color: rgb(30 40 48);
}