main {

    /* font-family: "American Typewriter Cond", sans-serif; */
    font-weight: 600;
    /* font-feature-settings: "salt" 1; */
    line-height: 1.1;
    letter-spacing: -1%;
    font-size: var(--font-size-body);
    margin-left: 2rem;
    margin: 2rem auto;
    width: clamp(0px, 90%, 100%);
}


picture {
    width: 100%;
    position: fixed;
    width: 20vw;
    top: 60vh;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: -2;
    display: inline;
}

nav {
    /* margin-top: var(--margin-body); */
}


main {}

picture:hover {}

/* picture:hover::before {
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    color: red;
    content: "Arthena !";
    animation: shake 0.1s ease-in-out 0s infinite alternate;
} */

@keyframes shake {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}


picture:hover {}

@keyframes rotate {
    0% {
        animation-timing-function: ease-in;
        opacity: 1;
        transform: translateY(-45px);
    }

    24% {
        opacity: 1;
    }

    40% {
        animation-timing-function: ease-in;
        transform: translateY(-24px);
    }

    65% {
        animation-timing-function: ease-in;
        transform: translateY(-12px);
    }

    82% {
        animation-timing-function: ease-in;
        transform: translateY(-6px);
    }

    93% {
        animation-timing-function: ease-in;
        transform: translateY(-4px);
    }

    25%,
    55%,
    75%,
    87% {
        animation-timing-function: ease-out;
        transform: translateY(0px);
    }

    100% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0px);
    }

}

picture img {
    width: 100%;

    height: auto
}

section.contacts {
    display: flex;
    padding: 2rem 0;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 2rem 0;
}

section.contacts:nth-child(2) {
    color: var(--theme-1);
}





@media (max-width: 968px) {
    main {
        padding-block: 1em;
        margin-top: 0;
        font-size: 5dvw;
        margin-left: auto;
        width: calc(100dvw - var(--margin-body) * 3)
    }

    section.contacts {
        flex-direction: column;

        align-items: center;

        a {
            &:first-child {
                color: rgba(0, 0, 0, 0.606);
            }

            &:nth-of-type(2) {
                color: rgba(0, 0, 0, 0.274);
            }

            &:nth-of-type(3) {
                color: rgba(0, 0, 0, 0.121);
            }
        }
    }
}