@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Numans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');


:root {
	--links-font-family: 'Numans', sans-serif;
	--main-font-family: 'Rubik', sans-serif;
	--black-color: #000521;
	--white-color: #fff;
}


.dark {
	--primary-color: #030B34;
	--secondary-color: #0D035C;
	--tertiary-color: #1730A4;
	--tertiary-color-hover: rgb(18, 37, 117);
	--accent-color: #00D5D0;
	--accent-color-light: #00FFF9;
	--header-text-color: #e7e7e7;
	--primary-text-color: #A2A1AE;
	--border-color: #606060;
}

* {
	margin: 0;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: var(--main-font-family);
	background: var(--primary-color);
	color: var(--primary-text-color);
	scroll-behavior: smooth;
	overflow-x: hidden;
}

h1 {
	color: var(--header-text-color);
	margin-bottom: 10px;
	font-size: 60px;
	transition: 1s;
	position: relative;
	display: inline-block;
	font-family: var(--links-font-family);
}

h1.greeting {
	animation: 1s slideIn ease-in;
}

@keyframes slideIn {
	0% { left: -100px; opacity: 0; transform: rotate(-10deg); }
	80% { left: 10px; transform: rotate(0); }
	90% { left: -5px; }
	100% { left: 0px; opacity: 1; transform: rotate(0deg); }
}

h2 {
	color: var(--header-text-color);
	font-size: 40px;
	margin-bottom: 20px;
}


p {
	font-size: 22px;
	line-height: 150%;
	margin-bottom: 20px;
	transition: all 0s, color 1s;
}

a {
	text-decoration: none;
	color: var(--accent-color-light);
	position: relative;
	cursor: default;
	font-family: var(--links-font-family);
}

a span {
	transition: letter-spacing 0.3s;
}

a span:hover {
	border-bottom: 2px solid var(--accent-color);
	color: var(--accent-color);
	cursor: pointer;
	letter-spacing: 1px;
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}

.top img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.3s;
}

.top img:hover {
	transform: scale(1.1);
}

.construction {
	border-radius: 8px;
	background: var(--secondary-color);
	border: 1px solid var(--border-color);
	padding: 5px 8px;
	font-size: 16px;
	margin-bottom: 0;
	z-index: 2;
}

.construction span {
	font-size: 16px;
}

.top nav span {
	color: var(--accent-color-light);
	font-size: 22px;
}

.top nav a:hover span {
	color: var(--accent-color);
}


.top .smile-container {
	width: 100px;
	height: 30px;
	display: flex;
	justify-content: right;
	align-items: center;
}

.top .smile-container .smile {
	font-size: 22px;
}

.top .smile-container:hover .smile {
	animation: t 1s;
	display: inline-block;
}

@keyframes t {
	0% { transform: rotate(0); }
	100% { transform: rotate(720deg); }
}

