/* CSS goes here
 need ack box and grid of pix */
@import url('https://fonts.googleapis.com');
@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap')
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */


* {
    box-sizing: border-box;
    /* font-family:  "Rubik", sans-serif; */
    /* font-size: 2em; */
}

h1 {
    font-family: Zeyada, sans-serif;
    font-size: 6em;
    text-align: center;
    color: darkslategrey;
}

h2, h3 {
    text-align: center;
    color: darkslategrey;
}

p {
    font-family:  "Rubik", sans-serif;
    font-size: 1.3em;
}

p.praise {
    margin-left: 5em;
    margin-right: 5em;
}

.DMC {
    float: left;
    width: 60px;
    height: 60px;
    margin-left: 5px;
    margin-right: 5px;
}

.ack-box {
    display: grid;
    grid-template-columns: 1fr, 2fr, 1fr;
    background: ghostwhite; 
    /* font-size: .9em; */
    padding: 10px; 
    border: 1px solid darkgray;
    border-radius: 10px;
    margin-left: 15em;
    margin-right: 15em;
}

.zoom {
    padding: 5px;
    transition: transform .2s;
    /* width: 120px;
    height: 120px; */
    margin: 0 auto;
    text-align: center;
  }
  
  .zoom:hover {
    -webkit-transform: scale(4); /* Safari 3-8 */
    transform: scale(4); 
  }

  .container {
    display: grid;
    /* grid-template-columns: repeat(auto, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: repeat(4, auto);
    border: px double black;
  }

  /* img:hover {
    -webkit-transform: scale(4); /* Safari 3-8 */
/*    transform: scale(4); 
  } */