html {
    height: 100%;
    width: 100%;
}
body {
    background: #000B25;
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: "Inconsolata", monospace;
    text-align: center;
}
.app {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.contents {
    display: grid;
    place-items: center;
}
.pfp {
    width: 150px;
    height: 150px;
}

p {
  color: white;
  margin-left: 7px;
  margin-right: 7px;
  margin-top: 3px;
  margin-bottom: 3px;
}

h1 {
    color: white;
}
.pfp {
    animation: rotation 4s infinite linear;
    border-radius: 50%;
}
a {
    color: gainsboro;
    margin-left: 7px;
    margin-right: 7px;
}
a:hover {
    animation: rainbow 2s infinite;
}
h3 {
    font-size: smaller;
    color: grey;
    opacity: 0.4;
}

audio {
  margin: 10px;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes rainbow {
    14% {
      color: red;
    }
    28% {
      color: orange;
    }
    42% {
      color: yellow;
    }
    56% {
      color: green;
    }
    70% {
      color: cyan;
    }
    84% {
      color: blue;
    }
    100% {
      color: purple;
    }
}