/* Color Palette:
   *
   Color      Foreground/Text      Background
   Blue:      #1c11ab              #d5e1ed
   Orange:    #ed9014              #fff5b2
   Green:     #88cc27              #dbf3b9
   Gray:      #666666              #ccc
h1{font: 22pt courier; color: #000000}
h2{font: 14pt courier; color: #000000; font-weight: bold}
p{font: 12pt courier; color: #000000}

font-family: 'Amatic SC', sans-serif;
font-family: 'Sue Ellen Francisco', sans-serif;
font-family: 'Rock Salt', cursive;
font-family: 'Rancho', cursive;
font-family: 'Shadows Into Light', cursive;
font-family: 'Reenie Beanie', cursive;
font-family: 'Patrick Hand SC', cursive;

*/ 

:root{
  --main-color-dark: #4e3515;
  --main-color-light: #d5e1ed;
  --sub-color-dark: #266029;
  --sub-color-light: #a2b37d;
  --third-color-dark: #4523ac;
  --third-color-light: #dbf3b9;
  --text-color: #000000;
}

* {
  padding:0;
  margin:0;
}

body {
    width:  100%;
    display:block;
    background-color: white;
    background-image: url(../graphics/green_cup.png);
    background-attachment: fixed;
}

h1{
    font-family: 'Rock Salt', sans-serif;
    color: var(--main-color-dark);
    font-size:50px;
    padding-top:50px;
    border-bottom: 4px solid var(--main-color-dark);
    padding-bottom: 50px;
    background-repeat: no-repeat;
    text-align: center;
}

h2{
    font-family: 'Amatic SC', sans-serif;
    font-weight:normal;
    font-size:18px;
    color: var(--main-color-dark);
    padding-left:25px;
    margin-top: 10px;
    line-height:1.5;
    background-image: url(../graphics/green_cup.png);
    background-attachment: fixed; 
}

div{
    display:block;
}

a img {border: none}
a.one{color: #ffffff}
a:visited.one{color: #ffffff}

a.textone {
    color: var(--main-color-dark); 
    text-decoration: none;
}

a:hover.textone{
    color: var(--third-color-dark);
}

img.centered{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* All of the content on each page goes in a pad-section */
.pad-section {
  padding: 50px 0;
  position: relative; /* Required for proper footer placement */
  min-height: 100vh; /* Required for proper footer placement */
}

/* The container is just inside the pad-section on each page. 
   It gives the effect of adding a margin to the page. 
   It's a Bootstrap thing, but we pad the bottom to make room for the footer. */
.container {
  padding-bottom: 3em; /* Same as footer height */
}

/* Footers are a pain. They should be the last thing that you see when you 
scroll all the way down, and they shouldn't move. */ 
footer {
  bottom: 0;
  width: 100%;
  height: 3em;
  
  font-family: courier;
  margin-top: 100px;
  padding-top: 10px;
  clear: both;
  margin-bottom: 10px;
  color: var(--third-color-dark);
  text-align: center;
}

#container{
    width: 800px;
    margin: 0 auto;
    font-family: courier;
    font-size: 16px;
    line-height: 1.6em;
    color: var(--text-color);
}

#header{
    font-family: 'Rock Salt', sans-serif;
    color: var(--main-color-dark);
    font-size:50px;
    padding-top:50px;
    border-bottom: 4px solid var(--main-color-dark);
    padding-bottom: 50px;
    background-repeat: no-repeat;
    text-align: center;
}


/* ------------------------------------------------------ */
/*                      Note Card                         */
/* ------------------------------------------------------ */

div.note_card{
    font-family: courier;
    font-size: 16px;
    line-height: 1.6em;
    color: var(--text-color);
    background-image: url(../graphics/square.gif);
    box-shadow: 8px 8px 4px #888888;
    margin: 0px 12px 12px 0px; /* Margins provide room for the shadow! */
    padding: 8px;
}

.note_card h2{
    font-family: 'Shadows Into Light', sans-serif;
    font-weight:normal;
    font-size:32px;
    color:var(--sub-color-dark);
    text-align: center;
    background-image: none;
}

.note_card a{
    text-decoration: none;
}

.note_card p{
    padding: 1em 2em 1em 2em;
}

/* "post" is style for main page */
/* Style of an image inside a div of note_card class */
div.post>img {
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Style of an image inside a link in a div of note_card class */
div.post>a>img {
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* "artpost" is style for artwork page */
/* Style of an image inside a div of note_card class */
div.artpost>img {
  max-width: 90%;
  max-height: 80vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Style of an image inside a link in a div of note_card class */
div.artpost>a>img {
  max-width: 90%;
  max-height: 80vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------ */
/*                Horizontal Navigation Bar               */
/* ------------------------------------------------------ */

#navbarh {
    width: 100%;
    height: 100px;
    margin: 0;
    font-size: 1.0em;
    float: left;
    text-align: center;
}

#navbarh li {
    font-family: 'Shadows Into Light', sans-serif;
    font-size:24px;
    height: 100%;
    list-style: none;
    padding: 5px 25px;
    margin: -4px;
    display: inline;
    border-left: var(--main-color-dark) solid;
    border-right: var(--main-color-dark) solid;
    border-width: 1px;
    color: var(--main-color-dark);
}

#navbarh li:hover {
    position: relative;
    background-color: var(--sub-color-light);
    color: var(--sub-color-dark);
    opacity: 0.5;
}

#navbarh a {
    cursor: pointer;
    width: auto;
    text-decoration: none;
    height: 25px;
    line-height: 25px;
    text-indent: 10px;
}