.social-media-container
{

    display: flex;
    flex-direction: row;
    align-items: left;
    justify-content: center;

}



.social-media-text
{

    color: var(--webpage-background-color-social);
    font-size: var(--size-text-1);

    text-align: right;
    padding-right: 15%;
    width: 100%;

}



.social-media-account-element
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--elemnt-width-mini);
    aspect-ratio: 1 / 1;

    margin: calc(var(--elemnt-width-mini) / 8);

    flex-direction: row;

    transition: scale 0.3s;
    
}



.social-media-account-element:hover 
{

    /* Holt sich dynamisch das Bild aus dem HTML-Style */
    content: var(--hover-img);

    scale: 1.1;

}



.social-media-container-mini
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 98.5%;
    justify-content: right;

}



.social-media-account-element-mini
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--elemnt-width-mini);
    aspect-ratio: 1 / 1;
    
    margin: calc(var(--elemnt-width-mini) / 8);

    flex-direction: row;

    transition: scale 0.3s;

}



.social-media-account-element-mini:hover 
{

    /* Holt sich dynamisch das Bild aus dem HTML-Style */
    content: var(--hover-img);

    scale: 1.1;

}



#social-media-box
{

    width: 85%;

    display: flex;
    flex-direction: column;
    align-items: right;
    align-items: flex-end;

    text-align: center;

}



@media (max-width: 960px) 
{

    .social-media-container-mini
    {

        width: 100%;
        justify-content: center;

    }



    .social-media-account-element-mini
    {

        scale: 1.5;
        margin: calc(var(--elemnt-width-mini));

    }



    .social-media-account-element-mini:hover 
    {

        /* Holt sich dynamisch das Bild aus dem HTML-Style */
        content: var(--hover-img);

        scale: 1.7;

    }



    .social-media-container
    {

        width: 100%;
        justify-content: center;

    }



    .social-media-account-element
    {

        scale: 1.5;
        margin: calc(var(--elemnt-width-mini));

    }



    .social-media-account-element:hover 
    {

        /* Holt sich dynamisch das Bild aus dem HTML-Style */
        content: var(--hover-img);

        scale: 1.7;

    }



    #social-media-box
    {
        width: 100%;
    }

}



@media (max-width: 660px) 
{

    .social-media-container-mini
    {

        width: 100%;
        justify-content: center;

    }



    .social-media-account-element-mini
    {

        scale: 1.2;
        margin: calc(var(--elemnt-width-mini) / 2);

    }



    .social-media-account-element-mini:hover 
    {

        /* Holt sich dynamisch das Bild aus dem HTML-Style */
        content: var(--hover-img);

        scale: 1.4;

    }



    .social-media-container
    {

        width: 100%;
        justify-content: center;

    }



    .social-media-account-element
    {

        scale: 1.2;
        margin: calc(var(--elemnt-width-mini) / 2);

    }



    .social-media-account-element:hover 
    {

        /* Holt sich dynamisch das Bild aus dem HTML-Style */
        content: var(--hover-img);

        scale: 1.4;

    }



    #social-media-box
    {
        width: 100%;
    }

}