:root {
	--color-primary: #ff5252;
	--color-second: royalblue;

	--color-dark: #2c2c54;
	--color-light: #fff;

	--font-text: 'Poppins', sans-serif;
	--font-head: 'Ubuntu', sans-serif;

	/* for light theme, inverse for dark theme */
	--color-background: var(--color-light);
	--color-text: var(--color-dark);

	--color-para: #84817a;
}

/* --------------------------
    DARK THEME
 ---------------------------- */
.dark-theme,
.dark-theme * {
	--color-background: var(--color-dark);
	--color-text: var(--color-light);

	--color-para: #d1ccc0;
	animation: theme-anime 300ms;
}

@keyframes theme-anime {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* --------------------------
    SYSTEM PREFER THEME
 ---------------------------- */
@media (prefers-color-scheme: dark) {
	.dark-theme {
		--color-background: var(--color-dark);
		--color-text: var(--color-light);
	}
}

/* --------------------------
   CUSTOM SCROLLBAR
 ---------------------------- */

/* width */
::-webkit-scrollbar {
	width: 0.4rem;
}

/* Track */
::-webkit-scrollbar-track {
	background: var(--color-light);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--color-dark);
	border-radius: 1rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--color-dark);
}

/* --------------------------
    MODERN CSS RESET 
 ---------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------
    UTILIY CLASSES
 ---------------------------- */

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.strong {
	font-size: 1.7rem;
	font-weight: 700;
}

/* --------------------------
    TYPOGRAPHY
 ---------------------------- */
html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

body {
	font-size: 1.6rem; /* 16px standard */
	font-family: var(--font-text);

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

h1 {
	font-size: 4.6rem;
}

h2 {
	font-size: 3.8rem;
}

h3 {
	font-size: 2.8rem;
}

h4 {
	font-size: 2.4rem;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
}

p {
	font-family: var(--font-text);
	color: var(--color-para);
	line-height: 1.6;
	max-width: 80rem;
}

ul {
	list-style: none;
}

a {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	opacity: 0.8;
}

a.active {
	color: var(--color-primary);
	pointer-events: none;
}

button {
	outline: none;
	border: none;
	cursor: pointer;
}

i {
	font-size: 2rem;
}

button:hover {
	opacity: 0.9;
}
button:active {
	transform: scale(98%, 98%);
}

.section-title::before {
	content: '';
	position: absolute;
	width: 3rem;
	bottom: 0;
	right: 0;
	z-index: -1;
	height: 0.2rem;
	background: var(--color-primary);
}

.section-title {
	font-size: 4rem;
	display: inline-block;
	line-height: 1;
	font-variant: capitalize;
	letter-spacing: 0.3rem;
	position: relative;
}

/* --------------------------
  HEADER
 ---------------------------- */

.header {
	background: var(--color-background);
	position: sticky;
	top: 0;
	z-index: 999;
}

.logo {
	font-family: var(--font-head);
	font-size: 4rem;
	font-weight: 700;
	color: var(--color-text);
}

ul.nav-list {
	display: flex;
}

ul li a {
	font-size: 1.4rem;
	text-transform: uppercase;
	margin: 0 1.4rem;
	letter-spacing: 0.2rem;
	font-weight: 500;
}

.icons {
	background: transparent;
	color: var(--color-text);
}

.hidden {
	display: none;
}

/* --------------------------
  MAIN
 ---------------------------- */

.main {
	margin-top: 7rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-lefside h1 {
	line-height: 1.1;
	margin-bottom: 2rem;
}

.accent {
	color: var(--color-primary);
}

.hero-lefside {
	max-width: 50rem;
}

.hero-lefside p {
	margin: 4rem 0;
}

.hero-rightside img {
	max-width: 70rem;
}

.btn {
	padding: 1rem 2rem;
	text-transform: uppercase;

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

	border-radius: 1rem;
	box-shadow: 0 0.1rem 1rem 0 var(--color-background);
}

/* --------------------------
  ARTICLES
 ---------------------------- */
section {
	margin: 8rem auto;
}

.articles {
	background: var(--color-primary);
}

.articles-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5rem 0;

	color: var(--color-light);

	position: relative;
	margin-bottom: 24rem;
}

.articles-container .btn {
	box-shadow: unset;
	background-color: var(--color-light);
	color: var(--color-dark);
}

.articles-intro {
	max-width: 30rem;
}

.articles-intro p {
	color: var(--color-light);
	margin: 2rem 0;
}

.articles-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	position: absolute;
	max-width: 70%;
	right: 0;
	top: 10%;
}

