@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');


:root {
	--turquoise: #00C8DC;
	--blue: #5E90FF;
	--gray: #D1D1D1;
	--darkgray: #6f737b;
	--yellow: #ECF65C;
	--purple: #857ee8;
}


/* Fonts */

html {
	font-size: 14px;
}

body, input, button, label, textarea {
	font-family: Rubik, sans-serif;
	font-size: 1rem;
}

strong {
	font-weight: 600;
}

aside, h1, .fixer {
	font-family: Rubik, sans-serif;
	font-size: 2rem;
	font-weight: 500;
}


h3 {
	font-size: 1rem;
	font-weight: 500;
	margin-top: 0;
}

#name {
	opacity: 0;
	transition: all 2s;
}

#name span {
	color: var(--turquoise);
}


body {
	margin:0;
	padding:0;
	color: var(--darkgray);
}

aside {
	position: fixed;
	padding: 2rem 3rem;
	z-index:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 4rem);
	transition: border 2s;
}

aside p, h1 {
	margin-top: 0;
}

aside h1, aside li, aside div a {
	transition: all .6s;
}


.visible {
	opacity:1 !important;
}

aside ul {
	list-style-type: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap:1.5rem;
}

a {
	text-decoration: none;
}

/*ul */
a  {
	color: var(--blue);
}

li {
	position:relative;
	width: min-content;
    transform: translateX(-12rem);
	left: 0;
}

li:hover {
	transform: scale(1.1);
}

.current {
    transform: translateX(-100%) !important;
    left:100%;
}


#icons {
	display: grid;
	grid-template-rows: repeat(2,min-content);
	grid-template-columns: min-content min-content;
	gap:1rem 2rem;
	grid-auto-flow: column;
	opacity: 0;
	transition: all 2s;
}

#icons a {
	color: var(--turquoise);
	transition: all .3s;
}

ul a, #icons a {
	transition: all .3s;
}

ul a:hover, #icons a:hover {
	color:var(--yellow);
	border: none;
}


main a:not(.image-wrapper>a):hover {
	border-bottom: 2px solid var(--yellow);
}


a:active i {
	transform: scale(1.1);
}


a:visited {
	color: var(--purple);;
}


.shifted {
	transform: translateX(0);
}

main {
	padding:2rem 3rem 2rem 20rem;
	display: grid;
	grid-template-columns: 1fr;
	background-clip: border-box;
	gap:4rem;
}

main h1 {
	margin-bottom: 2.5rem;
}

#header {
	height:calc(100vh - 4rem);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	font-size: 4rem;
}


#hello	 {
	font-weight: 600;
	font-size: 1.26em;
	background:
		repeating-linear-gradient(90deg,
		var(--blue) 0 4%,
		var(--turquoise) 13% 17%,
		var(--blue) 25%
		);
    animation: animatedBackground 20s linear infinite;

	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	transition: opacity 2s ease;
	opacity: 0;
	line-height: 0.9;

}

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -731px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}


.name {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,1fr);
	color:#fff;
	font-size:2rem;
	font-family: Rubik, sans-serif;
}


.projects>div {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(32rem,1fr));
	gap:3rem;
}

.image-wrapper {
	float:left;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32rem;
	margin: 0 2rem 1rem 0;
}


.image-wrapper a:active {
	/*transform: scale(1.05);*/
	}

.projects img {
	max-width: calc(32rem - 4px);
	transition: all .1s ease-in, transform .2s ease-in;
	border-radius: 10px;
	border: 2px solid var(--turquoise);
}

.projects img:hover {
	transform: scale(1.05);
	border: 2px solid var(--yellow);
    box-shadow: 4px 4px 0px var(--gray);
}

form {
	width: 100%;
	border:2px solid var(--blue);
	padding:1rem;
	border-radius: 10px;
	box-sizing: border-box;
    box-shadow: 4px 4px 0px var(--gray);
}

input, textarea, button, #form-message {
	padding: .3rem;
	box-sizing: border-box;
	margin-bottom:1rem;
	outline:0;
}

input, textarea, label {
	font-family: "courier";
}

label, button {
	color: var(--blue);
}

