/* about me section/first terminal */

#sneexy > section {
    #logo {
        width: 40rem;
        height: auto;
    }

    h1 #pfp {
        width: auto;
        height: 6rem;

        vertical-align: middle;
        transition: transform .2s;
    }

    h1 #pfp:hover {
        transform: scale(2);
    }

    .selfinfo {
        display: grid;
        padding-top: 5px;
        grid-template-areas:
            "pronouns names";
        div {
            text-align: left;
            border-radius: 1em;
            padding: .7em 1em;
            ul {
                padding-left: 1em;
            }
            li {
                padding-bottom: 6px !important;
                list-style: none;
            }
        }
        div:first-child {
            background-color: color-mix(in srgb, var(--yellow) 20%, transparent);
        }
        div:last-child {
            background-color: color-mix(in srgb, var(--sapphire) 20%, transparent);
            margin-left: 1.5em;
        }
    }

    h1 {
        margin-bottom: 1px;
    }

    p {
        margin-top: 3px;
    }

    text-align: center;
}

/* socials and links sections */

.socials-contacts-list {
    a {
        width: 3rem;
        height: 3rem;
        display: inline-block;
        vertical-align: middle;
        align-content: center;
        text-align: center;
        border-radius: .5rem;

        span {
            transform: scale(1.58) translateY(.07rem);
        }
    }

    .fedi-icon {
        anchor-name: --fedi-icon;
        animation: opacity-blink 4s infinite;
    }

    .fedi-icon-2 {
        position-anchor: --fedi-icon;
        position: absolute;
        margin-left: -3.681rem;
        z-index: 2;
        animation: opacity-blink-reverse 4s infinite;
    }
}

/* sharkey iframe embed */

#links > section > iframe {
    display: flex;
    margin-top: 1rem;
    margin-bottom: .3crem;
    margin-left: auto;
    margin-right: auto;

    border: var(--accent) solid .15rem !important;
    border-radius: .6rem;
    transition: .2s box-shadow;
}

#links > section > iframe:hover {
    box-shadow: var(--accent) 0px 0px 0px .3rem;
    transition: .2s box-shadow;
}

/* animations for this stylesheet */

@keyframes opacity-blink {
    0% { opacity: 0% }
    5% { opacity: 100% }
    45% { opacity: 100% }
    50% { opacity: 0% }
    100% { opacity: 0% }
}

@keyframes opacity-blink-reverse {
    0% { opacity: 100% }
    5% { opacity: 0% }
    45% { opacity: 0% }
    50% { opacity: 100% }
    100% { opacity: 100% }
}

/* modify widths and spacing depending on the size of the display */

@media screen and (max-width: 59em) {
    #sneexy > section {
        #logo {
            max-width: 100%;
        }

        .selfinfo {
            grid-template-areas:
                "pronouns"
                "names";
            div {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                ul {
                    text-align: left !important;
                }
            }
            div:first-child {
                margin-bottom: 1em;
            }
            div:last-child {
                margin-left: auto !important;
            }
        }
    }

    .socials-contacts-list {
        text-align: center;
        a {
            margin-top: .5rem;
            margin-bottom: .5rem;
        }
    }
}