styles.css

@import url(base.css);
.grid-item,
.nav {
	background-color: var(--dark-card);
}
.product-card h1,
p {
	letter-spacing: 1px;
}
.article-card div a:hover,
.discord-card div a:hover,
.grid-item:hover,
.nav:hover {
	border-color: var(--red-main);
	transition: 0.3s ease-in-out;
}
.article-card div,
.to-do-card ul {
	height: 100%;
	width: 100%;
}

.product-card div ul li,
.to-do-card ul li,
body {
	background-color: var(--dark-background);
}
.discord-card h3,
body {
	display: flex;
	align-items: center;
}
.product-card h1,
body {
	color: var(--white-main);
}
.article-card div div p,
.discord-card div a,
.discord-card h3 i,
.discord-card p.sub,
a {
	color: var(--grey-main);
}
body {
	flex-direction: column;
	gap: 54px;
	font-family: Roboto;
	padding: 3% 20%;
}
h1 {
	font-size: 24px;
}
p {
	font-size: 18px;
	object-fit: fill;
}
a {
	text-decoration: none;
}
.art-card:hover div > h1,
.art-card:hover div > i,
.artstation-card:hover div > h1,
.artstation-card:hover div > i,
.discord-card div a:hover > i,
.github-card:hover div > h1,
.github-card:hover div > i,
.insta-card:hover div > h1,
.insta-card:hover div > i,
.nav li a:hover,
.product-card div ul li:hover > a,
.product-card:hover > div h1,
.to-do-card ul li:hover > .content,
a:hover {
	color: var(--red-main);
	transition: 0.3s ease-in-out;
}
.profile-card span,
a.selected {
	color: var(--red-main);
}
.nav,
.profile-card div div ul {
	display: flex;
	list-style-type: none;
}
.nav,
.profile-card div div {
	justify-content: space-between;
}
.nav {
	width: 320px;
	gap: 12px;
	border-radius: 2rem;
	border: 2px solid var(--grey-main);
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
}
.nav li a:hover,
.to-do-card ul li:hover > .content {
	cursor: pointer;
}
#grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	list-style-type: none;
}
.grid-list-default {
	grid-template-areas: 'profile-card profile-card   map-card   product-card' 'discord-card insta-card     to-do-card product-card' 'article-card article-card   to-do-card github-card' 'my-stack-card my-stack-card artstation-card art-card';
}
.grid-list-about {
	grid-template-areas: 'profile-card profile-card    map-card   insta-card' 'my-stack-card my-stack-card  to-do-card product-card' 'artstation-card github-card    to-do-card product-card' 'discord-card article-card article-card art-card';
}
.grid-list-projects {
	grid-template-areas: 'profile-card profile-card   product-card to-do-card' 'artstation-card github-card product-card to-do-card' 'art-card my-stack-card     my-stack-card insta-card' 'article-card article-card discord-card map-card';
}
.grid-list-media {
	grid-template-areas: 'profile-card profile-card   insta-card   artstation-card' 'github-card art-card     discord-card    product-card' 'my-stack-card my-stack-card   to-do-card product-card' 'article-card article-card to-do-card map-card';
}
.grid-item {
	border-radius: 24px;
	border: 2px solid var(--grey-main);
	min-height: 260px;
	min-width: 260px;
}
.grid-item,
.nav {
	box-shadow: 6px 6px 16px var(--darkest);
}
.grid-item:hover,
.nav:hover {
	box-shadow: 0px 0px 16px rgba(252, 52, 82, 100%);
}
.profile-card {
	grid-area: profile-card;
	padding: 26px 36px;
}
.profile-card p {
	text-align: justify;
	line-height: 1.5rem;
}
.profile-card span {
	font-weight: 600;
}
.profile-card > div {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.profile-card div div {
	display: flex;
	align-items: flex-start;
}
.profile-card div div ul {
	gap: 16px;
	font-size: 18px;
}
.profile-card div div ul li a {
	padding: 9px;
}
.profile-card div img {
	border-radius: 50%;
	width: 113px;
}
.map-card,
.product-card {
	grid-area: map-card;
	overflow: hidden;
}

#map {
	width: 101%;
	height: 115%;
}

