/* Most of codes I stolen from W3Schools. IDK how to code this section :/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Roboto+Mono:wght@300&display=swap');
body {
    color:white;
    background:url(./images/tetrio-coverart-alt.png) no-repeat center fixed;
    background-size: cover;
}
.avt {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    width: 10%;
    border-radius: 100%;
  }
h1, h2 {
    text-align: center;
    font-family: 'Comfortaa', cursive;
}
div {
    text-align: center;
}
ul {
    display: inline-block;
    list-style-type: none;
    padding:0;
    border-radius: 5px;
    overflow:hidden;
    background-color: black;
}
li {
    font-family: 'Roboto', sans-serif;
    float:left;
}
a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 14px 16px;
}
li a:hover {
    background-color: blue;
}
.active {
    background-color: blue;
}