*,*::after,*::before {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: #f4f4e7;
	font-family: "Roboto", sans-serif;
}

h1 {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 30px;
	color: #000000;
	span {
	font-size: 3.5rem;
	font-weight: 500;
	color: #23258b
	}
}

.page-wrapper {
	width: min(1440px, 90%);
	margin: 0 auto;
	height: 100vw;
	padding: 20px 80px;
}

a {
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 10px 0;
	text-decoration: none;
	color: rgb(19, 3, 3);
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.6rem;
	&:visited {
		color: rgba(30, 140, 2, 0.766);
	}
	
}

.nav {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(400px, 1fr));
	gap: 20px;
	li {
		height: 200px;
		list-style: none;
		transition: all 0.3s ease-in-out;
		border-radius: 10px;
		padding: 0 5px 15px 80px;
		background-repeat: no-repeat;
		background-size: contain;
		background-size: 17%;
		background-position: 5px 5px;
		border: 1px solid black;
		box-shadow: 1px 1px 1px black;
		&:hover {
			background-color: #23258b;
			& a {
				color: #fff;
			}
		}
	}
}

.html {
	background-image: url(./../images/html.png);
}

.css {
	background-image: url(./../images/CSS.png);
}

.svg {
	background-image: url(./../images/svg-icon.webp);
}