.product-card {
	grid-area: product-card;
}
.product-card div,
.product-card div ul {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.product-card div {
	gap: 42px;
	width: 100%;
}
.product-card h1 {
	text-align: center;
	font-weight: 600;
	margin-top: 48px;
}
.product-card div ul {
	list-style-type: none;
	gap: 32px;
	align-items: center;
}
.product-card div ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	width: 90%;
}
.product-card div ul li a {
	text-decoration: none;
	color: #fff;
	width: 100%;
	cursor: pointer;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 24px;
	padding: 25px 0;
	font-family: Kanit;
}
.product-card div ul li:hover {
	background-color: var(--darkest);
	transition: 0.3s ease-in-out;
}
.discord-card {
	grid-area: discord-card;
}
.discord-card div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 18px 0;
}
.article-card div div,
.discord-card div div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.discord-card div > i {
	font-size: 72px;
}
.discord-card div a {
	height: fit-content;
	width: fit-content;
}
.discord-card div a:hover {
	transition: 0.3s ease-in-out;
}
.discord-card h3 {
	font-size: 20px;
	gap: 6px;
}
.art-card div a i,
.artstation-card div a i,
.discord-card h3 i,
.github-card div a i,
.insta-card div a i {
	font-size: 12px;
}
.insta-card {
	grid-area: insta-card;
}
.artstation-card {
	grid-area: artstation-card;
}
.art-card h1,
.artstation-card h1,
.github-card h1,
.insta-card h1 {
	letter-spacing: 1.5px;
}
.art-card div,
.artstation-card div,
.insta-card div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.art-card div,
.artstation-card div,
.github-card div,
.insta-card div {
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
	position: relative;
}
.art-card div > i,
.artstation-card div > i,
.github-card div > i,
.insta-card div > i {
	font-size: 96px;
	color: #fff;
}
.art-card div a,
.artstation-card div a,
.github-card div a,
.insta-card div a {
	position: absolute;
	bottom: 16px;
	left: 16px;
	text-decoration: none;
	color: var(--grey-main);
	padding: 6px;
	width: fit-content;
	height: fit-content;
}
.art-card div a i:hover,
.article-card div a:hover,
.artstation-card div a i:hover,
.github-card div a i:hover,
.insta-card div a i:hover {
	transition: 0.3s ease-in-out;
	color: var(--red-main);
}
.article-card {
	width: 560px;
	grid-area: article-card;
}
.article-card h1,
.my-stack-card h1 {
	letter-spacing: 1px;
}
.article-card h1 span {
	font-style: italic;
}
.article-card div {
	padding: 32px;
	gap: 16px;
}
.article-card div div {
	padding: 0;
	align-items: center;
}
.article-card div a {
	border: 1px solid var(--grey-main);
	padding: 7px 12px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.to-do-card {
	grid-area: to-do-card;
	padding: 26px 0;
}
.article-card div,
.to-do-card ul,
.to-do-card ul li {
	display: flex;
	flex-direction: column;
}
.to-do-card ul {
	gap: 6px;
	list-style-type: none;
	align-items: flex-end;
	overflow-y: scroll;
	padding: 0;
}
.to-do-card ul li {
	width: 90%;
	padding: 16px;
	gap: 9px;
}
.to-do-card ul li p span {
	font-weight: 600;
	font-style: italic;
}
.to-do-card ul li:hover > .content {
	transition: 0.3s;
}
.to-do-card ul li .content {
	font-size: 16px;
}
.date,
.sub {
	color: var(--grey-main);
	font-size: 14px;
	letter-spacing: unset;
}
::-webkit-scrollbar {
	height: 7px;
	width: 7px;
	color: transparent;
}
::-webkit-scrollbar-corner {
	background-color: transparent;
}
.my-stack-card:hover ::-webkit-scrollbar-thumb,
.to-do-card:hover > ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
	background-color: var(--red-main);
}
.to-do-card ::-webkit-scrollbar {
	width: 25px;
}
::-webkit-scrollbar-track {
	background-color: transparent;
}
.to-do-card ::-webkit-scrollbar-thumb {
	border: 10px solid var(--dark-card);
}
.to-do-card ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
	border-radius: 2rem;
	background-color: var(--grey-main);
}
.my-stack-card {
	grid-area: my-stack-card;
}
.my-stack-card div {
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.my-stack-card div ul {
	margin-top: 21px;
	list-style-type: none;
	border-radius: 0.5rem;
	display: flex;
	overflow-x: scroll;
	justify-content: flex-start;
	gap: 24px;
	width: 100%;
	padding: 6px 32px;
}
.my-stack-card div ul::-webkit-scrollbar {
	height: 5px;
	border: 2px solid transparent;
}
.my-stack-card div ul::-webkit-scrollbar-thumb {
	width: 10px;
}
.my-stack-card div ul li img {
	width: 42px;
	border: 1px solid rgb(31, 31, 31);

	border-radius: 8px !important;
}
.github-card {
	grid-area: github-card;
}
.github-card div {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.art-card {
	grid-area: art-card;
}
a i {
	font-size: 16px !important;
}
.footer-text {
	font-weight: 600;
	color: var(--grey-main);
}
.footer-text:hover {
	transition: 0.3s ease-in-out;
	color: var(--red-main);
	cursor: default;
}
.basic {
	width: 280px;
	height: 300px;
}
.large-horizontal {
	width: 580px;
}
.large-vertical {
	height: 620px;
}
* {
	text-align: center;
	border-radius: 32px !important;
}
.discord-card div h3,
.discord-card div p {
	text-align: left;
}
.profile-card img {
	border-radius: 50% !important;
}
.profile-card .emoji {
	position: relative;
	top: 2px;
	height: 18px !important;
	width: 18px !important;
}
.to-do-card ul li,
.product-card ul li {
	border-radius: 1.3rem !important;
}

.my-stack-card ul {
	background-color: var(--dark-background);
}
.my-stack-card ul,
.to-do-card .to-do-container li {
	border-radius: 0.5rem !important;
}
.to-do-card .to-do-container {
	border-radius: 1rem !important;
}