/* ================================
DEFAULT
================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=block');
:root {
	--aboveALL: 1;
	--csharp: #239120;
	--typescript: #3178c6;
	--html: #e34f26;
	--rust: #dea584;
	--powershell: #5391fe;
    --css: #a074c4;
    --javascript: #f1e05a;
}
@keyframes rainbowGlow {
	0%      { box-shadow: 0 0 .5rem hsl(  0 100% 60%); }
	16.666% { box-shadow: 0 0 .5rem hsl( 60 100% 60%); }
	33.333% { box-shadow: 0 0 .5rem hsl(120 100% 60%); }
	50%     { box-shadow: 0 0 .5rem hsl(180 100% 60%); }
	66.666% { box-shadow: 0 0 .5rem hsl(240 100% 60%); }
	83.333% { box-shadow: 0 0 .5rem hsl(300 100% 60%); }
	100%    { box-shadow: 0 0 .5rem hsl(  0 100% 60%); }
}
@keyframes loadingIn {
  	from {
	    opacity: 0;
		transform: translate(-50%, calc(-50% + 0.5rem));
	}
  	to {
    	opacity: 1;
    	transform: translate(-50%, -50%);
  	}
}
@keyframes dots {
	0%   { content: "\00a0\00a0\00a0"; }
	25%  { content: ".\00a0\00a0"; }
	50%  { content: "..\00a0"; }
	75%  { content: "..."; }
	100% { content: "\00a0\00a0\00a0"; }
}
html {
  	font-size: clamp(15px, 0.25vw + 12px, 20px);

  	@media (min-width: 1920px) {
    	font-size: 23.5px;
  	}
  	@media (min-width: 2560px) {
    	font-size: 31.5px;
  	}
  	@media (min-width: 3840px) {
    	font-size: 50px;
  	}
  	&[data-theme="light"] {
	    --background: white;
	    --title: black;
	    --description: #555555;
	    --box: #f3f3f3;
	    --highlight: #d6d6d6;
	    --bloom: #333;
	    --link: #0366d6;
	    --error: #d32f2f;
	    --avatar-border: rgba(0, 0, 0, 0.35);
	    --warning: #ff8a2a;
	    --language-color: 50%;
	    --icon: #2979d7;

	    .icon-moon {
	      	display: none;
	    }
  	}
  	&[data-theme="dark"] {
	    --background: black;
	    --title: white;
	    --description: #b5b5b5;
	    --box: #1a1a1a;
	    --highlight: #333;
	    --bloom: #ccc;
	    --link: #4ea1ff;
	    --error: #ff6b6b;
	    --avatar-border: rgba(255, 255, 255, 0.14);
	    --warning: #ff9d3c;
	    --language-color: 30%;
	    --icon: #6bb8ff;

	    .icon-sun {
	      display: none;
	    }
  	}
  	&[lang="ja"] .description {
    	font-weight: 600;
  	}
}
body {
  	display: flex;
  	justify-content: center;
  	margin-block: 0;
  	background-color: var(--background);
  	font-family: "Inter", sans-serif;
  	color: var(--title);

  	&.loadingBarrier {
    	align-items: center;

    	.container {
      		filter: blur(0.375rem);
      		pointer-events: none;
     		user-select: none;
    	}
  	}
}
body,
.theme-button,
.translate-button,
.translate-menu,
.translate-menu button,
.description,
.profile img,
.repo-name a,
.repo-desc,
.repo-time,
.notice,
.notice-details,
.repo-badge {
	transition: background-color .15s,
				color .15s,
				border-color .15s;
}
#loadingAssets {
  	position: fixed;
  	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--aboveALL);
	padding: 1rem 1.5rem;
	background-color: rgba(40, 55, 95, 0.60);
	border-radius: 0.375rem;
	font-family: sans-serif;
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
	animation: loadingIn .5s forwards;

  	&::after {
    	content: "";
    	animation: dots .5s steps(4, end) infinite;
  	}
}
.image-preview {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.85);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, visibility .15s;
	z-index: var(--aboveALL);

  	img {
		width: min(80vw, 35rem);
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 50%;
		transform: scale(.4);
		transition: transform .15s;
  	}
	&.show {
		opacity: 1;
		visibility: visible;

		img {
			transform: scale(1);
		}
	}
}
.message {
	position: fixed;
	top: 0;
	left: 0;
	color: var(--error);
	font-size: 2rem;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	z-index: var(--aboveALL);
	transition: opacity .15s;
	white-space: nowrap;

	&.show {
		opacity: 0.85;
	}
}
/* ================================
Container for Top and Bottom
================================ */
.container {
	display: flex;
	flex-direction: column;
	max-width: 34.4rem;
	min-height: 100dvh;
	transition: filter .5s;
}
/* ================================
Top container
================================ */
.top {
	display: flex;
	position: relative;
	justify-content: center;
}
.theme-button, .translate-button {
	display: flex;
	padding: 0.5rem;
	background-color: var(--box);
	border: 0.0625rem solid var(--highlight);
	border-radius: 0.5rem;

	&:hover {
		background-color: var(--highlight);
		border-color: var(--title);
		transform: scale(1.05);
	}
	svg {
		width: 1.375rem;
		height: 1.375rem;
	}
}
.theme-button, .translate-button, .translate-menu button {
	cursor: pointer;
	color: var(--title);
}
.theme-button, .translate-dropdown {
	position: absolute;
	top: 0.625rem;
}
.theme-button { 
	right: 0.625rem; 
}
.translate-dropdown {
	left: 0.625rem;

	&.open .translate-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .15s, transform .15s;
	}
	&:not(.open) .translate-menu button {
		cursor: default;
	}
}
.translate-menu {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	margin-block: 0;
	padding: 0.375rem;
	width: 5rem;
	list-style: none;
	background-color: var(--box);
	border: 0.0625rem solid var(--highlight);
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: background-color .15s, border-color .15s, opacity .15s, transform .15s, visibility .15s;

	button {
		padding: 0.375rem 0.625rem;
		background-color: transparent;
		border: none;
		border-radius: 0.375rem;
		font-size: 1rem;
		width: 100%;

		&:hover, &:focus {
			background-color: var(--highlight);
		}
		&[data-active] {
			background-color: color-mix(in srgb, var(--link) 15%, transparent);
			color: var(--link);
			font-weight: 600;
		}
	}
}
.profile {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	img {
		margin-top: 0.625rem;
		width: 7.5rem;
		height: 7.5rem;
		border-radius: 50%;
		object-fit: cover;
		border: 0.25rem solid var(--avatar-border);
		cursor: zoom-in;
		transition: transform .15s, box-shadow .15s, border-color .15s;
		animation: rainbowGlow 5s linear infinite;

		&:not(.open):hover {
			transform: scale(1.06);
		}
		&.open {
			cursor: default;
			transform: scale(1.06);
		}
	}
	.name {
		margin-block: 0;
		line-height: 1.5;
	}
	.description {
		text-align: center;
		margin-block: 0;
		margin-bottom: 0.0625rem;
		color: var(--description);
		font-style: italic;
		font-weight: 500;
		width: 90%;
	}
	.icons {
		div {
			display: flex;
			justify-content: center;
			gap: 1rem;
			margin-top: 0.5rem;
			flex-wrap: wrap;

			&:first-child {
				transform: translateX(-1rem);
			}
			&:last-child {
				transform: translateX(1rem);
			}
		}
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.25rem;
			color: var(--title);
			text-decoration: none;

			&:hover {
				svg {
					transform: translateY(-0.1875rem) scale(1.1);
					filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--icon) 60%, transparent));
				}
			}
		}
		svg {
			width: 4rem;
			height: 4rem;
			transition: transform .15s, filter .15s;
		}
		span {
			font-weight: 600;
			color: var(--bloom);
		}
	}
}
/* ================================
Bottom container
================================ */
.bottom {
	display: flex;
	flex-direction: column;
}
.repo-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;

	svg {
		display: flex;
		width: 1.75rem;
		height: 1.75rem;
		border: 0.0625rem solid #fff;
		border-radius: 50%;
		transition: transform .15s , filter .15s;
	}
	p {
		margin-block: 0;
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--warning);
		text-decoration-thickness: 0.125rem;
		text-underline-offset: 0.15rem;
	}
	a:hover svg {
		transform: scale(1.2);
		filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--icon) 60%, transparent));
	}
	.repo-title {
		margin-block: 0;
		white-space: nowrap;
	}
}
.repo-list {
	.notice {
		padding: 1rem;
		border-radius: 0.375rem;
		border: 0.0625rem solid var(--highlight);
		background-color: var(--box);
		text-align: center;
		color: var(--error);

		.notice-message {
			margin-block: 0;
			margin-bottom: 0.5rem;
			font-weight: 700;
		}
		.notice-details {
			margin-block: 0;
			color: var(--error);
			font-weight: 600;
			line-height: 1.5;
		}
	}
	.repo-div {
		padding: 0.625rem;
		border: 0.125rem solid var(--highlight);
		border-radius: 0.375rem;
		background-color: var(--box);
		transition: background-color .15s, border-color .15s, transform .15s;

		&:hover {
			transform: translateY(-0.125rem);
			border-color: var(--title);
			box-shadow: 0 0.25rem 0.75rem var(--box);
		}
		.repo-name {
			display: flex;
			align-items: center;
			gap: 0.375rem;
			margin-block: 0;
			font-size: 1rem;

			a {
				text-decoration: none;
				color: var(--link);

				&:hover {
				text-decoration: underline;
				}
			}
			.repo-time {
				display: flex;
				align-items: center;
				line-height: 1;
				gap: 0.25rem;
				font-size: 0.75rem;
				padding: 0.125rem 0.375rem;
				border-radius: 50rem;
				background-color: var(--highlight);
				color: var(--description);

				svg {
				width: 0.875rem;
				height: 0.875rem;
				}
			}
		}
		.repo-desc {
			margin-block: 0;
			margin-top: 0.3125rem;
			font-size: 0.8125rem;
			font-weight: 600;
			color: var(--description);
			line-height: 1.5;
		}
		.repo-languages {
			display: flex;
			gap: 0.35rem;
			margin-top: 0.5rem;

			.repo-badge {
				padding: 0.15rem 0.55rem;
				border-radius: 0.5rem;
				background-color: color-mix(in srgb, var(--language) var(--language-color), var(--box));
				color: var(--bloom);
				font-size: 0.75rem;
				font-weight: 700;

				&.html       { --language: var(--html); }
				&.css 		 { --language: var(--css); }
				&.javascript { --language: var(--javascript); }
				&.typescript { --language: var(--typescript); }
				&.rust       { --language: var(--rust); }
				&.powershell { --language: var(--powershell); }
				&.csharp     { --language: var(--csharp); }
			}
		}
	}
}