body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   background: linear-gradient(135deg, #000000, #111111);
   color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 
 header {
   text-align: center;
   padding: 20px 0;
 }
 
 nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 nav ul li {
   display: inline;
   margin-right: 20px;
 }
 
 nav ul li:last-child {
   margin-right: 0;
 }
 
 a {
   color: #ffffff;
   text-decoration: none;
 }
 
 div {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 40%;
   padding: 20px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 10px;
 }
 
 button#avatar {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   border: none;
   background-color: #ffffff;
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
   margin-bottom: 20px;
 }
 
 h2 {
   font-size: 24px;
   margin-bottom: 20px;
 }
 
 label {
   font-size: 16px;
   margin-bottom: 10px;
 }
 
 input#avatar-color {
   margin-bottom: 20px;
 }
 
 p {
   font-size: 14px;
   margin: 0;
 }
 
 /* Media query for smaller screens */
 @media screen and (max-width: 768px) {
   div {
     width: 80%;
   }
 }