:root {
  --bg-header: linear-gradient(30deg, rgba(20,21,25,1) 0%, rgba(19,21,23,1) 40%, rgba(31,32,36,1) 84%, rgba(19,21,23,1) 100%);
  --bg-header-highlight: linear-gradient(30deg, rgba(30,31,35,1) 0%, rgba(29,31,33,1) 40%, rgba(41,42,46,1) 84%, rgba(29,31,33,1) 100%);
  /* --bg-main: linear-gradient(90deg, rgba(10,12,14,1) 0%, rgba(13,16,18,1) 40%, rgba(20,22,25,1) 84%, rgba(13,16,18,1) 100%); */
  --bg-main: linear-gradient(80deg, rgba(3,4,5,1) 0%, rgba(7,8,10,1) 40%, rgba(13,15,19,1) 84%, rgba(10,11,12,1) 100%);
  --bg-rot: linear-gradient(30deg, rgba(3,4,5,1) 0%, rgba(7,8,10,1) 40%, rgba(13,15,19,1) 84%, rgba(10,11,12,1) 100%);
  --bg-inv: linear-gradient(310deg, rgba(3,4,5,1) 0%, rgba(7,8,10,1) 40%, rgba(13,15,19,1) 84%, rgba(10,11,12,1) 100%);
  --text-color: #ddd;
}

body {
	font-family: Trebuchet MS, sans-serif;
	/* background-color: #000; */
	background: var(--bg-main);
	background-attachment: fixed;
	color: var(--text-color);
	margin: 0;
}

a {
	color: #0AF;
}

a:visited {
	color: #04F;
}

/* p { */
	/* margin-left: 25px; */
/* } */

#footer {
	background: var(--bg-header);
	background-attachment: fixed;
	padding: 10px;
	padding-left: 25px;
	margin: 0;
}

.body-area {
	margin: 25px;
}

.body-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: stretch;
	gap: 25px;
	/* align-items: center; */
}

.body-flex-item {
	background: var(--bg-rot);
	background-attachment: fixed;
	box-shadow: black 0 10px 30px -5px;
	width: min-content;
}

.body-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 400px);
	grid-row-gap: 25px;
	grid-column-gap: 25px;
}

.body-grid-item {
	background: var(--bg-inv);
	box-shadow: black 0 10px 30px -5px;
	background-attachment: fixed;
}

.coding-box {
	/* flex: 0 0 auto; */
	width: 400px;
}

.link-box {
	color: var(--text-color) !important;
}

.link-box h3:hover {
	background: var(--bg-header-highlight) !important;
	background-attachment: fixed !important;
	animation-duration: 250ms !important;
}

h1 {
	font-size: 40px;
	font-weight: 2000;
}

h1,h2,h3,h4,h5,h6 {
	background: var(--bg-header);
	background-attachment: fixed;
	padding: 10px;
	padding-left: 15px;
}

::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    background: #000; 
}
::-webkit-scrollbar-thumb {
	box-shadow: 0 0 5px #000; 
    background: #131517; 
}
::-webkit-scrollbar-thumb:hover {
    background: #1F2024; 
}