@import url('https://fonts.googleapis.com/css?family=Inconsolata');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

/*
This code was inspired by Dana Martens' code on CodePen at https://codepen.io/drmartens/pen/Eweooq
*/

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

h2 {
  font-size: 2.5rem;
}

body {
  font-family: 'Inconsolata', monospace;
  font-size: 1.5rem;
  line-height: 1.3;
  color: black;
  background-color: snow;
  text-align: center;
}

img {
  max-width: 400px;
}

.gif-container {
  padding: 20px;
}

@media screen and (max-width: 320px) {
  img {
    padding: 0;
    margin: 0 auto;
    width: 280px;
  }
}

button {
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 80px;
  background-color: rgb(2, 54, 11);
  color: #FCFCFC;
  font-size: 1.3rem;
  border: 2px solid #FCFCFC; 
  font-family: 'Noto Sans', sans-serif; 
}

.buttons {
  -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s; 
}

.buttons:hover { 
  color: rgb(248, 241, 138);
  border-color: rgb(231, 216, 76);
}

.buttons:focus {
  outline: 0;
}