@import url('https://fonts.cdnfonts.com/css/luminari');

 /* normal default zero settings */
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

body {
	background: black;
}

.home-button{
	box-shadow: 0px 0px 50px 33px rgb(13, 255, 0);
	background-image: url("../assets/console.png");
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
}

.home-button p{
	display: inline-block;
	box-shadow: 0px 0px 50px 13px rgb(10, 169, 1);
	color: rgb(51, 255, 0);
	margin: 2%;
	border: 10px solid rgb(0, 255, 106);
	padding: 30px;

	font-size: 80px;
}

.home-button span{
	color: limegreen;
}

/* since this is a div, this rule will apply everything inside the div */
.buttons{
	float: right;
	font-family: 'Luminari', serif;
	font-size: 20px;
}


.buttons span{	
	display: inline-block;
	border: 10px solid rgb(13, 255, 0);
	border-radius: 20px;
	padding: 30px;
	background-color: black;
	color: rgb(68, 255, 0);
}

.buttons span:hover{
	border: 10px solid indigo;
	border-radius: 20px;
	color: indigo;
	background-color: rgb(187, 255, 0);
}

.projects{
	margin: 5% 35% 5% 35%;
}


.projects h1{
	color: yellow;
	background-color: black;
	border: 10px solid yellowgreen;
	border-radius: 10px;
	box-shadow: 0px 0px 50px 13px yellow;
	padding: 5%;
}


.projects-content div{
	display: inline-block;
	background-color: black;
	
	margin: 0% 1% 1% 5%;
	border: 10px solid yellowgreen;
	box-shadow: 0px 0px 10px 5px yellow;
	padding: 20px;
	width: 400px;
	height: 400px;
}

.projects-content p{
	color:rgb(255, 255, 255);
	font-size: 30px;
	padding-left: 15%;
}

.projects-content img{
	width: 400px;
	height: 200px;
}

.projects-content span{
	display: block;
	font-size: 30px;
	color: white;
}

@media (max-width: 1000px){
	.home-button p {
		margin: 0%;
		padding: 0%;
		width: 94%;
		font-size: 60px;

	}

	.buttons {
		float: none;
		width: 85%;
		margin-left: 3%;
	}

	.buttons a{
		display: block;
	}
	
	.buttons span{	
		width: 88%;
		position: relative;
		border: 5px solid yellowgreen;
		border-radius: 0%;
		text-align: center;
	}

	.buttons span:hover{
		border: 5px solid indigo;

	}
	


	.projects{
		margin-left: 3%;
		width: 94%;

	}

	.projects h1 {
		font-size: 20px;
	}

	.projects-content {
		margin: 0%;
		width: 90%;
	}

	.projects-content div{
		width: 80%;
	}

	.projects-content img {
		width: 200px;
		height: 100px;
	}
	
}


canvas{
	position: absolute;
	z-index: -1;
}