body {
    background-color:Linen;	
}

/* * {
  border: .5px solid SlateGray;
  margin-bottom:.5%;
} */

* {
  margin: 0;
  box-sizing: border-box;
}


h1 {
    color:SaddleBrown;
}

header { 
    font-family: Arial, sans-serif;
    text-align:right;
    background-color: White;
    padding:.5px;
    margin-right:5px;
    padding-right:2%;
}

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: rgba(100,100,100,.7);
  font-family: Arial, sans-serif;
  padding-right:2%; 
}

/* Navbar links */
.topnav a {
  float: right;
  display: block;
  color: linen;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: rgba(30,30,30,.3);
  color: black;
}



/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  display:block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: linen;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add the same mid grey background color to navbar links on hover  as for the other nav items*/
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color:rgba(30,30,30,.3);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

h2, #page title  {
    text-align: left;
    margin-left: 5%;
    margin-bottom: 0%;
}

/* Create three unequal columns that float next to each other */
.column {
  font-family: Arial, sans-serif;
  float: center;
  padding: 20%;
}

/* Left and right column 
.column.side {
  width:20%; 
  padding:1%;	
  display:inline-block;
}*/


/* Middle column */
.column.middle {
  width: 80%;
  padding: 5%;
  margin-left: 10%;
}


#portrait {
    margin-top:1%;
    margin-bottom:1%;
    margin-right:2%;
    margin-left:0;
}

/* #portrait {
      
      margin-right: 10px; /* Space between image and text */
      height: auto;
    }*/

#attribute {
      float: right;
      width: 30% /* Adjust image size */
      height: auto;
      padding: 10px 20px 10px 50px;
	width:20%;
    }

/*#Stitchsample {
    border: 6px dashed green;
}*/


#wshop{
    border: 1px dashed black;
    margin-top:1%;
    margin-bottom:1%;
    margin-right:2%;
    margin-left:29%;
    padding:4%;
   	
}


.cv  {
 font-size: 14px;
}


/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}*/

/*Responsive layout - makes the three columns stack on top of each other instead of next to each other 
@media screen and (max-width: 600px) {
  .column.middle {
    width: 100%;
  }*/

/* responsive layout - so that when view gets to less than 600px the side columns should shrink to 2$*/
@media only screen and (max-width 600px) {
  .column side{
   display:none;
}




h1 {
    color:SaddleBrown;
}


[href] {
  color: SaddleBrown;
  

p {
  color:DarkSlateGray;
  min-width: 600px;
  /*max-width: 600px;*/
  padding: 5px 5px;
}

/*(useful for when you use a box that has a set max and min height, the overflow will turn into a scroll */
p {
  overflow: scroll;

}




/* start of contact page CSS*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}