* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   font-size: 62.5%;
}
body {
   font-family: 'Yomogi', cursive;
   font-weight: bold;
   background-color: #bba46d;
   font-size: 2rem;
}
#header {
   text-align: center;
   line-height: 2.7rem;
   padding: 1rem;
}
.header__heading {
   font-size: 3rem;
}
.header__underline {
   width: 25rem;
   height: .2rem;
   background-color: #F2E94E;
   margin: 1rem auto;
}
#directions {
   border-bottom: .5rem solid #F2E94E;
   text-align: center;
   padding-bottom: 1rem;
}
#directions__header {
   margin-bottom: .5rem;
}
.alert {
   background-color: #F2E94E;
   width: 70rem;
   margin: 0 auto;
   padding: .5rem 0;
   border-radius: 1.5rem;
   /* will change display to block when the alert fires */
   display: none;
}
#grass {
   position: relative;
   height: 75rem;
   width: 100%;
   background: url('grass.jpg') center;
   overflow-x: hidden;
}
#cow {
   height: 15rem;
   width: 15rem;
   transition: transform .5s ease-in-out;
}