/* basic boilerplate styling */

:root {
	--color-background: #161a2b;
	--color-primary: #d1036f;
	--color-secondary: #df4a1f;
	--color-accent: #0090ca;
	--gradient-primary: linear-gradient(91.78deg, #e7017a 2.57%, #df4a1f 96.33%);
	--gradient-accent: linear-gradient(101.87deg, #0090ca 0%, #00bfad 105.55%), linear-gradient(180deg, #009ddc 0%, #58fcec 100%);
	--gradient-temp: linear-gradient(91.78deg, #e7017a 2.57%, var(--color-accent) 96.33%);
	--gradient-temp-light: linear-gradient(91.78deg, #e7017c60 2.57%, #0090ca60 96.33%);
}

div.image:hover{
	cursor:pointer;
}

body {
	background-color: var(--color-background);
	color: white;
	margin: 0;
	font-family: sans-serif;

	/* added later for making nav drop down overlay */
	/* margin-top: 5rem; */
}

header{
	/* added later for making nav drop down overlay */

	position: absolute;
	top: 0px;
	background-color: inherit;
	z-index: 100000;
	width: 100%;

	box-shadow: 5px 5px 50px 50px transparent;
	transition: box-shadow 0.3s;

}

header[expanded="true"] {
	box-shadow: 5px 5px 150px 70px black;
}

header *{
	z-index: 10000;
}


.em{
	font-family: cursive;
	margin-inline: 0.2rem;
	border-bottom: 1px solid white;
}

.logo-footer{
	margin-inline: 0.2rem;
	border-bottom: 1px solid white;
	font-family: serif;
}

hr {
	width: 70%;
	opacity: 40%;
	border-bottom: none;
	border-color: rgb(255, 255, 255);
}

main {
	min-height: 50vh;
}

h1 {
	font-size: 2.5rem;
	text-align: center;
}

.gradient-text {
	background-image: var(--gradient-temp);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	font-family: cursive;
	padding-inline: 5px;
	border-bottom: 1px solid white;
}

.project-display {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin: 4rem 1rem;
}

/* ---------------------------------------------------------------- */

.card{
	width: 16rem;
	padding: 3rem 3rem 3rem 0;
	margin: 0 2rem 2rem 0;
}
.title{
	position: absolute;
	z-index: 11;

	margin: 0.5rem 2rem;
	font-size: 1.5rem;
	font-weight: 100;
	font-family: serif;

	transition: 0.3s;

	display: flex;
	align-items: center;
	gap: 2rem;
	width: max-content;

}
.container{
	width: 14rem;

	min-height: 8rem;


	background-image: var(--gradient-temp);

	box-shadow: 0 0 50px 10px black;
	border-radius: 1rem;

	padding: 1rem;

	transition: 0.3s;

	position: absolute;
	filter: blur(2rem);
	opacity: 0.6;
}

.container:hover{
	cursor: pointer;
}



.data{
	opacity: 0;
	transition: 0.3s;
}
.list{
	display:flex;
	gap:1rem;
}

.technologies>img{
	width: 1.5rem;
	z-index: 10000;

}
.actions{
	height: 2rem;
	opacity:0;
	transition: .3s;
	display:flex;
	gap: 1rem;


}
.actions[hover="true"]{
	opacity: 1;
}
.actions img{
	width: 2rem;
	height: 2rem;
	opacity: .6;
	transition: 0.3s;
	
}
.actions img:hover, .action img:focus{
	outline: none;
	opacity: 1;
	cursor: pointer;
}
.list+.list{
	margin-top: 0.5rem;
}
.data>p{
	font-size: .8rem;
	opacity: 90%;
	line-height: 1.1rem;
}
.image{
	width: 100%;

	z-index: 10;

	transform: translateX(2rem) translateY(3rem);

	transition: 0.3s
}
.image>img{
	/* aspect-ratio: 350/197; */

	width: 100%;
}

.image[hover="true"]{
	transform: translateX(9rem) translateY(7rem);
	width: 60%;
	padding: 11.1%;
}
.title[hover="true"]{
	font-size: 2rem;
	transform: translateX(-3rem) translateY(-3.5rem);
}
.container[hover="true"]{
	filter: none;
	opacity: 1;
}
.data[hover="true"]{
	opacity: 1;
}
.card:hover, .card:focus{
	padding: 3rem 5rem 5rem 0;
	margin:0;
}


@media (hover:none), (max-width:600px){

	.actions, .actions[hover="true"]{
		opacity: 1;
	}
	.project-display{
		gap: 5rem;
	}
	.card, .card:hover, .card:focus{
		margin: auto;
		padding: 3rem 0 4rem 0;
	}
	.image, .image[hover="true"]{
		transform: translateX(4rem) translateY(7rem);
		width: 70%;
		padding: 11.2%;
	}
	.title, .title[hover="true"]{
		font-size: 2rem;
		transform: translateX(-4rem) translateY(-3.5rem);
		gap: 2rem;

	}	
	.container, .container[hover="true"]{
		filter: none;
		opacity: 1;
	}
	.data, .data[hover="true"]{
		opacity: 1;
	}
}

@media (max-width:600px) {
	.title, .title[hover="true"]{
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------------- */