@font-face {

  font-family: 'Roboto-Thin';
  src:  url('Roboto-Thin.ttf') format('truetype');

}

p, .top, .portfolio, .socials, .description, .subtitle, .backyellow, .backblue, .color-tilt {

	color: #0A1612;
	padding-left: 15px;
	font-family: 'Roboto-Thin';

}

.homepage {

	background-image: url('bkg4.jpg');
 	background-size: auto;
}

.top {
	
	height: auto;
	border: solid;
	border-color: #0A1612;
	border-width: 1px;
	font-size: 650%;
	margin: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.2);
	letter-spacing: 25px;

}


.portfolio, .socials, .backblue, .backyellow, .color-tilt {

	height: auto;

	padding-top: 3%;
	padding-bottom: 3%;
	text-align: center;
	font-size: 600%;
	border: solid;

	border-width: 1px;
	margin: 10px;
	border-radius: 5px;

	letter-spacing: 10px;
	
	
}

.portfolio, .backyellow {

//	float: left;
	background-color: rgba(255, 242, 1, 0.2);
	border-color: rgba(255, 242, 1, 1);

}

.socials, .backblue {

//	float:right;
	background-color: rgba(34, 225, 255, 0.2);
	border-color: rgba(34, 225, 255, 1);

}

.color-tilt {
	background-color: rgba(112, 219, 140, 0.2);
	border-color: rgba(112, 219, 140, 1);

}

.description {
	

	height: auto;
	border: solid;
	border-color: #0A1612;
	border-width: 1px;
	font-size: 300%;
	float:left;
	margin: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.2);
	letter-spacing: 3px;
	font-weight: bold;
	padding: 35px;

	
}

.description, .socials, .portfolio, .top, .color-tilt {

	backdrop-filter: blur(5px) brightness(110%);
	-webkit-backdrop-filter: blur(5px) brightness(110%);

}

.portfolio:hover, .socials:hover, .backyellow:hover, .backblue:hover, .color-tilt:hover {

	backdrop-filter: blur(5px) brightness(115%);
	-webkit-backdrop-filter: blur(5px) brightness(115%);
	border-color: white;


}

.portfolio:hover, .backyellow:hover {

	background-color: rgba(255, 242, 100, 0.2);

}

.socials:hover, .backblue:hover {

	background-color: rgba(100, 225, 255, 0.2);

}

.color-tilt:hover {

}

a:link, a:visited {

	text-decoration: none;

}

.backyellow {

	font-size: 500%;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;

}

.backblue {

	font-size: 500%;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgba(34, 225, 255, 0.2);
	border-color: rgba(34, 225, 255, 1);

}

.subtitle {

	height: auto;
	border: solid;
	border-color: #0A1612;
	text-align: center;
	border-width: 1px;
	font-size: 250%;
	margin: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.2);
	letter-spacing: 25px;
	padding-right: 15px;

}

img {
	
	float: left;
	width:100%;
	border-radius: 5px;
	height: auto;
	margin: 15px;
	loading="lazy"
}

.imglink {

	height: 200px;
	width: 200px;
	border-radius: 50px;
	margin: 55px;

}


.centeredlist {

	font-size: 75%;
	list-style-position: inside;

}

.centerimg {

	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 50%;
}