/* CSS file for Electric Car page layout */

body {
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	min-height: 100vh;  /* need this line to 
					tell body to fill viewport */
	display: flex;
	flex-direction: column;
     }

h1 {
   font-size: xx-large;
}

#menuIcon { 
	width: 30px;
	display: none;
	align-self: flex-end;  // puts at end of row
}


button#fat {
	flex-grow: 2;  /* gets two shares of extra space */
}

button.car {
     background-color: aqua;
     margin: 10px;
     font-size: medium;
     width: 130px;
     height: 40px;
     flex-grow: 1;  /* overrides height spec! */
}

nav {
    background-color: black;
    padding: 10px;

    display: flex;
    flex-direction: column;
}

@media (max-width: 480px) {

	#menuIcon {
		display: block;
	}
	nav {
		display: none;
	}
}


p {
  padding: 10px;
}

header,footer {
       background-color: khaki;
       text-align: center;
       padding: 10px;
}

header {
	display: flex;
	}

div#aroundMain {
	background-color: white;
	padding: 10px;
	display: flex;
	flex-grow: 1;  /* absorbs all extra space */
}

main {
     background-color: linen;
     display: flex;
     flex-direction: row;
}