#wrapper {
    width: 100%;
    height: 100vh;
}

#wrapper div {
    position: relative;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    overflow-y: hidden;
}

.text-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    padding: 0 150px;
}

.text-content h1 {
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    font-family: 'Catamaran', sans-serif;
    letter-spacing: 5px;
}

.text-content p {
    font-family: 'Rubik', sans-serif;
    line-height: 35px;
    color: #fff;
}

ul {
position: fixed;
top: 10%;
right: 15px;
transform: translateY(50%);
margin: 0;
padding: 0;
z-index: 1;
}

ul li {
list-style: none;
}

ul li a {
display: block;
text-decoration: none;
height: 45px;
font-size: 24px;
background: #fff;
width: 55px;
color: #262626;
margin: 4px 0;
padding-left: 15px;
line-height: 45px;
}

ul li a:hover {
background: #333;
text-decoration: none;
color: #fff;
}

#home {
background-image: url(1.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
}

#about {
background-color: #494949;
}

#projects {
background-color: #999999;
}

#resume {
background-color: #6C6C6C;
}

#contact {
background-color: #292929;
}