:root {
	--bg-color: rgb(37, 50, 55);
	--bg-transp-color: rgba(37, 50, 55, 0.7);
	--mobile-sidebar-bg-color: rgb(27, 30, 33);
	--a: hsl(258, 19%, 18%);

	--pebble-yellow-transp: rgba(253,209,72,.6);
	--pebble-yellow-transp-faint: rgba(253,209,72,.15);
	--border-color: rgb(92, 137, 137);
	
	
	--shadow-color: rgba(0,0,0,.3);
	--date-color: rgba(255,255,255,.33);
}  

#aboutBody {
	overflow-x: hidden;
	background-image: url("../resources/bg.webp");
	background-size: cover;
	background-position: left center;
	background-attachment: fixed;
	background-color: var(--bg-color);
	min-height: 100vh;
}

html {
	scrollbar-color: var(--pebble-yellow) var(--bg-color);
	background-color: var(--bg-color);
}

/* main content */

.fullSidebar {	
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: left;

	transform: none;

	width: 300px;
	height: 100vh;
	height: 100dvh;

	/*background-color: #1c1b1b;*/
	background-color: var(--bg-transp-color);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);	

	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: var(--border-color);
}

.mainTileContainer{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.mainTileIndContainer{
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 61px;
	perspective: 800px;
	z-index: 1;
}

.mainTile{
	position: relative;
	display: flex;
	align-items: center;

	width: calc(100% - 20px);
	height: 50px;

	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	border-radius: 15px;

	transform-style: preserve-3d;
	perspective: 800px;
	transition: .3s;
}

.mainTileIndContainer:hover > .mainTile {
	border-color: var(--pebble-yellow);
	border-width: 3px;
}

.mainTileIndContainer:hover{
	z-index: 2;
}

.mainTileText {
	font-family: var(--font);
	font-weight: bold;
	font-size: 21px;
	color: var(--text-color);
	margin-left: 18px;
}

.sidebarTileContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;

	width: calc(100% - 10px);
	margin: 5px;
	margin-top: 0px;
	height: auto;
}

.sidebarTileIndContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: calc(100% / 5);
	aspect-ratio: 1 / 1;

	perspective: 800px;
}

.sidebarTile{
	display: flex;
	justify-content: center;
	align-items: center;

	width: calc(100% - 10px);
	height: calc(100% - 10px);

	border-radius: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);

	transform-style: preserve-3d;
	perspective: 800px;
	transition: .3s;
}

.sidebarTileIndContainer:hover > .sidebarTile {
	border-color: var(--pebble-yellow);
	border-width: 3px;
}

.sidebarTileIcon {
	width: 60%;
	height: auto;
}

.mainTitleCont{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 150px;
}

.mainPFP {
	height: 60px;

	user-select: none; /* Prevent text selection */
	-webkit-user-drag: none; /* Prevent image dragging in WebKit browsers (Chrome, Safari) */
	-moz-user-select: none; /* Prevent text selection in Firefox */
	-ms-user-select: none; /* Prevent text selection in Internet Explorer/Edge */
}

.mainTitle {
	font-family: urbanist, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-weight: 900;
	font-size: 40px;

	color: var(--pebble-yellow);
	text-shadow: 5px 5px var(--text-shadow-color);

	margin: 0px;
	margin-left: 20px;
}

/* === main content === */

.fullMainHeaderCont{
	position: fixed;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	width: calc(100% - 301px);
	height: 60px;

	background-color: var(--bg-color);

	z-index: 99999999;

	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--border-color);
}

#desktopHeader {
	display: flex;
}

#mobileHeader {
	display: none;
}

.hamburger{
	display: none;
}

.fullMainHeaderCont h1 {
	font-family: urbanist, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: var(--text-color);
	font-weight: 900;
	font-size: 35px;
}

.overscroll {
	width: calc(100vw - 301px);
	height: 100vh;
	left: 301px;
	top: 0;
	position: fixed;
	background-color: var(--bg-color);
	z-index: -1;
}

.fullMain {
	margin-left: 301px;
	display: flex;
	align-items: center;
	flex-direction: column;
	overflow-y: hidden;
	overflow-x: hidden;

	min-height: 100vh;
	height: 100%;
	width: calc(100% - 301px);

	background-color: var(--bg-color);
}

.fullMainContentWrapper {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;;
}

.fullMainContent {
	width: calc(100% - 120px);
	max-width: 800px;	
	align-self: flex-start;

	margin: 90px 60px 60px 60px;

	font-family: var(--font);
	color: var(--text-color);	
}

/* === about me text === */

#date {
	color: var(--date-color);
	margin: 0;
}

#stampText {
	font-size: .8rem;
	margin: 0;
	line-height: 33px;
}

.fullMainContent h1 {
	color: var(--pebble-yellow);
	font-weight: 600;
	font-size: 50px;
	margin-top: 0;
	margin-bottom: 0;
}

.fullMainContent h2 {
	font-weight: bold;
	font-size: 32px;
	margin-bottom: 15px	;
}

