/* 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." */

/* Font Faces */
@font-face {
  font-family: Alagard;
  src: url("fonts/alagard.ttf");
}

@font-face {
  font-family: Cormorant;
  src: url("fonts/Cormorant.ttf");
}

@font-face {
  font-family: Daydream;
  src: url("fonts/Daydream.ttf");
}

@font-face {
  font-family: Gentium;
  src: url("fonts/Gentium.ttf");
}

@font-face {
  font-family: Magnific;
  src: url("fonts/Magnific.ttf");
}

/* Body */
body {
  background-color: white;
  background-image: url(pics/smallsun.JPG);
  background-position: center top;
  background-size: 2000px;
  color: black;
  font-family: Cormorant;
  font-size: 19px;
  margin: auto;
  padding: 50px;
  text-align: center;
  width: 1600px;
}

/* Footer */
footer {
  font-family: Gentium;
}

/* Hidden Element */
#more {
  display: none;
}

/* Links */
a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: firebrick;
  font-style: italic;
}

a:visited {
  color: black;
  text-decoration: none;
}

/* Columns and Rows */
.column {
  float: left;
  margin-bottom: 5px;
  width: 33.33%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

/* Lists */
ul {
  list-style-type: lower-roman;
  text-align: start;
}

/* Space Box */
.spacebox {
  background-color: white;
  background-image: url(pics/knot.png);
  background-position: center;
  background-color: white;
  border: 3px double white;
  border-radius: 8px;
  color: black;
  font-size: 23px;
  margin: auto;
  opacity: 0.7;
  text-align: center;
}

.spacebox a {
  font-size: 28px;
}
.spacebox a:hover {
  opacity: 0.9
}

/* Top Box */
.topbox {
  background-color: white;
  background-image: url(pics/devil.png);
  background-position: center left;
  background-size: cover;
  border: 3px double grey;
  border-radius: 8px;
  color: black;
  font-size: 23px;
  margin: auto;
  opacity: 0.5;
  text-align: center;
}

/* Logo Box */
.logobox {
  background-color: white;
  background-image: url(pics/fabric.jpg);
  background-position: center;
  background-size: cover;
  border: 3px double grey;
  border-radius: 8px;
  color: black;
  font-size: 23px;
  margin: auto;
  text-align: center;
  opacity: 0.7;
}

/* Iframe */
iframe {
  display: block;
  margin: auto;
  text-align: center;
}

/* Color Box */
.colorbox {
  background-color: white;
  background-size: cover;
  border: 3px double grey;
  border-radius: 5px;
  margin: auto;
  width: 850px;
}

/* Rows and Columns for Images */
.leftrow {
  display: block;
  float: left;
  margin-left: auto;
  margin-right: auto;
  width: 250px;
}

.centerrow {
  display: block;
  float:right;
  width: 840px;
}

.rightrow {
  display: block;
  float: right;
  width: 250px;
}

/* Discography */
.discog {
  background-color: white;
  border: 3px grey double;
  border-radius: 6px;
  height: 1000px;
  overflow: auto;
  padding: 20px;
  text-align: center;
}

.discog img {
  width: 200px;
}

.discog2 {
  background-color: white;
  border: 3px grey double;
  border-radius: 3px;
  height: 800px;
  overflow: auto;
  padding: 20px;
  text-align: center;
  width: auto;
}

.discog2 img {
  width: 200px;
}

/* Cards */
.card {
  background-color: white;
  border: 3px grey double;
  border-radius: 3px;
  opacity: 0.8;
  padding: 20px;
  text-align: center;
  width: auto;
}

.card p,
.card h4,
.card ul {
  color: black;
  letter-spacing: 0px;
  text-align: center;
}

.card h2 {
  font-family: Alagard;
}

.card a {
  color: black;
  font-size: 25px;
  text-align: center;
  text-decoration: none;
}
.card a:hover {
  color: pink;
  font-style: italic;
}

.navcard {
  background-color: white; 
  background-size: 700px;
  border: 3px grey double;
  border-radius: 3px;
  opacity: 0.8;
  padding: 13px;
  text-align: center;
  width: auto;
}

.navcard p,
.navcard h4,
.navcard ul {
  color: black;
  letter-spacing: 0px;
  text-align: center;
}

.navcard h2 {
  font-family: Alagard;
}

.navcard a {
  color: black;
  font-size: 25px;
  text-align: center;
  text-decoration: none;
}
.navcard a:hover {
  color: pink;
  font-style: italic;
}
/* Horizontal Rule */
hr {}