@keyframes bg-anim{
    from {
        background-position: 0 0;
    }
    to {
        background-position: 32px 32px;
    }
}

@keyframes title-anim{
    from {
        color: #ffecd6;
    }
    to {
        color: #ffd4a3;
    }
}

@font-face {
  font-family: "Fira Sans";
  src: url('assets/fonts/fira-sans.eot');
  src: url('assets/fonts/fira-sans.eot') format('embedded-opentype'),
       url('assets/fonts/fira-sans.woff2') format('woff2'),
       url('assets/fonts/fira-sans.woff') format('woff'),
       url('assets/fonts/fira-sans.ttf') format('truetype');
}

body {
    grid-template-columns: 70% 30%;
    padding-left: 5.0rem;
    padding-right: 5.0rem;
    padding-top: 2.0rem;
    padding-bottom: 2.0rem;

}
@media screen and (max-width: 900px) {
    body {
        grid-template-columns: 100%;
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

#title {
    animation: title-anim 5s linear alternate infinite;
}

#kirby {
    position: fixed;
    bottom: 0;
    right: 0;
}

#avatar {
    max-width: 256px;
    float: right;
    border-radius: 8px;
}
#buttons {
    display: inline-grid;
    justify-items: center;
    gap: 4px;
}

#gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
#gallery img {
    border-radius: 8px;
}

@media screen and (max-width: 900px) {
    #buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
        justify-items: center;
    }
}
#buttons > img {
    filter: none;
}

.card {
    background-color: #544e68;
    border-radius: 8px;
    padding: 1.0rem;
    margin: 0.5rem;
}

body {
    background-image: url("assets/images/bg.png");
    background-size: 32px;

    color: #ffecd6;
    line-height: 1.5;
    font-family: "Fira Sans", sans-serif;

    animation: bg-anim 1s linear infinite;
    display: grid;
    gap: 0.25rem;
}

a {
    color: #ffaa5e;
    text-decoration: none;
    font-weight: bold;
}

a:hover, a:active {
    color: #ffd4a3;
}

h1, h2, h3, h4, h5 {
    margin: 0.5rem;
}

strong {
    font-size: 1.1rem;
    font-weight: bold;
}