src/components/styles/HomePage.css
#HomePage {
  -webkit-app-region: no-drag;
  overflow-x: hidden;
  margin: 31px 0px 0px 52px;
  min-height: 100%;
  overflow-y: scroll;
  height: 100%;
  padding-bottom: 50px; }
  #HomePage .header {
    margin: 0px 20px;
    font-size: 18px;
    font-family: "Lato", sans-serif;
    margin-top: 20px; }
  #HomePage .notebooks-view {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-grow: 1;
    align-items: flex-start;
    margin-bottom: 15px;
    padding: 10px; }
    #HomePage .notebooks-view .notebook {
      max-width: 300px;
      width: 18.8999%;
      margin: 10px 2px 10px 10px; }
      #HomePage .notebooks-view .notebook a {
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        display: block;
        overflow: hidden;
        transition: 0.18s;
        border-radius: 6px;
        cursor: pointer; }
        #HomePage .notebooks-view .notebook a:hover {
          transform: translateY(-2px);
          box-shadow: 0 1px 25px rgba(0, 0, 0, 0.2); }
        #HomePage .notebooks-view .notebook a .cover {
          position: relative;
          background-color: #959597;
          overflow: hidden;
          height: 195px;
          width: 100%; }
          #HomePage .notebooks-view .notebook a .cover img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-style: none; }
        #HomePage .notebooks-view .notebook a .description {
          padding: 10px 12px;
          color: rgba(0, 0, 0, 0.87);
          background-color: #f7f7f7;
          font-family: "Lato", sans-serif; }
          #HomePage .notebooks-view .notebook a .description .title {
            font-size: 14px; }
          #HomePage .notebooks-view .notebook a .description .created {
            font-size: 12px;
            color: dimgrey;
            margin-top: 2px; }
          #HomePage .notebooks-view .notebook a .description .summary {
            height: 33px;
            font-size: 12.5px;
            overflow: hidden;
            margin-top: 4px; }
          #HomePage .notebooks-view .notebook a .description button {
            border: none;
            margin-top: 10px;
            text-transform: uppercase;
            font-weight: 700;
            padding: 0;
            font-size: 11px;
            color: #338fff;
            background: inherit; }

#HomePage::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: transparent; }

#HomePage::-webkit-scrollbar {
  width: 7px;
  background-color: transparent; }

#HomePage::-webkit-scrollbar-thumb {
  background-color: #ababab; }

@media (max-width: 1170px) {
  #HomePage .notebooks-view .notebook {
    width: 23.5%; } }

@media (max-width: 880px) {
  #HomePage .notebooks-view .notebook {
    width: 31.5%; } }

@media (max-width: 733px) {
  #HomePage .notebooks-view .notebook {
    width: 30.5%; } }

@media (max-width: 550px) {
  #HomePage .notebooks-view .notebook {
    width: 46.5%; } }
