@media (min-width: 900px) {
	#menu-btn {
		display: none;
	}

	.navbar ul {
		display: flex;
	}

	body.dark .navbar li a:hover {
		color: #2876ff;
	}
}


@media (max-width: 900px) {

	.navbar {
		position: relative;
	}

	.navbar ul {
		background-color: #2876ff;
		display: block;
		position: absolute;
		top: 100%;
		right: 0;
		
		padding: 10px 70px;
		border-radius: 5px;
		transition: .25s;
		transform-origin: top right;
	}

	.navbar ul:not(.navbar-hide) {
		transform: scale(1);
	}

	.navbar-hide {
		transform: scale(0);
	}

	.navbar ul li {
		padding: 10px 0;
	}

	.navbar li a:hover {
		color: #ddd;
	}

	#menu-btn {
		display: block;
	}
	
	.hero .text {
		width: 100%;
	}

	.hero .greeting {
		font-size: 1.5em;
	}

	.hero .name {
		font-size: 3em;
	}

	.hero .prof {
		font-size: 1.8em;
	}

	.hero .image {
		display: none;
	}



	.portfolio .card {
		width: 100%;
	}

	.about .detail {
		width: 100%;
		margin-bottom: 70px;
	}

	.about .skills {
		width: 100%;
	}

	.contact .detail {
		width: 100%;
	}

	.contact form {
		width: 100%;
	}
}

@media (max-width: 600px) {

	.hero .greeting {
		font-size: 1em;
	}

	.hero .name {
		font-size: 2.5em;
	}

	.hero .prof {
		font-size: 1.5em;
	}

	

	.arrow {
		visibility: hidden;
	}
}