* {
  box-sizing: border-box;
}

body {
  font-family: "Courier New", serif;
  margin: 0;
  background-color: cyan;
}

/* image never scales greater than 100% 
img {
  max-width: 100%;
  height: auto;
}*/

/* Header */
header {
  padding-top:10px;
  background-color: cyan; 
  text-align: center;
  color: purple;
}

header img {
  width: 10%;
  max-width: 10%;
  margin-top: -25px;
  padding-bottom: 0px;
}

.navbar {
  padding: 10px;
  color:white;
  background-color: magenta;
  text-align: center;
  font-weight: bold;
}

.navbar a {
  text-decoration: none;
  color: white;
  }

.navbar a:hover {
    color: cyan;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  text-align:center;
  background-color:#AEFFFF;  /*pale cyan */
  padding: 0 10px
}

.main {
  flex: 100%;
  justify-content: center;
}



/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 10px;
}

.column img {
  padding: 10px 0;
  max-width: 100%;
  vertical-align:middle;
}

/*form*/
.myform {
  max-width:600px;
  width: 100%;
  padding-bottom: 10px;
}

form {
  display:flex;
  flex-wrap: wrap;
  justify-content: left;
}

label {
  margin-bottom: 10px;
}

input[type=text], input[type=email], textarea  {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border: 2px solid #AE00AE; /* dark magenta */
  font-family:"Courier New", serif;
  }

input[type=text]:focus, input[type=email]:focus, textarea:focus {
  /*background-color: #FFA6FF; /* light magenta */
  }

textarea {
  min-width: 100%;
  height: 150px;
  border: 2px solid #AE00AE; /* dark magenta */
}

input[type=submit] {
  width: 25%;  
  background-color: magenta; /*#AE00AE; /* dark magenta */
  border: 2px solid magenta; /*#AE00AE; /* dark magenta */
  color:white;
  margin: 5px 0;
  padding: 10px;
  cursor:pointer;
  font-family:"Courier New", serif;
  font-size: 15px;
  }
  
.mb:hover {
  background-color: #FFA6FF; /* light magenta */
  color:purple;
  border: 2px solid #AE00AE; /* dark magenta */
  }

/* Footer */
footer {
  background-color: cyan;
  color: purple;
  border-top: 4px solid magenta;
  text-align: center;
}



/* Responsive layout - makes a two-column layout instead of four columns */
@media screen and (max-width: 1000px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}


/* Responsive layout - makes a one-columnlayout on top of each other */
@media screen and (max-width: 600px) {
  .main {
    max-width: 100%;
	margin:0;
  }
  
  .main img {padding: 10px 0;}

  .container {padding:0;}

  .column {
    flex: 100%;
    max-width: 100%;
  }

  .myform {margin: 0 10px;}
  input[type=submit] {width:100%;}

}

@media print{
  body{
    background-color:white;
	color:black;
   }
   
  header, .navbar, footer{display:none;}
  
  .main img {width:60%;}
}


