body {
  padding: 0;
  margin: 0;
}

h1 {
  font-family: 'Permanent Marker', cursive;
}

#background-buttons {
  position: fixed;
  background-color: transparent;
  top: 0;
  left: 0;
}

#info-button {
  position: fixed;
  background-color: transparent;
  top: 0;
  right: 0;
}


#info-modal {
  position: fixed;
  background-color: transparent;
  width: 400px;
  margin-left: -200px;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  background-color: white;
  box-shadow: 0 19px 38px rgba(20,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  padding: 30px;
    border-radius: 2px;
    font-family: 'Lato',sans-serif;
    overflow: hidden;
}

#info-modal p:first-child {
    margin-top: 0;
}
#info-modal p:last-child {
    margin-bottom: 0;
}

.close {
    display: none;
}

#info-popup {
    background-color: black;
    width: 100%;
    height: 100%
}

#popup-backdrop {
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0.7;
}

.icon-button img {
    width: 32px;
    height: 32px;
}

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi)
	{
		/* Your code to swap higher DPI images */
        .icon-button img {
            width: 64px;
            height: 64px;
        }
	}