/* main.css
copy of grey.css and adding the extra stuff in index.html (pdp main things index)

*/

html { font-family: Arial;}

body { color: black;
       font-size: 16px;}

header { background-color: black;
         color: white; 
         text-align: center;
         padding: 7px;
}
         
footer { background-color: grey;
         color: black;
         text-align: center;
         
         font-size: 1.9vw;
         clear: left;
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
}          

main { margin: 20px;}
         
         
/* === TOPNAV === */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
  margin-bottom: 1px;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}     

/* Change the color of the active link */
.topnav a.active {
    background-color: darkblue;
}

button {
	background-color: #BA5DEF;
	background-color: rgba(0,125,255,0.4);
	color: white;
	height: auto;
	width: 22%;
	margin-bottom: 0.3%;
	margin-left: 2%;
	font-size: 1.24em;	
	border: 2px solid black;
	float: left;
	}
button:hover {
	background-color: pink;
}
h1 { font-size: 1.5em; }

#main { text-align: center;
       width: 80%;
       margin-left: 10%;
}	
#tech { background-color: darkBlue;
        color: white;}

footer { font-size: 0.8em;
}

#big { font-size:1em; }

/* Extra small devices (small phones, under 600px) */
@media only screen and (max-width: 600px) {
button { background-color: yellow; 
         color: black; 
         width: 100%; 
}
nav    { font-size: 2.8vw; }
#tech { background-color: darkBlue;
        color: white;}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 767px) {
  button { background-color: orange; font-size: 2.5vw; width: 30%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 990px) {
  button { background-color: #BA5DEF;}
}	

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
  button { background-color: green; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {
    body   { overflow: hidden; }
	button { background-color: blue; 
	         background-color: rgba(0,0,255,0.8);
	         width: 23%;
	         height: 3.9em;
	}
	#main  { width: 95%; margin-left: 2.5%; }
	.topnav a { padding-right: 20px; }
}