.home {
	/* width: 30%; */
	padding: 200px 10px 10px 10px;
	height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.svg {
	/* position: absolute; */
	display: flex;
	flex-direction: column;
	right: -50px;
	align-items: flex-end;
	bottom: 100px;
	margin-left: auto;
	margin-right: -100px;
	margin: -300px -100px 0 auto;
	z-index: -1;
}

.blob {
	opacity: 0.8;
	filter: blur(20px);
	position: relative;
}

.one {
	clip-path: path("M257.118 414.076C234.388 453.899 181.34 473.666 149.791 447.247C118.242 420.828 108.211 348.134 100.541 304.307C92.7913 260.458 87.4646 245.584 64.5988 214.853C41.733 184.122 1.38934 137.643 0.186103 93.6585C-1.01714 49.6743 36.839 8.16398 78.9937 1.41808C121.168 -5.41556 167.661 22.4275 201.098 53.4317C234.534 84.4358 255.097 118.556 263.575 152.655C271.972 186.732 268.445 220.831 270.374 267.701C272.383 314.592 279.909 374.362 257.118 414.076Z");
}

.home .one {
	animation: pop1 6s;
}

@keyframes pop1 {
	0% { margin-right: -300px; top: 100px;}
	30% { margin-right: 0; top: 0; }
}

.two {
	margin-top: -300px;
	z-index: -2;
	margin-right: 100px;
	clip-path: path("M213.919 382.154C175.801 369.583 142.314 287.46 104.579 251.431C66.8286 215.507 24.968 225.941 8.77312 209.463C-7.338 193.013 2.21655 149.651 21.8268 107.203C41.5362 64.6784 71.3165 22.9642 119.567 7.32209C167.902 -8.29235 234.706 2.16545 274.087 52.0575C313.468 101.95 325.425 191.276 310.147 264.524C294.786 337.743 252.037 394.725 213.919 382.154Z");
}

.home .two {
	animation: pop2 4s;
}

@keyframes pop2 {
	0% { margin-right: -300px; }
	60% { margin-right: 100px; }
}

.three {
	margin-top: -260px;
	z-index: -3;
	clip-path: path("M246.798 68.1503C287.903 85.3064 320.858 76.5834 362.829 91.3068C404.729 105.932 455.718 143.949 483.914 197.388C512.04 250.729 517.446 319.437 483.581 338.28C449.645 357.024 376.368 325.804 324.269 317.867C272.098 309.832 241.102 325.232 204.513 317.992C167.994 310.85 125.879 281.221 83.0359 233.661C40.2632 186.199 -3.38355 120.762 0.58066 72.9891C4.47028 25.271 55.9708 -4.78212 106.277 1.61046C156.584 8.00305 205.693 50.9942 246.798 68.1503Z");
}

.home .three {
	animation: pop3 2s;
}

@keyframes pop3 {
	0% { margin-right: -600px; bottom: 100px; }
	100% { margin-right: 0; bottom: 0; }
}


.about {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 70px;
}

.about .text, .about .quote {
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: center;
}

.about .quote {
	align-items: center;
}

.about .text .blob.two {
	transform: rotate(-110deg);
	left: -200px;
	top: 300px;
}

.about .quote .inner {
	/* margin-top: -200px; */
	width: 600px;
	padding: 120px 100px 100px 100px;
	height: 300px;
	/* z-index: 1; */
	cursor: pointer;
	background-image: url("quote.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: 0.3s;
	color: var(--header-text-color);
}

.about .quote .inner:hover {
	transform: scale(1.03);
}

.about .quote .inner:active {
	transform: scale(1);
}

.about .quote .inner p.sentence {
	font-size: 18px;
}

.stuff {
	padding: 50px;
}

.stuff h1 {
	margin-bottom: 200px;
}

.stuff .project {
	display: flex;
	gap: 50px;
	margin-bottom: 300px;
}

.stuff .project .text {
	position: sticky;	
	top: 200px;
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* align-items: center; */
}

.stuff .project .text a button {
	padding: 5px 22px;
	font-family: var(--links-font-family);
	color: var(--header-text-color);
	border-radius: 4px;
	background: var(--tertiary-color);
	font-size: 22px;
	border: none;
	margin-bottom: 20px;
	cursor: pointer;
	transition: 0.2s;
}

.stuff .project .text a button:hover {
	background: var(--tertiary-color-hover);
}

.stuff .project .text a button.accent {
	color: var(--primary-color);
	background: var(--accent-color-light);
}

.stuff .project .text a button.accent:hover {
	background: var(--accent-color);
}

.stuff .project .images {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 50%;
}

.stuff .project .images .big {
	width: 100%
}

.stuff .project .images .inner {
	display: flex;
	/* gap: 50px; */
	justify-content: space-between;
}

.stuff .project .images .inner .small {
	/* width: 50%; */
	max-width: 47%;
}

footer {
	height: 50vh;
	width: 100%;
	background: linear-gradient(180deg, #030B34 10%, rgb(45 63 156 / 50%) 100%);
	text-align: center;
	position: relative;
}

footer .icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

footer .icons a svg, footer .icons a svg {
	fill: var(--accent-color-light);
	cursor: pointer;
	transition: 0.3s;
}

footer .icons a svg:hover, footer .icons a svg:hover {
	fill: var(--accent-color);
	transform: scale(1.1);
}

footer .icons a ion-icon {
	font-size: 40px;
	cursor: pointer;
	transition: 0.3s;
}

footer .icons a ion-icon:hover {
	color: var(--accent-color);
	transform: scale(1.1);
}


footer .bottom {
	display: flex;
	/* gap: 10px; */
	align-items: center;
	justify-content: space-between;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 10px;
}

footer .bottom > * {
	font-size: 15px;
	margin: 0;
}

footer .bottom p {
	font-size: 15px;
	margin: 0;
}

footer .bottom .copyright, footer .bottom .source  {
	display: flex;
	align-items: center;
	gap: 10px;
}


::selection {
	/* color:; */
	background: var(--accent-color-light);
	color: var(--primary-color);
}