body {
	background: linear-gradient(-45deg, #000000, #383838, #6a6b6b, #d7d8d8);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


#all-contents {
    max-width: 800px;
    margin: auto;
}

nav {
    background: rgb(32, 32, 32);
    margin: 0 auto;
    display: flex;
    padding: 8px;
}

h1 {
    display: flex;
    align-items: center;
    color: rgb(204, 204, 204);
    flex: 1;
    margin: 0;
}

#nav-ul {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    display: flex;
    color:#d7d8d8
}

.nav-li {
    display: inline-block;
    padding: 0 10px;
    color:#d7d8d8
}

a {
    text-decoration: none;
    color: rgb(204, 204, 204);
}

main {
    background: rgb(32,32,32);
    display: flex;
    margin-top: 25px;
}

.sidebar {
    margin-right: 25px;
    padding: 10px;
}

.sidebar-img {
    width: 300px;
}

.content {
    flex: 1;
    padding: 20px;
}

#interests {
    border: 20px rgb(255, 255, 255) ridge;
    padding: 10px;
    margin-top: 20px;
}

h2, h3 {
    margin: 5px;
    color:#d7d8d8
}

p {
    color:#d7d8d8
}

ul {
    color:#d7d8d8
}

/* Portfolio styles */
.content h1 {
  color: rgb(255, 255, 255);
}

#portfolio {
  list-style-type: none;
  padding-left: 0;
}

#portfolio li {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

#portfolio li:hover {
  background: #4e4d4d;
}

#portfolio a {
  text-decoration: none;
  color: #000000;
}