body {
    background-color: black;
    padding: 80px;
}

@font-face {
    font-family: 'Menlo-Regular';
    src: url('fonts/Menlo-Regular.ttf'), url('fonts/Menlo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

p {
    font-size: 12px;
    color: #f8f8f2	;
    font-family: 'Menlo-Regular';
}

h1 {
    color: #bd93f9;
    font-family: 'Roboto Mono', monospace;
    font-size: 21px;

}

img {
    width: 300px;
    height: 300px;
    padding-top: 10px;
}

div {
    width: 300px;
    margin: auto;
    padding-top: 20px;
  }

#caption {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-style: italic;
    color: #f8f8f2	;
}

#gif {
    width: 300px;
    height: 300px;
    padding-top: 10px;
}

a {
    font-family: 'Menlo_Regular';
    font-size: 14px;
    color: #f1fa8c;
}

a:link { 
    text-decoration: none; 
}

#hvr {
    transition:transform 0.2s ease;
}

#hvr:hover {
    -webkit-transform:scale(3);
    transform:scale(3);
}

#rainbow {
    animation: color-change 1s infinite;
  }
  
  @keyframes color-change {
    0% { color: #ff5555; }
    50% { color: #8be9fd	; }
    100% { color: #50fa7b; }
  }