@font-face {
    font-family: "Canela-Regular";
    src: url("fonts/4a24899e94d8236f671c1090cd9e068c.eot");
    src: url("fonts/4a24899e94d8236f671c1090cd9e068c.eot?#iefix") format("embedded-opentype"),
         url("fonts/4a24899e94d8236f671c1090cd9e068c.woff2") format("woff2"),
         url("fonts/4a24899e94d8236f671c1090cd9e068c.woff") format("woff"),
         url("fonts/4a24899e94d8236f671c1090cd9e068c.ttf") format("truetype"),
         url("fonts/4a24899e94d8236f671c1090cd9e068c.svg#Canela-Regular") format("svg");
}
body {
    font-family: "Canela-Regular", serif;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 100vh;
    margin: 0;
    background-image: url('jnfrzrdeback.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}
.content {
    position: absolute;
    bottom: 25%;
    transform: translateY(25%);
    width: 100%;
}
h1, h2 {
    margin: 0;
    font-size: 12vw;
    line-height: 14vw;
    font-weight: 500;
    position: relative;
    vertical-align: baseline;
    transition: color 0.5s;
}
h1 a, h2 a {
    color: rgba(255, 255, 255, 0.33);
    text-decoration: none;
}
h1 a:hover, h2 a:hover {
    color: rgba(255, 255, 255, 0.66);
}
h1 a:hover::after {
    content: '"jazzing up things"';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.33);
    font-size: 2vw;
    line-height: 4vw;
	font-weight: 300;
    transition: opacity 0.5s;
    opacity: 0;
}
h2 a:hover::after {
    content: '"page not found"';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.33);
    font-size: 2vw;
    line-height: 4vw;
	font-weight: 300;
    transition: opacity 0.5s;
    opacity: 0;
}
h1 a:hover::after, h2 a:hover::after {
    opacity: 1;
}