:root {
	--bg-color: rgb(42, 51, 54);
	--bg-color-2: rgb(27, 30, 33);
	--bg-transp-color: rgba(42, 51, 54, 0.7);
	--bg-color-2: rgb(27, 30, 33);
	--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;
	min-height: 100vh;
}

html {
	scrollbar-color: var(--pebble-yellow) var(--bg-color);
	background-color: var(--bg-color);
	background-image: url("../resources/main/bg.webp");
	background-size: cover;
	background-position: left center;
	background-attachment: fixed;

	@media screen and (max-width: 850px){
		background-image: none;
	}
}

/* main content */

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

	transform: none;

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

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

	background-size: 50px 50px, 50px 50px, 6px 6px, 6px 6px;
	background-image:
	  linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
	  linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%),
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%);
	background-position:
	  0px 0px, 0px 0px,
	  0px 0px, 3px 3px;

	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);	

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

	@media screen and (max-width: 850px) {
		top: 50px;
		left: -110%;
		width: 100vw;
		height: calc(100vh - 50px);
		height: calc(100dvh - 50px);

		align-items: center;

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

		transition: .3s;

		z-index: 5;
	}
}

@media screen and (max-width: 850px) {
	.fullSidebarContent{
		max-width: 300px;
		margin-bottom: 60px;
	}
}

.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;

	background-color: var(--sidebar-button-color);
	background-image: 
	radial-gradient(rgba(255, 255, 255,.05) 22.8%, transparent 22.8%),
	radial-gradient(rgba(255, 255, 255,.05) 22.8%, transparent 22.8%);
	background-position: 0px 0px, 3px 3px;
	background-size: 6px 6px;

	box-shadow: 0px 10px 20px var(--home-soft-shadow-color);

	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);

	background-color: var(--sidebar-button-color);
	background-image: 
	radial-gradient(rgba(255, 255, 255,.05) 22.8%, transparent 22.8%),
	radial-gradient(rgba(255, 255, 255,.05) 22.8%, transparent 22.8%);
	background-position: 0px 0px, 3px 3px;
	background-size: 6px 6px;

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

	box-shadow: 0px 10px 20px var(--home-soft-shadow-color);
}

.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;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	background-color: var(--bg-transp-color);
	background-size: 6px 6px, 6px 6px;
	background-image:
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%),
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%);
	background-position:
	  0px 0px, 3px 3px;

	z-index: 99999999;

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

	@media screen and (max-width: 850px) {
		top: 0;
		width: 100%;
		transform: none;
	}
}

#desktopHeader {
	display: flex;
	@media screen and (max-width: 850px) {
		display: none;
	}
}

#mobileHeader {
	display: none;
	@media screen and (max-width: 850px) {
		display: block;
		z-index: 999;
		height: 50px;
	}
}

@media screen and (max-width: 850px) {
	#mobileHeader h1 {
		position: fixed;
		left: 50%;
		margin: 0;	
		top: 25px;
		transform: translateX(-50%) translateY(-50%);
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 850px) {
	.hamburgerCont{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
	}
}

.hamburger{
	display: none;
	@media screen and (max-width: 850px) {
		display: block;
		height: 25px;
		fill: var(--text-color);
	}
}

.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-2);
	z-index: -1;

	background-size: 50px 50px, 50px 50px, 6px 6px, 6px 6px;
	background-image:
	  linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
	  linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%),
	  radial-gradient(rgba(255, 255, 255, 0.05) 22.8%, transparent 22.8%);
	background-position:
	  0px 0px, 0px 0px,
	  0px 0px, 3px 3px;

	@media screen and (max-width: 850px) {
		width: 100vw;
		left: 0;
	}
}

.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);

	@media screen and (max-width: 850px) {
		margin-left: 0;
		overflow-y: visible;
	
		height: auto;
	
		width: 100dvw;
		width: 100vw;
	}
}

.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);	

	@media screen and (max-width: 850px) {
		margin: 65px 20px 35px 20px;
		width: calc(100% - 40px);
	}
}

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

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

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

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

	@media screen and (max-width: 850px) {
		font-size: 2.75rem;
		margin-bottom: 0.825rem;
	}
}

.fullMainContent h2 {
	font-family: var(--font);	
	font-weight: bold;
	font-size: 32px;
	margin-bottom: 15px	;

	@media screen and (max-width: 850px) {
		font-size: 1.76rem;
		margin-bottom: 1.1rem;
	}
}

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

	@media screen and (max-width: 850px) {
		font-size: 1.1rem;
		margin-bottom: 3rem;
		line-height: 1.8rem;
	}
}

#smallBottomMargin {
	margin-bottom: 15px;

	@media screen and (max-width: 850px) {
		margin-bottom: 1.1rem;
	}
}

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

	@media screen and (max-width: 850px) {
		font-size: 1.1rem;
		margin-bottom: .55rem;
	}
}

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

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

	@media screen and (max-width: 850px) {
		font-size: 1.1rem;
		margin: .3rem 0 .3rem 0;
		line-height: 1.8rem;
	}
}

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

	@media screen and (max-width: 850px) {
		font-size: 1.1rem;
		margin-bottom: 3rem;
	}
}

.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;

	@media screen and (max-width: 850px) {
		margin-bottom: 3rem;
	}
}

.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;
}