@media (max-width: 768px) {

    * {
        /border: 2px solid;
    }

    footer {
        width: 100vw;
        height: 5rem;
        display: flex;
        position: absolute;
        margin: 0 auto;
        bottom: 0;
        left: 0;
        z-index: 100;
        background: var(--ggray1);
        border-top: 0.1rem solid var(--gray3);
        align-items: center;
        justify-content: center;
    }

    #footer-content {
        width: 100%;
        box-sizing: border-box;
        max-width: 140rem;
        display: flex;
        justify-content: space-between;
        color: var(--blue3);
    }

    #footnote {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 3.5%;
        width: 18rem;
    }

    #footer-content p {
        font-size: 1.2rem;
        color: var(--blue3);
    }

    
    /* icons area */

    .icons {
        width: 25rem;
        margin-right: 0%;
        display: flex;
        align-items: center;
    }

    .icons .socials ion-icon {
        font-size: 2.0rem;
        color: var(--blue3);
        background-color: transparent;
        border-radius: 50%;
        padding: 1rem;
        cursor: pointer;
        text-align: center;
    }

    .socials {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
    }

ion-icon:hover,
ion-icon:active,
ion-icon:focus,
.footer-X:hover,
.footer-X:active,
.footer-X:focus,
.fc.fc-farcaster:hover,
.fc.fc-farcaster:active,
.fc.fc-farcaster:focus {
    transition: all 0.8s;
}

#twitter:hover,
#twitter:active,
#twitter:focus,
#email:hover,
#email:active,
#email:focus,
#farcaster:hover,
#farcaster:active,
#farcaster:focus {
    color: var(--cyan2)
}
}