body {background-color: #202224; margin: 0; font-family: monospace; font-size: 1.3em; color: white;}
h1 {color: #88d8c0;}

#wrapper {
  padding: 1em;
}

@media screen and (min-width: 900px) {
  main {
    column-count: 3;
    column-gap: 1em;
  }
    #wrapper {
    padding: 1em 3em;
  }
}


@media screen and (min-width: 1400px) {
  main {
    column-count: 4;
    column-gap: 1em;
  }
    #wrapper {
    padding: 1em 3em;
  }
}



main {
  margin: 2em 0;
}

main img {
  display: block;
  width: 100%;
  margin-bottom: 1em;
  border-radius: 5px;
  border-color: #88d8c0;
  border-width: 3px;
  border-style: solid;
  transition: 0.3s ease-in-out;
  position: relative;
  
  padding: 0px;
}

main img:nth-child(4n+2) {
    transform: scale(1) rotate(1deg);
}


main img:hover {
    transform: scale(1.1) rotate(0deg);
    z-index: 5;
    cursor: pointer;
    opacity: 1.0;
    
    padding: 2px;
    border-width: 5px;
}

main img:not(:hover){
    opacity: 0.9;
}