body{
    margin: 0;
}
h1{
    color: yellowgreen;
    text-align: center;
    margin: 0;
    animation: h1-animate 8s;
    animation-iteration-count: infinite;
}
h3{
    color: yellowgreen;
    margin: 0;
    text-align:center;
    animation: h3-animate 8s;
    animation-iteration-count: infinite;
}
@keyframes h1-animate {
    0% {color: yellowgreen;}
    50%{color: yellow}
    100%{color: yellowgreen}
}
@keyframes h3-animate {
    0% {color: yellowgreen;}
    50%{color: yellow}
    100%{color: yellowgreen}
}
.hobby-list{
    margin: 0;
    color:white;
    font-size: 4vmin;
}
h4{
    text-align: center;
    color: white;
}
.hobby-content{
    font-size: larger;
    color: white;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
}
.music-list{
    color: white;
    font-size: medium;
    text-align: justify;
}
.links{
    color: yellowgreen;
}
.hobby-image{
    max-height: 300px;
    max-width: 90vw;
    width: auto;
}
.image-and-text{
    position: relative;
    max-height: 300px;
    width: auto;
}
.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-image: linear-gradient(rgba(0,0,255,0.4),rgba(138,43,226,0.4));
}
.image-and-text:hover .overlay{
    opacity: 1.0;
}
.text-on-image {
    font-weight: bold;
    color: white;
    font-size: 4vmin;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}