/* 
   Spotted Wren Garden Center style sheet 
   Filename: styles.css

   Author:   
   Date:     
   HTML5 and CSS3 Illustrated Unit I, Independent Challenge 1
 */

/* reset styles */
html {
   font-size: 18px;
   font-family: "Playfair", serif;
   font-weight: 400;
   font-style: normal;
}
a, article, body, div, dd, dl, dt, figcaption, figure, footer, header, h1, 
h2, h3, img, li, nav, p, section, table, tbody, td, tfoot, th, thead, tr, ul {
   border: 0;
   padding: 0;
   margin: 0;
}
img {
   max-width: 100%;
   height: auto;
   width: auto;
}
ul {
   list-style-type: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

/* global styles */


/* body and page container */


/* skip navigation link 
 p.skipnavigation {
   margin: 0;
}
p.skipnavigation a {
   position: absolute;
   left: -10000px;
}
p.skipnavigation a:focus {
   color: black;
   background-color: snow;
   top: 2%;
   left: auto;
   right: 2%;
   z-index: 2;
} 
*/


/* header section */

.topleft-name {
   letter-spacing: 4px;
   font-size: 1.4rem;
   background-color: #648159;
}
.topleft-name header {
   font-size: 3rem;
   letter-spacing: 7px;
   color: #D2DCB6;  
   padding: 2%;
}


.topleft-name ul {
   background-color: #5B814D;
   width: 100%;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.topleft-name li a {
   display: inline-block;
   margin-left: 0%;
   margin-right: 0%;
   max-width: 100%;
   text-align: center;
   
   
   text-decoration: none;
}

.topleft-name a {
   text-decoration: none;
 
} 


 .topleft-name ul {
  list-style-type: none;
  max-width: 100%;
  background-color: #648159;
  display: flex;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-evenly;
}

.topleft-name ul li a {
  display: block;
  color: #D2DCB6;
  padding: 14px 16px;
  text-decoration: none;
}

.topleft-name li a:hover{
   background-color: #734d81;
}

.topleft-name li a.active_page {
   background-color: #734d81;
}


/* main content */
body {
   background-color: #5a6755;
}
.main_content {
   letter-spacing: 4px;
   font-size: 1.4rem;
   height: auto;
   max-width: 50%;
   color: #D2DCB6;
}

article {

   position: absolute;
   float: left;
   max-width: 50%;

}

.main_content p {
   margin: 5%;
   height: inherit;
}

.header {
   margin: 2%;
   font-size: 2rem;
}
.rightside {
   height: 40%;
}

.rightside {
   position: relative;
   float: right;
   max-width: 50%;

}

/* specific styles for flex content */

.flexcontainer-header {
   display: flex;
   width: 100%;
   justify-content: space-around;
   
}

.flexcontainer-header div, p{
   padding: 3%;
   letter-spacing: 4px;
   font-size: 3rem;
   color: #D2DCB6;
   
}

.flexcontainer-header a {
   max-width: 3%;
   height: 3%;
   padding-top: 4%;
}


.flexcontent p, form {
   letter-spacing: 4px;
   font-size: 1.4rem;
   height: auto;
   max-width: 50%;
   color: #D2DCB6;
   padding: 3%;
   
}

.flexcontent {
   display: flex;
   max-width: 100%;
   justify-content: space-around;
}

/* img styles */ 

.flexcontent img {
   max-width: 50%;
   height: auto;
}

.flexcontent div{
   flex-flow: row;
   max-width: 50%;
   height: auto;
   justify-content: space-around;
}





/* tables and forms */

td, th{
   padding: 3%;
   letter-spacing: 4px;
   font-size: 1.4rem;
   height: auto;
   max-width: 50%;
   color: #D2DCB6;
}

th{
   font-size: 2rem;
}

form {
   position:absolute;
   bottom: 20px;
}




/* DL list styles for experience */

dl {
   letter-spacing: 4px;
   font-size: 1.5rem;
   color: #D2DCB6;
   width: 40%;
   text-align: center;
   background-color: #648159;
   border-radius: 3%;
}

dt {
   margin-top: 3%;
   font-size:2rem;
   text-decoration: underline;
   text-decoration-color: #734d81;
   text-underline-offset: 20%;
}

dd::before {
   content: '\21B3 ';
}

dd {
   font-size: 1rem;
   text-align: left;
   margin: 3%;
   text-wrap: wrap;
}

.date{
   font-style: italic;
   font-size: .7em;
}

.date::before{
   content:"";
}





/* small screen / table styles 

@media screen and (min-width: 500px), print {
    figure {
        display: block;

    }
}
    */

/* standard / large scren styles 

@media screen and (min-width: 864px) {
    header {
        background-color: white;
    }

    h1 span {
        display: none;

    }

    h1 img {
        display: block;

    }

    article {
        float: left;
        width: 64%;
    }

    aside {
        display: block;
    }

}
    */

/* print styles 
@media print {
   .container, h1, h2, p {
      color: black;
      background: white;
   }
   nav {
      display: none;
   }
}
@page {
   margin: 1in;
}
   */