main.css

body {
    background-color: #2b2b2b;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .navbar {
    background-color: #345;
    padding: 10px;
    display: flex;
    justify-content: flex-end;
  }

  .content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    color: #ffffff;
  }

  @media screen and (max-width: 767px) {
    .content {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 20px;
    }
  }

  @media screen and (min-width: 768px) {
    .content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      grid-gap: 20px;
    }
  }

  a {
      background-color: #149F5C;
      color: white;
      border-radius: 7px;
      padding: 3px 6px 3px 6px;
  }

  img {
      margin-left: 12px;
      margin-right: 12px;
      border-radius: 5px;
      max-width: calc(100% - 24px);
      height: calc(100% - 72px); object-fit: cover;
      max-height: 50vh;
  }

  .plugin {
    background-color: #333;
    padding: 12px 0 0 0;
    text-align: center;
    color: #fff;
    border-radius: 7px;
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .plugin:hover {
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .left {
      margin-right: auto;
      padding-left: 10px;
  }

  .right {
      padding-right: 10px;
  }