/* -------------------------------------------------------- */
/* OVERALL */
/* -------------------------------------------------------- */

@font-face
{
    font-family: 'DS';
    src: url(../fonts/Nintendo-DS-BIOS.ttf);
}

*
{
    box-sizing: border-box;
}

html
{
    cursor: url('https://cdn.cursors-4u.net/previews/wii-1-open-palm-tilt-ec1322c7-32.webp') 39 35, auto !important;
}

a:hover
{
    cursor: url('https://cdn.cursors-4u.net/previews/wii-pointer-1-tilt-normal-7f3b1ab2-32.webp') 40 34, auto !important;
}

body
{
    display: flexbox;
    align-items: center;
    justify-content: center;
    padding: 80px;
    margin-left: 20%;
    margin-right: 20%;
    width: 1500px;

    font-family: 'DS';
    font-size: 24px;
    letter-spacing: 1px;
    word-spacing: 5px;
    color: #8f9eaf;

    background-image: url(../images/bgs/bluehearts.gif);
    background-repeat: repeat;
    background-size: 50px;
}

span
{
    color: rgb(125, 176, 235);
}

/* -------------------------------------------------------- */
/* TITLE */
/* -------------------------------------------------------- */

.title
{
    background-image: url(../images/bgs/background2.jpg);
    opacity: 0.5;
    box-shadow: 0px 0px 7px inset #80808099;
    padding: 20px;
    margin-bottom: 10px;
}

.titletext
{
    display: inline;
    padding: 20px;
    color: #7d92ad;
}

/* -------------------------------------------------------- */
/* MAIN */
/* -------------------------------------------------------- */

.content
{
    background-color: #f3f8ff;
    display: grid;
    grid-area: auto;

    border-width: 10px;
    border-style: solid;
    border-image: url('../images/borders/blueborder.png') 7 fill round;
    border-image-slice: 40;
    border-image-outset: 10px;
    padding: 20px;
}

.columns
{
    display: flex;
    gap: 40px;
}

#aboutpfp
{
    width: 200px;
    opacity: 0.7;
}

.smallbio
{
    width: 200px;
    text-align: center;
}

.smallbio img
{
    width: 140px;
}

.badgescontainer
{
    display: flex;
    border: ridge #ffffff;
    border-radius: 50px;
    overflow: hidden;
    white-space: nowrap;
    width: 800px;
    background-color: #fff;
    margin: auto;
}

.badges
{
    animation: 30s badges infinite alternate linear;
}

.badges img
{
    width: auto;
    height: 40px;
}

.badgescontainer:hover .badges
{
    animation-play-state: paused
}

@keyframes badges
{
    from
    {
        transform: translateX(0)
    }

    to
    {
        transform: translateX(-100%)
    }
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer
{
    text-align: center;
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

@media screen and (max-width: 800px)
{
    body
    {
        display: block;
        width: 1000px;
        align-items: center;
    }

    .leftcolumn
    {
        text-align: center;
        margin: auto;
    }

    .columns
    {
        display: flex;
        flex-direction: column;
    }

    .smallbio
    {
        scale: 1.2;
    }
}