@charset "utf-8";

/*
   Brianna Deirth-Portfolio
   CSS file for different 
   media types for Contact page
   
   Author: Brianna Deirth
   Date: 03/20/2024  
   Filename: contactmobile.css

*/

@media (max-width: 768px) {
	#contact-heading {
        top: 25px;
    }
	
    .contact-card {
        width: 90%;
        padding: 10px;
		margin-bottom: 100px;
    }

    .social-media {
		position: absolute;
		bottom: 0;
        gap: 1em;
        position: static;
        padding: 10px 0;
    }

    .social-media img {
        min-width: 2em;
        min-height: 2em;
    }

    nav ul {
        position: static; 
		display: flex;
        justify-content: space-around; 
        padding: 10px;
    }
	
	nav ul li {
        display: block; 
        margin-left: 0; 
    }

    .logo {
		display: none;
        position: static;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
	nav ul {
        position: static; 
        display: block; 
        padding: 10px;
		text-align: center; 
    }
	
    nav ul li {
        display: block;
        margin: 0 auto; 
        padding: 10px 0; 
    }
	
    .contact-card {
        width: 95%; 
        padding: 5px; 
    }

    .social-media {
        gap: 0.5em; 
        padding: 5px 0;
    }

    .social-media img {
        min-width: 1.5em;
        min-height: 1.5em;
		max-width: 100%;
		height: auto;
    }
	
    .logo {
		display: none;
    }
}