body {
  background: #222121;
}
.container {
    display: flex;
    flex-flow: row wrap;
  padding: 20px 30px;
  /* background: #222121; */
  background:
  linear-gradient( red blue);
}

#heading{
    display: block;
    width: 100%;
    color: white;
}
.container .btn {
  position: relative;
  height: 38px;
  left: 19px;
  padding: 6px 14px;
  border-radius: 20px;
  border: none;
  margin: 16px 5px;
  font-weight: bold;
  color: white;
  background-color: black;
}
.container .btn:hover {
  color: black;
  background-color: white;
}
.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 10px 10px;
}
.content .item {
  display: flex;
  background: #575151;
  margin: 10px 20px;
  width: 400px;
  border-radius: 1rem;
}
.content .item img {
  height: 70px;
  /* padding: 0px 0px; */
  /* margin: 5px 5px; */
  border-radius: 1rem;
}

.content .item h2 {
  color: rgb(255, 255, 255);
  margin: 14px 10px;
    font-size: 20px;
  font-family: "Courier New", Courier, monospace -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
}
.content .item h2:hover{
    color: rgb(0, 0, 0);
}

.container .albam {
  display: flex;
  flex-flow: wrap;
  width: 190px;
  /* overflow: scroll; */
  /* height: 200px; */
  /* border: 3px solid red; */
  margin: 10px;
}

.container .albam img {
    width: 170px;
    height: 180px;
    padding: 10px 10px;
    border-radius: 20px;
}
.container .albam h4{
    margin-top: 1px;
    margin-left: 10px;
    color: rgb(181, 171, 171);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container .albam h4:hover{
    color: white;
}