.fullMainContent p {
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 60px;
	line-height: 33px;
}

#smallBottomMargin {
	margin-bottom: 15px;
}

.fullMainContent h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.fullMainContent strong {
	color: var(--pebble-yellow);
}

.fullMainContent li {
	font-size: 20px;
	line-height: 33px;
	margin: 5px 0 5px 0;
}

.fullMainContent ul {
	font-size: 22px;
	margin-bottom: 60px;
}

.fullMainContent a {
	color: var(--pebble-yellow) !important;
	-webkit-text-decoration: underline !important;
	text-decoration: underline !important;
    text-decoration-color: var(--pebble-yellow-transp-faint) !important;
	text-decoration-thickness: 0.6em !important;
	-webkit-text-decoration-skip-ink: none !important;
	text-decoration-skip-ink: none !important;
	text-underline-offset: -0.25em !important;
}

.fullMainContent a:hover {
	color: var(--pebble-yellow) !important;
	-webkit-text-decoration: underline !important;
	text-decoration: underline !important;
    text-decoration-color: var(--pebble-yellow-transp) !important;
	text-decoration-thickness: 0.6em !important;
	-webkit-text-decoration-skip-ink: none !important;
	text-decoration-skip-ink: none !important;
	text-underline-offset: -0.25em !important;
}

.aboutStampCont {
	max-width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 60px;
}

.aboutStampIndCont{
	position: relative;
	width: 98px;
	height: 41px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.aboutStamp{
	width: 88px;
	height: 31px;
	image-rendering: pixelated;
	position: relative;
	transition: transform 0.5s ease;
}

.aboutStampIndCont:hover > .aboutStamp {
	box-shadow: 0px 10px 20px var(--shadow-color);
	transform: scale(2);
	z-index: 2;
}

.stampAlt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 31px;
	transition: transform 0.5s ease;
	border-style: solid;
	border-color: var(--border-color);
	border-width: 1px;
	background-color: var(--bg-color);
}

.aboutStampIndCont:hover > .stampAlt {
	box-shadow: 0px 10px 20px var(--shadow-color);
	transform: scale(2);
	z-index: 2;
}

@media screen and (max-width: 850px) {	

	#aboutBody {
		background-color: var(--bg-color);
		background-image: none;
	}

	#desktopHeader {
		display: none;
	}

	#mobileHeader {
		display: block;
		z-index: 999;
		height: 50px;
		background-color: var(--bg-color);
	}

	#mobileHeader h1 {
		position: fixed;
		left: 50%;
		margin: 0;	
		top: 25px;
		transform: translateX(-50%) translateY(-50%);
		font-size: 1.8rem;
	}

	.fullMainHeaderCont{
		display: flex;
		position: fixed;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
	
		width: 100%;

		transform: none;
	
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: var(--border-color);
	}

	.hamburgerCont{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}

	.hamburger{
		display: block;
		height: 25px;
		fill: var(--text-color);
	}

	.fullSidebar {	
		position: fixed;
		top: 50px;
		left: -110%;
		width: 100vw;
		height: calc(100vh - 50px);
		height: calc(100dvh - 50px);
		overflow: auto;

		display: flex;
		flex-direction: column;
		align-items: center;

		border-right-style: none;
		border-right-width: 0px;
	
		background-color: var(--mobile-sidebar-bg-color);

		transition: .3s;

		z-index: 5;
	}

	.fullSidebarContent{
		max-width: 300px;
		margin-bottom: 60px;
	}

	.overscroll{
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		position: fixed;
		background-color: var(--bg-color);
		z-index: -1;
	}

	.fullMain {
		margin-left: 0;
		overflow-y: visible;
		overflow-x: hidden;
	
		height: auto;
	
		width: 100dvw;
	}

	.fullMainContent{
		margin: 65px 20px 35px 20px;
		width: calc(100% - 40px);
	}

	#smallBottomMargin {
		margin-bottom: 1.1rem;
	}

	.fullMainContent h1 {
		color: var(--pebble-yellow);
		font-weight: bold;
		font-size: 2.75rem;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.fullMainContent h2 {
		font-weight: bold;
		font-size: 1.76rem;
		margin-bottom: 1.1rem;
	}
	
	.fullMainContent p {
		font-size: 1.1rem;
		margin-top: 0;
		margin-bottom: 3rem;
		line-height: 1.8rem;
	}

	#pNoBottomMargin {
		margin-bottom: 1.1rem;
	}
	
	.fullMainContent h3 {
		font-size: 1.1rem;
		margin-bottom: .55rem;
	}
	
	.fullMainContent strong {
		color: var(--pebble-yellow);
	}
	
	.fullMainContent li {
		font-size: 1.1rem;
		margin: .3rem 0 .3rem 0;
		line-height: 1.8rem;
	}
	
	.fullMainContent ul {
		font-size: 1.1rem;
		margin-bottom: 3rem;
	}

	.aboutStampCont{
		margin-bottom: 3rem;
	}
}