/* Here I will create styling that uses custom sprites. Like the image border */
.metal-border {
    border: 8px solid transparent;
    border-image: url(../../assets/art/metal-border.png) 6;
    border-image-width: 35px;
    box-sizing: border-box;

    height: 100%;
    padding: 2em;
    margin: 2em;

    color: #4e79bf;
}

.metal-border-nav {
    border: 8px solid transparent;
    border-image: url(../../assets/art/metal-border.png) 6;
    border-image-width: 35px;
    box-sizing: border-box;

    height: 100%;
    width: 80%;
    padding: 2em;
    margin: 2em;

    color: #4e79bf;
}

.pfp-metal-border {
    aspect-ratio: 1 / 1;

    width: 100%;
    height: auto;

    border: 30px solid transparent;
    border-image: url(../../assets/art/metal-border.png) 6;
    box-sizing: border-box;

    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
}

@media screen and (max-width: 1064px) {
    .pfp-metal-border {
        width: 25%;
    }
}