@font-face {
  font-family: 'SiteFont';
  src: url('sitefont.woff2') format('woff2'),
  url('sitefont.woff') format('woff'); 
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
    font-family: 'SiteFont', Courier, sans-serif;
    color: white;
    text-shadow: black 2px 2px 1px 2px;
    background-image: url('img/flamez2.png');
}

.head {
    width: 70%;
    margin-left: 10%;
    margin-right: 20%;
    display: flex;
    position: absolute;
}
#me, #kurno, #me-again {
    width: 33%;
}

#me-again {
    position: fixed;
    right: 32px;
    bottom: 0px;
    filter: drop-shadow(8px 8px 16px rgba(1, 1, 1, 1));
}
.background-container {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.bg-1 {
    background-image: url('img/flamez.png');
    animation: fade1 0.65s linear infinite;
}


.bg-2 {
    background-image: url('img/flamez2.png');
    animation: fade2 0.65s linear infinite;
}

@keyframes fade1 {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fade2 {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

h1 {
    font-size: 50px;
    font-style: bold;
    margin-bottom: 0em;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 30px;
}
a {
    transition: all 0.2s ease-out;
}
.content {

 transform: matrix3d(8.47523, 1.855796, 0, 0.008044, 
                    0.009605, 1.686632, 0, 0.000115, 
                    0, 0, 1, 0, 
                    -213.115387, -1.130298, 0, 1);
 transform-origin: -62px -43px 0px;
 
 width: 600px;
                 
}      
a:hover {
    font-size: 60px;
    text-shadow: 0px 0px 8px;
}