a {
	cursor: pointer; color: blue;
}



/* 
	projects windows
*/

.project-window {

	--link-color-base: #ffff00;
	--link-color-hover: #ff0000;

	/* style paragraph */
	p {
		margin-left: 5%;
		margin-right: 5%;
		line-break: normal;
		text-align: justify;
		/*text-align-last: center;*/
	}
	.marged {
		margin-left: 5%;
		margin-right: 5%;
	}

	font-size: 1.3rem;
	
	.small {
		font-size: 1.1rem;
	}

	.tiny {
		font-size: .9rem;
	}

	.big {
		font-size: 1.7rem;
	}

	.giant {
		font-size: 3rem;
	}

	/* style header */
	.project-header {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		text-align: center;
		gap: 15px;
	}

	.project-header .project-title {
		font-size: 2.5rem;
		font-weight: bold;
		text-align: center;
		background-color: rgba(255,255,0,0.2);
		box-shadow: 0 0 10px rgba(255,255,0,0.3);
	}

	.project-header img {
		position: block;
		margin: 2%;
		width: 15%;
	}

	/* project actionbar */
	.project-actionbar {
		display: flex;
		margin-left: 5%;
		margin-right: 5%;
		> nav {
			flex: 1;
			content: center;
		}
		> article {
			flex: 3;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: .25rem;
		}
		> article > * {
			cursor: pointer;
			margin-left: 10px;

			/*border: 1px solid;*/
			border-color: var(--link-color-base);
			border-radius: 20%;
			transition: border-color .5s ease, transform .5s ease;
		}
		> article > *:hover {
			border-color: var(--link-color-hover);
			transform: scale(1.15);
		}
		
		img {
			display: block;
			width: 3rem;
			height: auto;
			aspect-ratio: 1;
		}
	}

	/* 
	general style 
	*/
	
	a {
		color: var(--link-color-base);
		text-decoration: none;
		font-weight: 500;
		transition: color 0.3s ease, transform 0.3s ease;
	}

	a:hover {
		color: var(--link-color-hover);
		transform: scale(1.05);
	}
}

/* 
special
*/

.absolute-timeline {
	position: absolute;
	outline: black solid 1px;
	left: 1.02em;
	height: 1000%;
	width: 0;
}

.tos-is-fullscreen > section > .corner-tip {
	display: none;
}
.corner-tip {
	position: sticky;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	font-family: 'Brush Script MT', cursive;
	/*opacity: .5;*/

	> .corner {
		display: flex;
		justify-content: flex-end;
		backdrop-filter: blur(10px);
		background-color: #00000011;
		align-items: center;
		padding-left: 1em;
		border-top-left-radius: 1em;
	}

	p {
		line-break: strict;
	}

	img {
		margin: 1em;
		margin-right: 1px;
		width: 3em;
	}
}

.xp-rectangles {
	width: 10em;
	display: flex;
	border-radius: 10px;
	overflow: hidden;
	outline: solid black 2px;
	box-shadow: 10px 10px 10px #000000aa;

	.xp-fill {
		flex: 1;
		outline: solid black 1px;
		background-color: yellow;
		height: 10px;
	}
	.xp-empty {
		flex: 1;
		outline: solid black 1px;
		background-color: none;
	}
}


.xp-text {
	display: flex;
	padding: 0 1.3em;
	width: fit-content;
	height: fit-content;

	border-radius: 10px;
	overflow: hidden;
	/*outline: solid black 2px;*/
	box-shadow: 10px 10px 10px #00000066;
	
	background-color: #ffffff33;
	> * {
		white-space: nowrap;
		color: yellow;
		text-align: center;
		font-weight: bolder;
		margin: 0;
		padding: 0;
	}
}