/* Style CSS page */

/* Classes sorted together in kind of order of importance but not really */

/*   COLORS
  orange - 87502F
  orange2 - C1805C
  darktan - B58F7B
  greyish - 4E3F43
  liBrown - 61463E
  Dark - 1A0D13
  brown - 301C1A
  light - E3C5B5
*/

/* Trade Winds Title Font */
@import url('https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap');

/* Header Font Classes */
h1 {
  font-family: "Trade Winds", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #B58F7B;
  text-align: center;
  font-size: 30px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

h1.sub {
  font-family: "Iansui", cursive;
  font-size: 25px;
}

h1.styleH {
  font-size: 80px;
  color: #C1805C;
  padding-bottom: 0px;
}

/* Iansui Text Font */
@import url('https://fonts.googleapis.com/css2?family=Iansui&display=swap');

/* Main Text Font Classes, slight difference mainly for color changes */
p {
  font-family: "Iansui", cursive;
  font-weight: 400;
  font-style: normal;
  color: #E3C5B5;
  text-align: center;
}

p.style2 {
  font-size: 20px;
  color: #B58F7B;
}

p.links {
  color: #C1805C;
}

/* Div that holds all other divs, for style mostly */
div.container {
  width: 1300px;
  margin: 20px auto;
  background-color: #281615;
  padding: 15px;
}

/* Grid layout style */
div.waffles {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  border: 0px;
  padding: 0px;
  width: 1300px;
  background-color: #281615;
}

/* Base Div */
div {
  width: 250px;
  margin: 20px auto;
  border: 5px double #87502F;
  background-color: #301C1A;
  padding: 15px;
}

/* Middle Box */
div.mid {
  width: 600px;
  margin: 20px auto;
  border: 5px double #87502F;
  background-color: #301C1A;
  padding: 0px;
}

/* Title Box */
div.header {
  width: 1150px;
  padding-bottom: 0px;
  padding-top: 0px;
}

/* Holds Embeded Video just for centering */
div.video {
  width: 580px;
  border: 0px;
  background-color: rgba(0, 0, 0, 0);
  padding-bottom: 0px;
  margin-bottom: 5px;
}

/* Main Text and Background colors */
body {
  color: #E3C5B5;
  background-color: #1A0D13;
}

/* Image Classes, some image styling in Index as well */
img.thumb {
  height: 320px;
  display: block;
}

img.sides {
  height: 200px;
  display: block;
}

img {
  height: 200px;
  width: auto;
  margin: auto;
  
}