* {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(35,41,65);
    animation: 1s ease-out 0s 1 fadeIn;
  }

  .example::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .example {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  body {
    background-image: url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M0 40L40 0H20L0 20M40 40V20L20 40"/%3E%3C/g%3E%3C/svg%3E');
    background-color: rgb(227,231,239);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .fa-twitter {
    background: #55ACEE;
    border: 2px solid rgb(35,41,65);
    color: white;
    padding: 10px;
    font-size: 30px;
    border-radius: 100%;
    margin-top: auto;
  }

  .outer {
    margin: 0;
    padding: 35px;
  }
  
  a {
    color: rgb(215,75,72);
    transition: border 0.25s;
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  
  a:hover {
    border-bottom: 1px solid rgb(215,75,72);
  }

  .headerspace {
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .nav {
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: 20px;
    width: 100px;
    overflow: hidden;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  
  .posts {
    padding: 100px 0;
    animation: 1s ease-out 0s 1 smoothLoad;
    overflow: scroll;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
  }
  
  .post {
    width: 100%;
    max-width: calc(600px);
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 254, 254);
    border-radius: 6px;
    border: 2px solid rgb(35,41,65);
    box-shadow: 10px 10px 0 rgb(35,41,65);
    transition: box-shadow 0.5s;
    transition: all 0.5s ease-out;
  }
  
  .post:hover {
    box-shadow: 15px 15px 0 rgb(35,41,65);
  }

  .post-padding {
    padding: 25px;
  }
  
  .padding {
    padding: 5px 20px;
  }
  
  .tag > span {
    padding: 2px 5px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    background-color: rgb(215,75,72);
  }
  
  .title {
    font-weight: bold;
    color: rgb(35,41,65);
    transition: color 0.5s;
  }
  
  .title:hover:not(p) {
    font-weight: bold;
    color: rgb(215,75,72);
    border: none;
  }
  
  .divider {
    margin-top: auto;
    border-bottom: 1px solid #bbb;
  }
  
  @keyframes smoothLoad {
    0% {
      transform: translateY(-75%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  footer {
     left: -2px;
     bottom: -2px;
     width: 100%;
     padding-top: 20px;
     padding-bottom: 20px;
     margin-left: auto;
     margin-right: auto;
     margin-top: auto;
     background-color: white;
     color: rgb(35,41,65);
     border: 2px solid rgb(35,41,65);
     border-radius: 6px;
     box-shadow: 10px 10px 0 rgb(35,41,65);
     text-align: center;
  }

  footer > * {
    padding: 20px;
  }