/* I AM AWARE THAT THIS IS A MESSSSS */

html,
body {
	margin: 0;
	padding: 0em;
	box-sizing: border-box;
	--font-h: "Lato", sans-serif;
	--font-serif: "Times N", sans-serif;
	--font-mono: "Menlo", "Monaco", monospace;
	/* default light-mode colors */
	--foreground-light: #778;
	--background-default: #f8f8f8;
	--background-block: #eee;
	--background-hero: #222;
	--accent: #333333;
	--accent-transparent: rgba(235, 182, 165, 0.2);
	--done: rgba(71, 255, 60, 0.3);
	--working: rgba(255, 200, 60, 0.4);
	--broken: rgba(255, 71, 60, 0.3);
	--done-light: rgba(71, 255, 60, 0.1);
	--working-light: rgba(255, 200, 60, 0.2);
	--broken-light: rgba(255, 71, 60, 0.1);
	--shadow: rgba(0, 0, 0, 0.14);
	--project-card-outline: #dbdbdb;
}

html {
	--a: rgba(235, 175, 175, 0.45);
	--a-hover: rgba(235, 175, 175, 0.75);
	
	--foreground-default: #222;
	/* adjust rem for page */
	font-size: 18px;
}

body {
	font-family: var(--font-serif);
	display: flex;
	flex-direction: column;
	transition: background-color 2s;
	background-color: var(--background) !important;
}

/* MIDDLE */

body::-webkit-scrollbar {
	display: none;
  }
  

.overlay {
	background-color: var(--background);
	transition: background-color 1.5s;
	margin: 1em;
	max-width: unset;
	width: calc(90% - 32px);
	margin-left: auto;
	margin-right: auto;
	border: solid #888 1px;
	padding: 1em;
	border-radius: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.profile {
	border-radius: 50%;
	width: 40%;
	float: right;
}

/* TYPOGRAPHY */

h1,
h2,
h3 {
	font-family: var(--font-h);
	font-weight: normal;
	line-height: 1.325em;
	color: var(--foreground-default);
	margin-top: 0em;
	margin-bottom: 0em;
	display: inline-block;
	transition: color 1.5s;
}

h1 {
	font-size: 3.5rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 1.75rem;
}

p,
li {
	font-size: 1rem;
	line-height: 1.625em;
	margin: 1em 0;
	margin-top: 0;
}

.desktop {
	display: none !important;
}

@media only screen and (min-width: 600px) {
	.overlay {
		max-width: 500px;
		padding: 2em;
	}
	.profile {
		width: 25%;
	}
	h1,
	h2,
	h3 {
		margin-top: 0em;
		margin-bottom: 0em;
	}
	.desktop {
		display: initial !important;
	}
	.mobile {
		display: none !important;
	}
}

::selection {
	background-color: #2226;
	color: white;
}
details > summary {
    list-style-type: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: '+';
}

details[open] > summary::before {
    content: '-';
}


/* LINKS */

#general-links > a {
	text-decoration: none !important;
	border-radius: 50%;
	color: black !important;
	transition: background-color 1.5s, box-shadow 1.5s;
	background-color: var(--a);
}

a{
	text-decoration: none !important;
	border-radius: 10px;
	padding-left: 4px;
	padding-right: 4px;
	color: black !important;
	transition: background-color 1.5s, box-shadow 1.5s;
	background-color: var(--a);
}

a:hover {
	background-color: var(--a-hover);
	cursor: pointer;
	box-shadow: 0 10px 12px 0 var(--shadow), 0 17px 50px 0 rgba(0, 0, 0, 0.1);
}

#general-links {
	margin-top: 1rem;
	display: flex;
}

#general-links a {
	height: 2.5rem !important; 
	width: 2.5rem !important;
	font-size: 1.3rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.8em;
}