@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");

:root {
  --transparent-grey: rgba(180,180,180,0.35);
  --average-black: rgb(125,125,125);
  --dark-black: rgb(30,30,30);
  --inversion-color: rgb(255,255,255);
  --white-pure: rgb(250,250,250);
  --white-dull: rgb(180,180,180);
}


html, body, head, div, title, p, h1, h2, h3 {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}


html {
  min-height: 100%;
  width: 100%;
  font-size: 15pt;
  font-weight: 300 !important;
  letter-spacing: -0.025em;
  line-height: 1.75em;


  background-image: url("../../common/images/bg.jpg");
  background-size: 100vh 100vw;
  background-position: (0,0);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}


body {
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
}

.wrapper {
  height: 100%;
  align-items: center;
}

#nav {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1.5em 0 1.5em 0;
  overflow: hidden;
  z-index: 5;
}

#nav > ul{
  position: relative;
  display: inline-block;
  margin: 0;
  border-left: solid 2px var(--transparent-grey);
  border-right: solid 2px var(--transparent-grey);
  height: 2em;
  font-size: 1em;
  font-stretch: expanded;

}

#nav > ul:before, #nav > ul:after {
  content: '';
  display: block;
  border: solid 2px var(--transparent-grey);
  position: absolute;
  width: 1%;
  top: 50%;
  margin-top: -2px;
  height: 1px;
}

#nav > ul:before{
  left: 100%;
  margin-left: 1px;
}


#nav > ul:after{
  right: 100%;
  margin-left: 1px;
}

#nav  > ul > li {
  display: inline-block;
  border-radius: 5em;
  margin: 0.5em 1.5em 0.5em 1.5em;
  border-color: transparent;
  font-size: 1.2em;

}

#nav > ul > li > a {
  font-weight: bold;
  text-decoration: none;
  border-radius: 0.4em;
  padding: 0.8em;
  border: solid 3px transparent;
  color: var(--average-black);
  -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
}

#nav > ul > li > a:hover {
  background-color: var(--inversion-color);
  border-color: rgba(192, 192, 192, 0.35);

}



.content {
  height: 100%;
  width: 100%;
  padding-top: 10%;
  text-align: center;
  align-items: center;
}

.title {
  font-size: 5em;
  color: var(--white-pure);
  font-weight: bold;
  padding: 1em;
  width: 100%;
  line-height: 1em;
  text-align: center;

}

.title > h1 {
  color: var(--white-pure);
  text-shadow: 0.02em 0.02em black;
}

.posts {
  position: relative;
  border-radius: 0.8em;
  width: 80%;
  margin: auto;
  background-color: var(--white-pure);
}

.posts > h1 {
  position: relative;
  font-size: 2em;
  font-weight: bold;
  width: 80%;
  margin: auto;
  padding: 1em 0.5em 1em 0.5em;
  background-color: pink;
}

.posts > p {
  font-size: 1em;
  position: relative;
  width: 80%;
  margin: auto;
  padding: 1em 0.5em 1em 0.5em;
  background-color: var(--white-pure);
}


.artwork {
  width: 80%;
  margin: auto;
  background-color: var(--white-pure);
}


.single_art {
  width:90%;
  margin: auto;
  padding: 1em 0 0 0;

}

.single_art > img {
  max-width: 100%;
}

.single_art:last-child {
  padding-bottom: 3em;
}

#footer {
  position: relative;
  width: 100%;
  bottom: 5%;
  text-align: center;
}

#footer > nav {
  display: block;

}

#footer > nav > ul{
  list-style: none;
  position: relative;
}

#footer > nav > ul > li {
  align-items: center;
  display: inline-block;
  width: 1.5em;
  height: 2em;
  padding: 1em;
}

#footer > nav > ul > li > a > i{
  height: 50%;
}

#footer > nav > ul > li > a {
  position: absolute;
  align-self: center;
  /* left: 0; */
  height: 1.8em;
  width: 1.8em;
  border-radius: 0.5em;
  color: var(--dark-black);
  background-color: var(--white-pure);
  z-index: 5;
  border: solid 3px transparent;
  -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;
	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-color 0.35s ease-in-out;

}

#footer > nav > ul > li > a:hover {
  /* background-color:x */
  background-color: var(--white-dull);
  border-color: rgba(192, 192, 192, 0.35);
  cursor: pointer;
}