@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root{
	--dark: #61892f;
	--light: #86c232;
	--back: #222629;
	--menu: #474b4f;
	--sub: #6b6e70;
	font-family: 'Oxygen', sans-serif;
}

table{
	border-collapse: collapse;
}

body{
	color: #fff;
	background-color: var(--back);
}

a{
	font-size: 3rem;
	font-weight: 700;
}

a#text:link{
	color: #fff;
	text-decoration: none;
}

a#text:hover{
	text-decoration: underline;
}

a#text:visited{
	color: #fff;
	text-decoration: none;
}

.home{
	
}

.about{
	
}

.socials{
	
}

hr {
	border-top: 8px solid #bbb;
	border-radius: 5px;
	margin-left: 30%;
	margin-right: 30%;
	border-color: var(--dark);
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	color: var(--menu);
	text-align: center;
}

p.info{
	font-size: 1.5rem;
}

p#homeAboutText{
	padding-left: 20%;
	padding-right: 20%;
}

/* Style the links inside the sidenav */

#mySidenav a {
	position: absolute; /* Position them relative to the browser window */
	left: -85px; /* Position them outside of the screen */
	transition: 0.3s; /* Add transition on hover */
	padding: 15px; /* 15px padding */
	width: 100px; /* Set a specific width */
	text-decoration: none; /* Remove underline */
	font-size: 20px; /* Increase font size */
	color: white; /* White text color */
	border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
	left: 0; /* On mouse-over, make the elements appear as they should */
}

#home {
	top: 20px;
	background-color: var(--light);
}

#about {
	top: 80px;
	background-color: #2196F3; /* Blue */
}

#socials {
	top: 140px;
	background-color: #f44336; /* Red */
}

#games {
	top: 200px;
	background-color: var(--sub);
}

p#broken {
	color: yellow;
	font-weight: 700;
}