@charset "utf-8";

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

*/

@media (max-width: 768px) {
    .intro-card {
        width: 90%; 
        padding: 10px; 
    }
	
	.intro-card h2 {
        font-size: 3em; 
		word-wrap: break-word;
    }

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

    .social-media img {
        min-width: 2em; 
        min-height: 2em;
		max-width: 100%;
		height: auto;
    }

    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: flex; 
        flex-direction: column; 
        align-items: center;
        padding: 10px;
    }
	
    nav ul li {
        display: block;
        margin: 0 auto; 
        padding: 10px 0; 
    }
	
    .intro-card {
        width: 95%; 
        padding: 5px; 
    }
	
	.intro-card h2 {
        font-size: 2em; 
		word-wrap: break-word;
    }

    .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;
        margin: 5px 0; 
    }
}