Personal Website problems

HTML

<html>
<head>
	<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<title>home</title>
</head>
<div data-viewport-height="100" class = "main">

	<div class="bgImage">
		<div class="blocks" id="topBlock"></div>
		<div class="blocks" id="bottomBlock"></div>
		<div id="mainContent">
			
			<div id="blackWrapper">
					<h1>Cristiano Firmani</h1>
					<nav class="main-nav">
						<ul>
							<li><a  href="#about">ABOUT</a></li>
							<li><a  href="#software">SOFTWARE</a></li>
							<li><a  href="#photography">PHOTOGRAPHY</a></li>
							<li><a  target="#youtube" href="">YOUTUBE</a></li>
							<li><a  href="#contact">CONTACT</a></li>
							<li><a  href="#support">SHOP</a></li>
						</ul>
					</nav>
				
			</div>
		</div>
		
	</div>
	
</div>
<body>
</body>
</html>

CSS

@charset "utf-8";

.main{
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.bgImage{
	background-image:url("pics/bg.jpg");
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
	height:100%;
}
.blocks{
	height:50%;
}
#topBlock{
	background-color:#4D606E;
	opacity:80%;
}
#bottomBlock{
	background-color:#D3D4D8;
	opacity:80%;
}
#mainContent{
	height:70%;
	width:60%;
	top:15%;
	left:20%;
	position:absolute;
	background-image:url("pics/bgCropped.jpg");
	background-size: cover;
	background-position: center;
    background-repeat: no-repeat;
}
#blackWrapper{
	background-color:#121212;
	width:100%;
	height:100%;
	opacity:95%;
	text-align: center;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

h1{
	font-family: 'Consuela Script';
	font-size:26px;
	color:#3FBAC2;
	margin:0;
	padding:0;
  position: absolute;
  top: 0;
	
} 
.main-nav{
	
}
.main-nav ul{
	margin:0;
	padding:0;
	text-align:center;
}
.main-nav ul li{
	display:inline-block;
}

.main-nav ul li a{
	text-decoration: none;
	color:#3FBAC2;
	font-size:2vw;
	font-family: 'Norwester';
}
.main-nav ul li::before{
	content:'|';
	padding:0 12px 0 9px;
	font-size:2.3vw;
	font-family: 'Jason Statan';
	color:#3FBAC2;
}
.main-nav ul li:first-child::before{
	display: none;
}




@font-face {
    font-family: 'rotters';
    src: url("fonts/Rotters.woff2")format('woff2');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Consuela Script';
    src: url('fonts/ConsuelaScriptRegular.woff2') format('woff2'),
        url('fonts/ConsuelaScriptRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Norwester';
    src: url('fonts/Norwester-Regular.woff2') format('woff2'),
        url('fonts/Norwester-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Jason Statan';
    src:...