/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
font-family: gummy;
src: url(https://dl.dropbox.com/s/83teb99ykpq6p7w/Gummy.ttf);
}

@font-face {
src: url(https://dl.dropbox.com/s/53rwduk24jn09xg/Candy_Pop%21-demo-font.ttf);
font-family: candypop;
}

body{
background-image: url("pinkstarsbg.gif");
}

header {
    
    font-family:candypop, ariel;
    color: hotpink;
    font-size: 25px;
    text-align: center;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    

}
h2{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
}
.box {
                  /*(c) lovermonth*/
    border-style: solid;
    border-width: 26px 26px 26px 26px;
    -moz-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
    -webkit-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
    -o-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
    border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;         
    
    
    background-color: white;
    max-width: 1000px;
    margin:50px auto;
    display: grid;
    grid-gap: 10px;
    padding: 5;
    grid-template-columns: 200px minmax(0, 1fr);
}
body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

.pop {
font-size:2em;
color: #000;
text-align:center; /* looks weird often if not aligned in center */
-webkit-animation: pop 2s ease-in-out infinite alternate;
-moz-animation: pop 2s ease-in-out infinite alternate;
animation: pop 2s ease-in-out infinite alternate;
}

@keyframes pop {
from { transform:scale(0.95) }
50% { transform:scale(1) }
to { transform:scale(0.95) }
}

@-webkit-keyframes pop {
from { -webkit-transform:scale(0.95) }
50% { -webkit-transform:scale(1) }
to { -webkit-transform:scale(0.95) }
}