html,* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
body {
    background: #D4DBF5;
    /* background: #F2F2F2; */
}
* {
    text-decoration: none;
    list-style-type: none;
    transition: all 0.3s ease-in-out;
}
a {
  color: blue;
}

/* ############## NAVIGATION BAR ###################*/
.app_name {
    float: left;
    margin: 15px 20px auto 40px;
}
.app_name strong {
    color: #fff;
    font-size: 30px;
    padding-top: 10px;
}
.app_name strong span {
    color: royalblue;
}
ul {
    list-style-type: none;
}


/* Style the navigation bar */
.navbar {
    margin: auto;
    width: 100%;
    height: 70px;
    background-color: darkslategray;
    overflow: auto;
    position: fixed;
    top: 0px;
}
  
  /* Navbar links */
  .navbar a {
    /* float: left; */
    text-align: center;
    padding: 25px 12px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 17px;
    float: none;
    position: sticky;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Navbar links on mouse-over */
  .navbar a:hover {
    color: royalblue;
    font-weight: bold;
    /* background: #efc; */
  }
  /* Current/active navbar link */
  .active {
    background-color: #4CAF50;
    color: #fff;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) and (min-width: 360px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
  footer {
    height: auto;
    min-height: 250px;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }
  .navbar {
    height: auto;
    width: 100%;
  }
  html, * {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) and (min-width: 360px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar {
    height: auto;
  }
}

  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #aaa;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  /* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

/* ##### Button post ######## */

.newPost {
  padding-top: 0.8em;
}
.newPost button {
  border: none;
  width: 100px;
  background: #00A8A6;
  color: #fff;
  font-weight: bolder;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  border-radius: 15px;
  cursor: pointer;
  /* margin: 10px auto; */
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 70%;
  display: block;
}
.newPost button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.newPost button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.newPost button:hover span {
  padding-right: 25px;
}

.newPost button:hover span:after {
  opacity: 1;
  right: 0;
}
.newPost button span a {
  color: #fff;
}
.btn_up_del input[type = button] {
  border: none;
  width: 100px;
  background: #00A8A6;
  color: #fff;
  font-weight: bolder;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  border-radius: 15px;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 10px;
}
#create_field {
  margin-top: 7%;
  padding: 0.5em;
}

  .timeline {
      width: 70%;
      margin: 0.5em auto;
      background: #fff;
      border-style: solid;
      border-color: #fff;
      border-radius: 0.5em;
      padding: 0.5em;
  }
  #align_profile {
    float: left;
  }
  #align_user {
    overflow: hidden;
    padding-top: 0.5em;
  }
  #time {
    margin-left: 15%;
  }
  .timeline_profile {
      width: 50%;
  }
  .timeline_profile ul li a img {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
  }
  .timeline_profile ul li a span {
    align-items: flex-end;
  }
  .timeline_profile ul li a {
    color: green;
    padding: 0.2em;
  }
  .timeline_profile span {
    font-size: 18px;
    padding: 20px;
  }
  #articleContentTitle {
    padding: 25px 20px 20px 20px;
  }
  #articleContent {
    padding-left: 10px;
  }
  #edit {
    float: left;
  }
  #share {
    overflow: hidden;
    float: left;
  }
  #flag {
    overflow: hidden;
  }

  main {
    margin: 0.5em auto;
    width: 70%;
    min-height: 650px;
    padding: 10px;
    background: #f2f2f2;
  }
  .newPost {
    width: 100%;
  }
  .newPost input[type = file] {
    margin-left: 5%;
  }
  
.post_title {
  border-radius: 1em;
  height: 35px;
  width: 90%;
  padding: 0.5em;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  margin: 10px;
}
  .postArea {
    height: 150px;
  }
  .postArea {
    width: 90%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
    margin: 10px;
  }
  .small_comment {
      border-radius: 1em;
      height: 35px;
      width: 100%;
      padding: 0.5em;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
      background-color: #f8f8f8;
      resize: none;
      margin: 10px auto;
  }
  .comments_field {
    width: 100%;
    height: auto;
  }
  .comments_block {
    background: #f8f8f8;
    height: auto;
    width: 100%;
    padding: 0.5em;
    box-shadow: 0px 8px 16px 0px rgba(10, 77, 165, 0.5);
    border-radius: 0.5em;
  }
  .comments_block ul {
    padding: 0.5em;
  }
  .comments_block ul li p {
    margin-left: 10%;
  }