.card {
	background: var(--color-text);
	color: var(--color-background);
	padding: 2rem 1rem;
	margin: 0 0 1rem 1rem;
	border-radius: 1rem;
}

.card:hover {
	opacity: 0.9;
}

.card .title {
	margin: 0;
	margin-bottom: 1rem;
	font-weight: 700;
}

.card p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-background);
}

.card i {
	color: #fff;
	border-radius: 50%;
	font-size: 1.6rem;
	padding: 1rem;
	text-align: center;
	margin-bottom: 1rem;
}

/* styling icons background colorful  */
.card:nth-child(1) i {
	background: rgb(247, 190, 69);
}
.card:nth-child(2) i {
	background: rgb(0, 206, 144);
}
.card:nth-child(3) i {
	background: rgb(163, 106, 255);
}
.card:nth-child(4) i {
	background: rgb(55, 116, 248);
}
.card:nth-child(5) i {
	background: rgb(236, 40, 57);
}
.card:nth-child(6) i {
	background: rgb(253, 68, 154);
}

/* --------------------------
  SKILLS PROGRESS
 ---------------------------- */

.my-skills {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.progress-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4rem;
	margin: 2rem 0;
}

.progress-width {
	width: 30rem;
	height: 2rem;
	background: var(--color-text);
	border-radius: 1rem;
}

.progress-value {
	background: linear-gradient(to left, crimson, var(--color-primary));
	height: 100%;
	width: 0%;
	border-radius: 1rem;
	color: var(--color-light);

	display: flex;
	justify-content: center;
	align-items: center;
}

/* --------------------------
  MY  PROJECTS
 ---------------------------- */
.my-projects {
	margin: 7rem auto;
	padding: 2rem;
	border-radius: 1rem;

	color: var(--color-background);
	background: var(--color-text);
}
.projects-placeholder {
	margin: 0 auto;
}
.projects-placeholder p {
	color: var(--color-background);
}
.my-projects h2 {
	margin-bottom: 5rem;
}

/* --------------------------
  PORTFOLIO
 ---------------------------- */

.portfolio {
	margin: 10rem 0;
	background: linear-gradient(
		45deg,
		crimson,
		rgb(238, 42, 81),
		var(--color-primary)
	);
	position: relative;
}

.portfolio__wrapper {
	display: flex;
	/* grid-template-columns: 40% 60%; */
	align-items: center;
	justify-content: space-between;
	gap: 5rem;
	color: var(--color-background);
	padding: 2rem 0;
	max-height: 105vh;
}

.portfolio i {
	margin-right: 1rem;
	vertical-align: middle;
}

