body { 
    background: #7f38f3;
    color: #000000;
    padding: 10px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
#all-contents {
max-width: 800px;
margin: auto;
}

/* navigation menu */
nav {
    background: #ffaa0b;
    margin: 0 auto;
    display: flex;
    padding: 10px;
    margin-bottom: 30px; 

}
 

h1 {

    display: flex;
    align-items: center;
    color: #5204ce;
    flex: 1;
    margin: 0;
}

#nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;

}

.nav-li {
display: incline-block;
padding: 0 10px;
}
a {
text-decoration: none;
 color: #fffdfd
}

/* main container area beneath menu*/
main { 
      background:#ffa500;
      display: flex;
      margin-top: 20px;
}

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

}

.sidebar-img {
width: 200px;
}

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

/* interest section styles */ 
#interest { 
border: 4px silver ridge; 
padding: 8px; 
margin-top: 20px; 
}

h2, h3 { 
margin: 0px; 

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

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

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

#portfolio li:hover {
  background: #74a5e9;
}

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

/* responsive web design */
@media screen and (min-width: 120px) and (max-width: 1080px) {
  main {
    height: 100ch;
    zoom: 1.5;
    display: grid;
  }

  h1 {
    color: #eee;
    font-size: 44px;
  }

  h2 {
    font-size: 42px;
  }

  h3 {
    font-size: 36px;
  }

  #all-contents {
    height: 100ch;
    margin: none;
  }

  a {
    font-size: 42px;
  }

  .sidebar {
    margin-right: 0px;
    justify-content: center;
    align-items: center;
  }

  .sidebar-img {
    width: 100%;
  }

  p,
  li {
    font-size: 24px;
  }

  .content {
    align-content: center;
    justify-content: center;
 
 }

}
/*images style*/
img{ border-radius: 50%;

}

body {
background-image: url(https://www.google.com/imgres?q=freak%20sonic&imgurl=https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1867321754848264192%2FLdss3gtN_400x400.jpg&imgrefurl=https%3A%2F%2Fx.com%2Ffreakysonic_sol&docid=nNequOq4R4uaXM&tbnid=Z32lMcy26UfmvM&vet=12ahUKEwiWgdC9r-KPAxUsJ0QIHccwMLEQM3oECCkQAA..i&w=400&h=400&hcb=2&ved=2ahUKEwiWgdC9r-KPAxUsJ0QIHccwMLEQM3oECCkQAA);


}