* {
  box-sizing: border-box;
}

body {
  background-color: #000000;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1400px;
  margin: auto;
  transform: translateY(5rem);
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 4px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #00000000;
  color: white;
  cursor: pointer;
}

.btn:hover {
  text-decoration: underline white .1rem;
  color: #008080;
}

.btn.active {
  color: white;

}

.content img{
  width: 22rem;
  z-index: 0;
  transition: scale .5s ease-in-out;
}

.content img:hover{
  scale: .9;
}

#myBtnContainer{
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

.content p{
  width: 21rem;
  text-align: center;
  font-size: 1.5rem;
  padding: .5rem 0;
  transform: translateY(-7rem);
  z-index: 1;
  background: #000000e0;
  color: white;
}

@media screen and (max-width:1024px) {
  .column{
    width: 50%;
  }
}
@media screen and (max-width:685px) {
  .column{
    width: 60%;
    float: center;
  }
}
@media screen and (max-width:430px) {
  .column{
    
    transform: translateX(2rem);
  }

}
@media screen and (max-width:390px) {
  .column{
    
    transform: translateX(0);
  }

}