.portfolio__aside {
	background: var(--color-text);
	color: var(--color-background);
	max-width: 40rem;
	max-height: 130vh;
	padding: 2rem;
	border-radius: 1rem;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.portfolio__aside i,
.portfolio__aside p,
.portfolio__aside a {
	color: var(--color-background);
}

.portfolio__aside p {
	text-align: center;
}

.portfolio__aside h2 {
	margin: 2rem 0;
}

.portfolio__aside img {
	max-width: 20rem;
}

.porfolio__social-links__container__social-icons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.portfolio__rightside__personal-details {
	display: flex;
	justify-content: space-between;
}

.portfolio__rightside__personal-details p,
.portfolio__rightside__education-details p,
.portfolio__rightside__experience-details p {
	color: var(--color-background);
}

.portfolio__rightside__personal-details__intro .myname {
	font-family: var(--font-head);
	font-size: 5rem;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	line-height: 0.8;
	font-weight: 900;
	margin-bottom: 1rem;
}

.accent-dark {
	color: var(--color-text);
}

.portfolio__rightside__personal-details__intro .job {
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 0.9rem;
}
.portfolio__rightside__personal-details__address p {
	margin-bottom: 1rem;
}

.subtitle {
	font-size: 2.5rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3rem;
	margin: 2rem 0;
}

.college,
.work {
	display: grid;
	grid-template-columns: 40% 60%;
	margin-bottom: 2rem;
}

/* --------------------------
  FOOTER
 ---------------------------- */

.footer {
	background: #141436;
	padding-top: 4rem;
}

.footer p,
.footer i,
.footer input,
.footer a,
.footer li {
	color: var(--color-light);
}

.footer__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer__message-me .logo {
	font-size: 2rem;
}

.footer__message-me p {
	max-width: 30rem;
	font-size: 1rem;
	margin: 2rem 0;
}

.footer__message-me input {
	background: var(--color-light);
	border: none;
	outline: none;
	color: var(--color-dark);
	padding: 0.4rem 1rem;
	border-radius: 0.5rem 0 0 0.5rem;
}
.footer__message-me button {
	background: var(--color-primary);
	padding: 0.4rem 1rem;
	border-radius: 0 0.5rem 0.5rem 0;
}

.footer__permalinks-nav {
	flex-direction: column;
}

.footer__copyright {
	display: flex;
	justify-content: center;
	margin-top: 5rem;
	background: var(--color-background);
}

.footer__copyright p {
	font-size: 1.4rem;
	color: var(--color-text);
}

/* 
 *
 *
				MEDIA QUERIES
 *	
 *
 */

/* ========================================================================
 		MEDIA QUERIES
   =======================================================================*/

/* for smartphones and small devices  */
@media (max-width: 768px) {
	/* utility classes  */
	.container {
		padding: 0 1.5rem;
	}

	.wrapper {
		flex-direction: column;
	}

	i {
		font-size: 3rem;
	}
	/* header  */

	.header__nav-container {
		display: flex;
		flex-direction: row;
	}

	#open-menu {
		display: inline-block;
	}

	nav {
		display: none;
		transition: width 1000ms ease;
	}

	.nav-list {
		flex-direction: column;
		gap: 4rem;
		text-align: right;

		background: var(--color-background);
		padding: 6rem 3rem 5rem 10rem;
		height: 100vh;

		box-shadow: 0 1rem 0.5rem 0 var(--color-text);
	}
	/* hero section  */
	.main {
		margin: 4rem 0;
		flex-direction: column;
		text-align: left;
	}

	.hero-rightside img {
		display: none;
	}

	/* article section  */
	.articles-container {
		flex-direction: column;
		gap: 40px;
		margin-bottom: 0;
	}
	.articles-cards {
		position: static;
		display: block;
		max-width: 100%;
	}

	/* skills progress  */
	.my-skills {
		flex-direction: column;
	}
	.progress-card {
		flex-direction: column;
		gap: 0;
	}

	/* my projects  */
	.section-title {
		padding-top: 2rem;
	}

	/* portfolio section  */

	.portfolio__rightside {
		display: none;
		position: static;
	}

	/* footer  */
	.footer__wrapper {
		text-align: center;
		flex-direction: column;
	}

	.footer__permalinks {
		display: none;
	}

	.footer__terms-conditions ul {
		text-align: center;
		padding: 0;
	}

	.footer__message-me input {
		width: 51%;
	}

	.footer__copyright {
		text-align: center;
	}
}

/* for tablets and small laptops  */
@media (max-width: 1080px) {
	.container {
		padding: 0 2rem;
	}

	.hero-lefside {
		max-width: 500px;
	}

	.hero-rightside img {
		max-width: 100%;
	}
}