/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
  margin: 0;
  padding: 0;
  background-color: #303;       /* purple */
  background-image: url("WebBackground8.png");
  background-position: 0 0;
  background-repeat: repeat;
  color: #cfc;                  /* very pale green */
  font-family: sans-serif;
}
a:link {
  color: #eae;   /* base links - bright purple */
}
a:visited {
  color: #afa;   /* visited links - bright green */
}
a:hover {
  color: #faa;   /* mouseover - bright red */
}
a:active {
  color: #aaf;   /* clicky - bright blue */
}
div {
  background-color: transparent;
}
html {
  min-height: 100%
}
.top-button {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
}
.veneer-button {
  background-image: url("/Frontlink-Base3.png");
}
.veneer-button:hover {
  background-image: url("/Frontlink-Mouseover3.png");
}
.entelechy-button {
  background-image: url("/Bloglink-Base.png")
}
.entelechy-button:hover {
  background-image: url("/Bloglink-Mouseover.png");
}
.mixture-button {
  background-image: url("/Outlink-Base.png");
}
.mixture-button:hover {
  background-image: url("/Outlink-Mouseover.png");
}
.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.topbar {
  background-color: #303;         /* dark purple background */
  border: 5px solid #600;         /* red border lines */
  border-radius: 10px;            /* rounded corners */
  padding: 10px 20px;             /* space inside the bar */
  width: 60%;                     /* not full width, for a “box” feel */
  margin: 0 auto;              /* center */
  text-align: center;
  position: sticky;
  top: 0;
}
h1 {
  font-size: 4em;
  text-align: center;
  font-family: 'Rouge Script', 'Brush Script MT', cursive;
}
.pact {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout {
  display: flex;
  height: calc(100vh - 210px);
}
.sidebar {
  max-height: 95%;
  width: 20%;
  background-color: #303;
  border: 5px solid #600;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 0;
  margin-left: 1%;
  margin-right: 1%;
  overflow-y: auto;
  position: sticky;
  top: 210px;
}
.mainbar {
  max-height: 95%;
  width: 70%;
  background-color: #303;
  border: 5px solid #600;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 0;
  margin-left: 1%;
  margin-right: 1%;
  overflow-y: auto;
  position: sticky;
  top: 210px;
}