main.css

/* DIY Dog Search tool using Punk API - Michael McGrorty 6/11/18 */

body {
    margin: 5%;
    text-align: center;
    font-family: 'Rubik', 'sans-serif';
    background-color: rgba(255, 255, 255, 0.7);
}

img {
    width: 4em;
    height: 12em;
    animation-duration: 4s;
    animation-name: spinner;
    animation-iteration-count: infinite;
}

button {
    margin: 5px;
    border: none;
    padding: 10px;
    font-family: inherit;
    font-size: 1.25em;
}

select {
    font-family: inherit;
    padding: 5px;
}

input {
    font-family: inherit;
    padding: 5px;
}

input:focus {
    border: 2px solid blue;
}

@keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

.beergrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
    grid-auto-rows: min-content;
    margin: 20px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 10%;
}

.one {
    grid-column: 1 / 5;
    grid-row: 1;
}
.two { 
    grid-column: 2 / 5;
    grid-row: 2;
}
.three {
    grid-column: 1;
    grid-row: 2 / 6;
}
.four {
    grid-column: 2 / 5;
    grid-row: 3;
}
.five {
    grid-column: 2;
    grid-row: 4;
}
.six {
    grid-column: 3;
    grid-row: 4;
}
.seven {
    grid-column: 4;
    grid-row: 4;
}
.eight {
    grid-column: 2;
    grid-row: 5;
}
.nine {
    grid-column: 3;
    grid-row: 5;
}
.ten {
    grid-column: 4;
    grid-row: 5;
}