/* === common styles === */
:root {
  --gold: #e1b975;
  --link: #7C7C7C;
  --link-hover: white;
  
  /* currently not used */
  --dark-grey: #1c1e21;
}

* {
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  min-height: 100vh;
  color: lightgrey;
  background-image: url(../resources/background.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: 'Times New Roman', Times, serif;
}

ul  { list-style-type: none; }
img { display: block; }

a {
  display: block;
  color: var(--link);
  text-decoration: none;
}

a:hover { color: var(--link-hover); }
.camelCase { font-size: x-large; }

.hflex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
/* === common styles === */


/* === aside styles === */
aside {
  position: fixed;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
}
aside ul { margin-left: 30px; }
aside li {
  display: flex;
  align-items: center;
}
#aside-logo {
  display: none;
  width: 136px;
  margin-left: 20px;
  /* changes the dEYEmond logo to color: #e1b975 */
  /*
    Thanks Barrett Sonntag, this tool is amazing :)
    credit: https://codepen.io/sosuke/pen/Pjoqqp
  */
  filter: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(1565%) hue-rotate(334deg) brightness(90%) contrast(95%);
}
#aside-stamp {
  display: none;
  width: 30px;
  margin-left: 10px;
  filter: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(1565%) hue-rotate(334deg) brightness(90%) contrast(95%);
}

aside li span {
  display: none;
  margin-left: 20px;
  color: var(--gold);
}
aside li span {
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 1px;
}
aside li:not(:last-child) { margin-bottom: 16px; }
aside a:hover {
  border-radius: 16px;
  box-shadow: 0 0px 34px 16px var(--gold);
}
/* === aside styles === */

/* currently used in slide article headers */
.vertical-div {
  display: inline-block;
  padding-right: 10px;
  border-right: 1px solid var(--gold);
}