@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(data/fonts/default.ttf) format('truetype');
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #000000;
  color: #969696;
}

img {
    max-width:100%;
}

h1,.white{
    color: #ffffff;
}
h2,.white{
    color: #ffffff;
}

a,.white {
    color: #ffffff;
}

.fw_content {
  width: 80%;
  margin: auto;
}

.sinistertarot {
  width: 100%;
  margin:  auto;
}

.lhpfaq {
  width: 100%;
  margin:  auto;
}

.lhpfaq_content {
  width: 80%;
  margin: auto;
}
.lhpfaq_content h1 {
  width: 80%;
  margin: left;
  font-size: 20px;
}

.sappho {
  width: 100%;
  margin:  auto;
}

.sapphoTable {
  width: 100%;
  height: 70%;
  margin: auto;
  text-align: center;
  vertical-align: top;
}

.sapphoTableData {
  vertical-align: top;
  text-align: center;
  width: 50%;
}

.correspondencestable {
    width: 80%;
    height: 70%;
    margin: auto;
    text-align: center;
}

.tarotTable {
    width: 80%;
    height: 70%;
    margin: auto;
    text-align: center;
}

.ctth {
    background-color: dimgray;
    color: black;
    font-weight: bold;
}

/* colors */
.bluebg {
    background-color: blue;
    color: white;
}
.yellowbg {
    background-color: yellow;
    color: black;
}
.greenbg {
    background-color: green;
    color: white;
}
.orangebg {
    background-color: orange;
    color: black;
}
.redbg {
    background-color: red;
    color: black;
}
.violetbg {
    background-color: violet;
    color: black;
}
.indigobg {
    background-color: indigo;
    color: white;
}
.silverbg {
    background-color: silver;
    color: black;
}
.blackbg {
    background-color: black;
    color: white;
}
.whitebg {
    background-color: white;
    color: black;
}
.goldbg {
    background-color: gold;
    color: black;
}
.purpurbg {
    background-color: #FF0066;
    color: black;
}


/* boxes */
.img-with-desc {
  width: 80%;
  height: 70%;
  margin: auto;
  text-align: center;
  font-style: italic;
  font-size: x-small;
}
.box-center {
    width: 80%;
    height: 70%;
    margin: auto;
    text-align: center;
}
.box-left {
    width: 80%;
    height: 70%;
    margin: auto;
    text-align: left;
}

.soundbox {
    text-align: center;
    margin: auto;
    width: 100%;
}

.chantsbox {
    width: 50%;
    margin: auto;
    text-align: center;
}

.abouttext {
    text-align: center;
    width:  80%;
    margin: 0 auto;
}

/* menu */
.menu-container {
    text-align: center;
    overflow: hidden;
    text-align: center;
    background-color: #111;
}
,.menu {
    list-style-type: none;
    background-color: #000;
}
.menu-item {
    display: inline-block;
    padding: 10px 12px;
    color: white;
    text-decoration: none;
    text-align: center;
    background-color: #111;
}
.menu-item:hover {
    background-color: #000;
}

footer {
    width: 80%;
    height: 70%;
    margin: auto;
    text-align: center;
}