open-sans-<uniquifier > {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* local */
body {
  font-family: "Open Sans Variable", sans-serif;
  font-optical-sizing: auto;
}

.container-main {
  padding-left: 20%;
  padding-right: 20%;
}

/* local */

/* login */

.login input {
  width: 100%;
}

.login #Login {
  width: 500px;
}

.login hr {
  width: 460px;
}

@media screen and (max-width: 550px) {
  .login input {
    width: 60%;
  }

  .login button {
    width: 70% !important;
  }
}

.main {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 800px) {
  .main {
    padding: 0px !important;
  }
  .container-main {
    padding: 20px !important;
  }
  .main input {
    font-size: 16px;
  }
  .main label {
    font-size: 16px;
  }
  .main button {
    font-size: 16px;
  }

  #logout {
    margin-right: 6%;
    width: 80%;
    margin-top: -15px;
  }

  .commint {
    font-size: 18px;
  }
  .btn {
    font-size: 18px;
  }
}

/* login */

/* home */
.home .new-post {
  width: 100%;
}

.home .new-post span {
  width: 88%;
}

.home .new-post span {
  width: 88%;
}
@media screen and (max-width: 800px) {
  .home .new-post {
    margin-top: 50px;
  }
}

.post {
  width: 110%;
}

.post .body img {
  width: 100%;
}

.create-post {
  width: 700px;
}
@media screen and (max-width: 800px) {
  .create-post {
    width: 80% !important;
  }
  .create-post span {
    font-size: 22px;
  }
  .create-post button {
    font-size: 20px;
  }
  .create-post label {
    font-size: 20px;
  }
  .create-post textarea {
    font-size: 20px;
  }
}

.comment-img img {
  width: 50px !important;
}

#commentsBody input {
  width: 98%;
}

/* home */