@charset "UTF-8";
/* CSS Document */

/* Hey Jon, I changed my color pallete a bit from my assignment, I took colours that were present in the background picture to make it look more
consistent. I kept my text and headings black (i hope that cool) they just did not look with any other color, I also changed one of my icons fromt he assignment and one of my fonts */

/*  
Highlight color: #863e00 / rgb(134,62,0) - brown
Links and buttons in the nav: #322f07 / rgb(50,47,7) - green
Hyperlinks: #links rgb(194 64 24) / #c24018 - rust orange
Main text and headings: #main text and headings black
neutral color for background: #cfaf7f / rgb(207, 175, 127)

*/

/* Structural elements - Font Family, NAV, Headings, Paragrpahs */

/* Applying fonts and styles to nitty gritty text and img elements */

li {
  font-family: 'Mukata', sans-serif;
  color: black;
}
 
h1, h2, h3, address {
  font-family: 'Mukata', sans-serif;
  text-align: center;
  color: black;
  
}

p, figure, blockquote {
  font-family: 'Raleway', sans-serif;
  color: black;
}

p,h3 { 
  text-align:center;
}

a{
  text-decoration: none;
  font-family: 'Mukata', sans-serif;
  font-weight: bold;
  color: rgb(192, 60, 33);
}
/* visited link is just a darker shade of the previous color */
a:visited{
  color:rgb(107, 26, 10);
}
img {
  border: black 2px solid;
  border-radius: 2px;
}
/* gettting the background image displayed */

body {
  background-image: url('../img/background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Styling he Navigation Pane and links within the Navigation  */

/* Navigation pane as an unordered list */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(73,66,0);
  border-radius: 2px;
}
/* Demonstrates understanding of shorthand rules */
nav li {
  float: left;
  border-right: 1px solid white;
}
    
nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111111;
}

.active{
  background-color:#863e00;
}
/* adding those pseudo-links as asked to distuguish between active, visited, and link tabs */

nav li a:active {
  color: #ffffff;
}
nav li a:visited {
  color:#ffffff;
}
nav li a:link {
  color:#ffffff;
}

/* Here is the <header> styling */
header {
  text-align: center;
  font-size: 40px; 
  font-family: 'serif';
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

table {
  border-collapse: collapse;
  width: 100%;
  display: flex;
  justify-content: center;
  border: solid black 2px;
  margin:0  auto;
  display:table; 
}
  
th {
  font-size: 24px;
  background-color: rgba(134,62,0, 0.5);
}

td {
  background-color: rgba(0,0,0,0.05);
} 

th, td {
  text-align: left;
  padding: 8px;
}

/*if you are looking at this in firefox, those breaks may be blue, but they are black in other browsers*/
hr{
  border-color: black;
}
/* Content Properties for most pages this is what gives that floating center aligned panel*/ 
.link{
  text-decoration:none;
  font-family: sans-serif;
}
.logo{
  border:none;
}
#content{
  text-align:left;  
  vertical-align: middle; 
  padding:20px 40px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  font-size: 125%;
  background-color: rgba(207, 175, 127,0.85);
}


/* Styling for text and logo within my header */
.box1{
  order: 1;
  align-self: flex-start;
}
.box2{
  order:2;
}

.flex-header{
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text{
  padding: 0 40px;
}

#heading_robin{
  display:flex;
  margin-left: 40px;
  margin-bottom:0px;
}

/* Here I have each page styled slightly diffently using some flex classes that I have created */

.flex1{
  display: flex;
  align-items: start;
  justify-content: center;
}

.flex2{
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex3{
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.flex4{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.about1{
  flex-grow: 1;
}

/* one of my ordered lists using flex */
.ol{
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
  font-size: 24px;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;  /* Preferred icon size */
  display: inline-block;
  line-height: 2;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

/* OKAY so everything on my CSS validates except these little web-kit things. I hope that is okay, I just copied it the way google asked */


  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* Demonstrating borders and box model on blockquote within the index page as well as text variants also a coloured border as asked */

blockquote { 
 
  padding: 5px;
  margin:0 auto;
  display: table;
  text-align: center;
  font-variant: small-caps;
  font-weight: bold;
  font-style: italic; 
  border: solid rgba(134,62,0,0.5) 2px;
  border-radius: 2px;
}