/* main style for CSS for UP */

:root {
  --primary: #336B87;
  --primary_lt: #D4DDE1;
  --secondary: #763626;
  --secondary_lt: #2A3132;
  --highlight: #90AFC5;
}


/* Color Scheme */
/* #336B87 - stone: page border
   #90AFC5 - mist: table hover
   #2A3132 - shadow: readMore, table border, a:link
   #763626 - autumn: a:visited
   #D4DDE1 - fog: wrapper background, footer text
*/



/***  icon and link back to itineranttau.com ***/
#home {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
}

#home img {
    width: 20px;
    height: auto;
    filter: invert(100%);
}



/***   Reset   ***/
* {
  box-sizing: border-box;
}

/* restyle ordered/unordered list */
ul, ol {
  padding-left: 20px;
}

li li {
  list-style-type: none;
  list-style-position: inside;
  margin-left: -10px;
}

li li::before {
    content: "-";
    padding-right: 10px;
}



/***  Basic Styles   ***/

body {
  width: 100vw;
  background: var(--primary);
}

#wrapper {
  width: 90vw;
  margin: 20px auto;
  background: var(--primary_lt);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary);
  margin: .5em;
}

/* main content left-hand 2/3(ish) */
main {
  width: 65%;
  float: left;
  padding: 0 20px 20px 20px;
  border-right: 1px solid var(--primary);
  border-radius: 10px;
}

article {
  position: relative; 
  padding: 0 2% 5%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--primary);
  border-radius: 20px;
  margin-bottom: 20px;
}

article img {
  width: 90%;
  margin: auto;
}

figure {
  margin: auto;
}


/* link styles */
a { text-decoration: none; }
a:visited { color: var(--secondary); }
a:hover { text-shadow: 0 0 1px var(--secondary); }
a:link { color: var(--primary); }

header h1 a:link,
header h1 a:visited,
header h1 a:hover,
header h1 a:active {
  color: var(--primary_lt);
}



/*  data lists */
dt {
  font-weight: bold;
}

dd {
  padding: 5px;
}

/* blockquote  and quote */
blockquote {
  border-right: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  border-radius: 10px;
  padding: 10px 20px;
  width: 75%;
  margin: auto;
  text-align: center;
}

q {
  font-style: italic;
}

/* for simple notes */
.note {
  color: var(--primary);
  font-style: italic;
}


/***   Header & Nav Styles   ***/

header {
  position: relative;
}

header > img {
  width: 100%;
}

header > h1 {
  position: absolute;
  top: 2vw;
  left: 2vw;
  font-size: 5vw;
  color: var(--primary_lt);
}

  
header > nav {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 67vw;
}

nav ul {
  list-style-type: none;
  font-size: larger;
  display: flex;
  margin: 0 auto;

}

nav li {
  padding: 1vw;
  background: rgb(212,221,225);
  background: rgba(212,221,225,.4);
  border-top: 1px solid var(--highlight);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-right: 1px;
}

nav li.active { 
  background: rgba(212,221,225,.75);
  border-top: 2px solid var(--highlight);
  border-left: 1px solid var(--highlight);
  border-right: 1px solid var(--highlight);
}



/***   Feature Article   ***/


#featureArticle {
/* create columns for featureArticle */
  display: block;
  height: auto;
  padding: 0 10px 15px;
	margin: auto;
  column-count: 3;
  column-gap: 20px;
}

#featureArticle h1, #featureArticle h2 {
  column-span: all;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}



/***   Side Content Styles   ***/

/* aside content right-hand 1/4(ish) */
aside {
  width: 31%;
  float: right;
  margin: auto;
  padding: 20px;
}

aside img {
  display: block;
	width: 98%;
  height: auto;
	margin: 15px 0 0 0;
	border-radius: 10px;
}

aside p {
  text-align: center;
}

meter {
	float: right;
  width: 55%;
}



/***   Footer Styles   ***/

footer {
  clear: both;
  width: 33%;
  margin-left: 68%;
  background: var(--primary);
  color: var(--primary_lt);
  padding: 20px 10px 0 10px;
  font-size: smaller;
  text-align: right;
  border-radius: 100% 0 0 10px;
}

footer a:link {
  color: var(--primary_lt);
}



/***   Mobile Styles  ***/

@media screen and (max-width: 700px) {
  main {
    width: 100vw;
  }
  #wrapper {
    width: 100%;
  }
  #featureArticle {
    columns: 0;
    display: inline;
  }
  aside {
    width:  100%;
  }
  aside h3 {
    text-align: center;
  }
  footer {
    width: 100%;
    margin: 0;
    padding: 10px;
    border-radius: 0;
  }
}