input, textarea {
	width:100%;
	background-color: #fefefe;
	border-radius: 0;
	border: none;
	border-bottom:2px solid var(--gray);
}

input:hover, textarea:hover, input:focus, textarea:focus {
	border-color:var(--yellow);
}

form div {
	position:relative;
}

label {
	position: absolute;
	top:.3rem;
	left:.3rem;
	color: #8F8F8F;
}

input {
	padding-left:5rem;
}

button {
	background-color: #fefefe;
	border: none;
	border-radius: 10px;
	width:60%;
	display: block;
	margin: auto;
	text-transform: uppercase;
	color:#8F8F8F;
	color: var(--blue);
	font-weight: 600;
	border:2px solid var(--gray);
}

button:hover {
	background-color:#ECF65C;
}

button:active {
    box-shadow: inset 2px 2px 1px #D1D1D1, inset -2px -2px 1px #fff;
}

textarea {
	resize: vertical;
	border: 2px solid var(--gray);
}

#form-message {
	text-align: center;
	font-weight: 600;
}


/* MEDIA QUERIES */


@media all and (min-width: 1399px) and (max-width: 1559px) {
	.image-wrapper {
		float: none;
		margin: 0 auto 1rem auto;
	}
}


@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

/*@media all and (min-width: 480px) and (max-width: 768px) { */


@media all and (min-width: 810px) and (max-width: 970px) { 
	#header {
		font-size: 3rem;
	}

}

@media all and (min-width: 769px) and (max-width: 809px) { 
	#header {
		font-size: 2.7rem;
	}
}

@media all and (max-width: 920px) { 

	.image-wrapper {
		float: none;
		margin: 0 auto 1rem auto;
	}

	h3 {
		text-align: center;
	}

}



@media all and (max-width: 768px) { 

	aside {
	    width: calc(100vw - 6rem);
		position: sticky;
		top: 0;
		height: auto;
		flex-direction: row;
		background-color: #ffffffba;
	    backdrop-filter: blur(4px);
	    border-bottom: 2px solid var(--gray);
	    padding: 1rem 3rem;
	    opacity: 0;
	    transition: all 1s;
	}

	aside ul {
		display: none;
	}

	aside h1 {
		margin: 0;
	}

	#name {
	    transition: all 1s;
	}

	#icons {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	    transition: all 1s;
	}

	main {
		padding:2rem 3rem;

	}

	#header {
		height: calc(100vh - 3em);
	    width: calc(100vw - 6rem);
		font-size: 3rem;
	}


@media all and (max-width: 570px) {

	aside {
		gap: 1.5rem;
	}

	#icons {
		gap: 1.5rem;
	}

	#header {
		font-size: 2.3rem;
	}


@media all and (max-width: 530px) {

	.projects>div {
		grid-template-columns: repeat(auto-fit, minmax(28rem,1fr));
	}

	.image-wrapper {
		width: 28rem;
	}

	.projects img {
		max-width: calc(28rem - 4px);

}

@media all and (max-width: 480px) {

	aside {
		flex-direction: column;
		text-align: center;
		position: static;

	}

	#icons {
		grid-auto-flow: unset;
		grid-template-columns: repeat(5, 1fr);
		align-self: center;
		font-size: 1.5rem;
	}

	#header {
		height: calc(100vh - 11.6rem);
		font-size: 2rem;
	}

	.projects>div {
		grid-template-columns: repeat(auto-fit, minmax(24rem,1fr));
	}

	.image-wrapper {
		width: 24rem;
	}

	.projects img {
		max-width: calc(24rem - 4px);

}


@media all and (max-width: 410px) {
	
	#header {
		font-size: 1.5rem;
	}


	.projects>div {
		grid-template-columns: repeat(auto-fit, minmax(20rem,1fr));
	}

	.image-wrapper {
		width: 20rem;
	}

	.projects img {
		max-width: calc(20rem - 4px);

}

@media all and (max-width: 410px) {

	.projects>div {
		grid-template-columns: repeat(auto-fit, minmax(18rem,1fr));
	}

	.image-wrapper {
		width: 18rem;
	}

	.projects img {
		max-width: calc(18rem - 4px);


}