style.css

#root {
    max-width: 1200px;
    margin: 20px auto;
  }
  
  .title {
    display: inline;
    padding: 15px;
  }

  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    cursor: pointer;
  }

  .button:hover {
    opacity: 1;
  }

  .search {
    float: right;
  }

  .container-header {
    margin: 15px;
  }

  a {
    margin: 5px;
    cursor: pointer;
  }
  
  a:hover {
    opacity: 1;
  }

  .prev {

  }

  .next {

  }

  #container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .joke {
    margin: 1rem;
    border: 1px solid gray;
    width: 47%;
  }
  
  @media screen and (min-width: 600px) {
    .card {
      flex: 1 1 calc(50% - 2rem);
    }
  }

  @media screen and (min-width: 900px) {
    .card {
      flex: 1 1 calc(33% - 2rem);
    }
  }