/* css minifcation */


/* 320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV */


/* desktop   */
@media screen and (max-width: 600px) and (min-width:480px) {
  ul#navbar {
    width: 20%;
  }


  #social-links {

    flex-direction: column;
  }

  #social-links i {
    margin-top: 50px;
  }

}

/* mobile  */

@media all and (max-width: 480px) and (min-width:320px) {
  ul#navbar {
    width: 117px !important;

  }

  ul#navbar>li {

    padding: 2px !important;
    height: 58px !important;
  }

  #social-links {

    flex-direction: column !important;
  }

  #social-links i {
    margin-top: 50px;
  }



}



ul#navbar {
  font-family: 'Ubuntu';
  list-style-type: none;
  padding-top: 20px;
  padding-right: 50px;
  margin: 0;
  width: 200px;
  background-color: #f1f1f1;
  min-height: 100vh;



}



a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
  padding: inherit;
  border-radius: 25px;

}


.fa-solid {
  color: #000;
  margin-right: 20px;
  /* text-decoration: underline; */

}


body {
  margin: 0 auto;
}

ul#navbar>li {

  padding: 12px;
  height: 58px;
}

/* li {
  background-color: red;
} */

ul#navbar>li :hover {
  background-color: coral;
}



#container {
  display: flex;
  /* flex-flow: row wrap; */
  /* flex: 2 0px; */
  flex-direction: row;

}

#right-section {
  flex: auto;
}


#home-container {
  text-align: center;
  flex-direction: column;
}

#profile-pic {
  border-radius: 25px;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;

}

/* #social-links {
  margin-top: 20px;
  flex-direction: row;
} */

#header {
  width: 100%;
  background-color: red;
  height: 20px;
}