.abt_content {
  width: 90%;
  padding-top: 0.5em;
}
.abt_content img {
  width: 60%;
  height: auto;
  margin: 2% 25%;
  border-style: ridge;
  border-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
}
.abt_content img:hover {
  box-shadow: 0px 8px 16px 0px rgba(10, 77, 165, 0.5);
}
.abt_content p {
  padding: 0.5em;
  margin-left: 5%;
}
#abt h1 {
  text-align: center;
  margin:auto;
  padding-bottom: 0.2em;
}
.abt_content h3 {
  text-align: center;
  padding-bottom: 0.2em;
  color: #056CF2;
}
h1 {
    color: #056CF2;
}
p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}
#not_main {
  background: url(../assets/adults-brainstorming-business-1595385.jpg) no-repeat;
}
.notifications {
  width: 100%;
  margin: 0.5em auto;
  width: 50%;
  padding: 10px;
}
.notification_content {
  /* background-color: #fff; */
  width: 100%;
  height: auto;
  border-radius: 0.5em;
  font-size: 18px;
  color: green;
  padding: 0.2em;
  margin: 0.5em;
}
.notification_content a {
  color: green;
}
.notification_content a:hover {
  text-decoration: underline;
}
.menu {
  float: right;
}
.menu ul li {
  text-align: center;
  display: inline-block;
  margin-right: 30px;
  margin-top: 20px;
}
.log_reg ul li {
  display: inline-block;
  margin-top: 20px;
}

.container {
  overflow: hidden;
  margin: auto;
}
.toughts i{
  color: green;
  padding: 0.5em;
  font-size: 20px;
}
.toughts i:hover {
  color: green;
}

table {
  margin-top: 7%;
}
.ed_post {
  margin-top: 20%;
}
.timeline_content {
  padding-top:0.2em;
}
.timeline_content img {
  padding-top: 0.5em;
  width: 30%;
  height:auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#abt {
  margin-top: 8%;
}
#msg {
  margin-top: 10%;
}
#notify {
  margin-top: 8%;
  text-align: center;
}
#contact {
  margin-top: 8%;
}
.single_post {
  color:inherit;
}
.single_post:hover {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#spec_art {
  margin-top: 8%;
}
.all {
  width: 20px;
  height: 10px;
  background: #f1f1f1;
  border: 1;
}

@media only screen and (max-width: 600px) and (min-width:360px) {
  .btn_log {
    width: 30%;
    height: auto;
    display: block;
  }
  .group {
    margin-top: 40%;
  }
  table {
    margin-top: 45%;
  }
  .toughts {
    width: auto;
    height: 5%;
  }
  .toughts i {
    font-size: 20px;

  }
  .imgs {
    width: auto;
    height: auto;
  }
}

.category {
  display: inline-block;
  padding: 0.5em 0.3em;
  border: 0.16em solid #fff;
  margin: 0 0.3em 0.3em 0;
  box-sizing: border-box;
  text-transform: uppercase;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  color: #00A8A6;
  text-align: center;
  transition: all 0.15s;
  width: 40%;
  height: auto;
  /* background: #fff; */
}
.category:hover {
  color: #bbb;
  border-color: #bbb;
}
.addComment {
  border-radius: 1em;
  height: 35px;
  width: 95%;
  padding: 0.5em;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  margin: 10px auto;
}

/* Responsiveness nav */
@media screen and (min-width: 360px) {
  /* Mobile menu */
  .menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .toggle {
    order: 1;
  }
  .item {
    width: 100%;
    text-align: center;
    order: 2;
    display: none;
  }
  .item.active {
    display: block;
  }
}
.react #hit, .react a {
  color: green;
  padding-top: 0.2em;
  padding-left: 10%;
}
#hit {
  margin-left: 10%;
}

.profile {
  width: 100%;
  min-height: 20%;
  margin-top: 10%;
}
#profile_img img {
  width: 40%;
  height: 40%;
  float: left;
  margin-left: 10%;
  border-style: ridge;
  box-shadow: 0px 8px 16px 0px rgba(26, 245, 6, 0.2);
}
#info {
  overflow: hidden;
  width: 30%;
  padding-left: 2%;
  box-shadow: 0px 8px 16px 0px rgba(26, 245, 6, 0.2);
}
#info:hover {
  box-shadow: 0px 8px 16px 0px rgba(230, 255, 6, 0.2);
}
#info label {
  color: #056CF2;
  font-size: 100%;
}
#contents {
  width: 100%;
  height: auto;
  padding: 0.5em;
  margin: 5%;
  background: #00A8A6;
}