@charset "utf-8";
/* 
	Author:		Eric Zimmer
	Date:		09/27/2023
	Purpose: 	This is the mobile stylesheet for my personal professional website.
	Filename:	mobile.css
*/

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

    .nav-bar-list {
        display: none;
    }
    
    .nav-bar {
        text-align: center;
    }

    .hamburger-container {
        display: inline-block;
        cursor: pointer;
    }
      
      .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
        transition: 0.4s;
    }
      
      .change .bar1 {
        transform: translate(0, 11px) rotate(-45deg);
    }
      
      .change .bar2 {
        opacity: 0;
    }
      
      .change .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }

}

@media only screen and (min-width: 637px) {
    .nav-bar-list {
        display: flex;
    }
}

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

    .about-me-pics {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 165px;
    }
}