:root {

   font-family: 'lobster';
   font-size: 20px;
   background: #3c1515; background-image: url('https://i.pinimg.com/736x/91/1f/86/911f86940736d6a35f48040af42a9541.jpg'); background-repeat: repeat;
   color: #D2A476;
   margin: 0;
   width: 100%;
}

a {
  color: #FDF5C9;
  text-decoration: none;
}

.content-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 1em 0;
  box-sizing: border-box;
}

header {
  background: transparent;
  padding: 1em;
  text-align: center;
}

nav {
  background: #160F07;
  text-align: center;
  padding: 0.5em;
}

nav a {
  color: #D2A476;
  text-decoration: none;
  margin: 0 0.5em;
}

footer {
  color: #FFFFFF;
  background: transparent;
  padding: 1em;
  text-align: center;
}

.layout {
  display: flex;
  gap: 1em;
  box-sizing: border-box;
  justify-content: center;  /* <-- center the columns horizontally */
  max-width: 100%;          /* ensure it fits inside .content-wrap */
}

aside, main {
  padding: 20px;
  border: px solid #ccc;
  min-height: 350px;
  box-sizing: border-box;
  
 }
    #avatar {margin: 1 1em;}
    #bio {width: 70%;}
    #sidebar ul {   
        margin: 0 1em;
        display: flex;
        flex-wrap: wrap;
        line-height: 2em;
        padding-left: 0;
}
.left  { 
  flex: 0 0 30%; background: linear-gradient(180deg, #1E1209, #3D2412); 
  flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
}

.main  { 
  flex: 0 0 80%; background: linear-gradient(180deg, #1E1209, #3D2412);
  flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
}
.right { 
  flex: 0 0 30%; background: linear-gradient(180deg, #1E1209, #3D2412);
  flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-top: 2em;
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .left, .main, .right {
    flex: 1 1 100%;
  }
}