
@media only screen and (max-width: 800px) {

    #contactcontainer #contact-options {
        
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
    }

        #contactcontainer #contact-options a {
            border-radius: 1.3rem;
            color: white;
            padding: 2.5rem 5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }


        #contactcontainer #contact-options img {
            width: 3.5rem;
            margin-bottom: 0px;
        }


    #contactcontainer #close {
        bottom: 4.5rem;
        animation: closemobile 0.4s ease-in 1;
    }

        #contactcontainer #close img {
            width: 1.5rem;
        }
    
        @keyframes closemobile {
            0%   
                {
                    bottom: -2rem;
                    opacity: 0;
                }

            90%   
                {
                    bottom: 2rem;
                    opacity: 0.75;
                }
            100%   
                {
                    bottom: 4.5rem;
                    opacity: 1;
                }
        }

    #contactcontainer.hidden #close {
        bottom: 0rem;
        animation: closemobile-hide 0.4s ease-in 1;
    }

        @keyframes closemobile-hide {
            0%   
                {
                    bottom: 4.5rem;
                    opacity: 1;
                }

            90%   
                {
                    bottom: 2rem;
                    opacity: 0.75;
                }
            100%   
                {
                    bottom: -2rem;
                    opacity: 0;
                }
        }
}