:root{
  --color-1-99: #f8f2dd;
  --color-1-90: #d4c8ac;
  --color-1-85: #ae9b76;
  --color-1-80: #a5946c;
  --color-1-70: #877853;
  

  --color-1-50: #877853;

  --color-1-30: #51210b;

  --color-2-50: #353d41;
  --color-2-40: #232a2d;
  --color-2-30: #0a142e;
  --color-2-20: #101011;  


  --color-1-60:#9c8e78;
  --color-1-40:#7a7154;
  --color-1-20:#4f4737;

/*
  --color-1-99:#f1efec;
  --color-1-90:#dcd7cf;
  --color-1-80:#c5bfb0;
  --color-1-70:#aea390;
  --color-1-60:#9c8e78;
  --color-1-50:#8b7e60;
  --color-1-40:#7a7154;
  --color-1-30:#645a45;
  --color-1-20:#4f4737;
  --color-1-10:#383226;
  --color-1-05:#1c1912;
  --color-1-00:#080705;
*/


  --focus-border-width:2px;
  --focus-border-style:solid;
  --focus-border-color:var(--color-1-80);
  --focus-border-radius: 6px;

  --letter-spacing:normal;

  /* Affects input, textareas, selects */
  --input-border-radius:6px;
  --input-border-color: var(--color-1-50);
  --input-border-width:2px;
  --input-border-style:solid;
  --input-text-color: var(--color-1-90);
  --input-background-color: var(--color-1-05);
  --input-padding:4px;
  --input-font-size:18px;


  /* Buttons */
  --button-border-radius:6px;
  --button-border-color: var(--color-1-50);
  --button-border-width:2px;
  --button-border-style:solid;
  --button-text-color: var(--color-1-90);
  --button-background-color: var(--color-1-40);
  --button-padding:6px;
  --button-margin:0px;
  --button-background-color-hover: var(--color-1-60);
  --button-background-color-active: var(--color-1-20);
  --button-text-color-active: var(--color-1-60);
  --button-background-color-disabled: var(--color-1-10);
  --button-text-color-disabled: var(--color-1-40);
  --button-border-color-disabled: var(--color-1-10);
  --button-font-size:18px;
  --button-text-decoration:none;

  --error-text-color: #f79058;


}

*,
::before,
::after {
  box-sizing: border-box;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    font-family:  Verdana, Geneva, Tahoma, sans-serif;
}
html, body
{
  width:100%;
  min-height: 100px;

}

body
{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(13, 13, 16);
  color:var(--color-1-99);
  
  height:100%;
}


button
{
    border-radius:var(--button-border-radius);
    border-color:var(--button-border-color);
    border-width:var(--button-border-width);
    border-style:var(--button-border-style);
    color:var(--button-text-color);
    background-color:var(--button-background-color);
    padding:var(--button-padding);
    margin:var(--button-margin);
    font-size: var(--button-font-size);
    text-decoration: var(--button-text-decoration);

}

button:hover
{
    background-color: var(--button-background-color-hover);
}
button:active
{
    background-color: var(--button-background-color-active);
    color: var(--button-text-color-active);
}

button:disabled
{
    
    border-color: var(--button-border-color-disabled);
    background-color: var(--button-background-color-disabled);
    color:var(--button-text-color-disabled);
}      
button:focus 
{
    outline: none;
    border-radius: var(--focus-border-radius);
    border-color: var(--focus-border-color);
    border-style: var(--focus-border-style);
    border-width: var(--focus-border-width);
    
}



footer
{
  display: flex;
  width: 100%;
  background-color: var(--color-2-20);
  justify-content: center;
  border-top: 2px solid #353d41;
  padding:10px;
}

h1, h2, h3
{
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  
  
}


header
{
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #101011;
  color:var(--color-1-70);
  
  border-bottom: 2px solid var(--color-1-70);
}

header h1
{
  margin-top: 8px;
  margin-left: 16px;
}
header nav
{
  margin: 8px;
}
header nav ul
{
  display: flex;
  flex-direction: row;
  list-style-type: none;


}
header nav ul li
{
  margin-left: 10px;
  
 
}

li a
{
  text-decoration: none;
  color:#ae9b76;
  background-color: #39342c;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid #ae9b76;
}
li a:hover
{
  color:#39342c;
  background-color: #ae9b76;
}

main
{
  display: flex;
  flex-direction: column;
  height:100%;
  width: 100%;
}



section
{
  display: flex;
  flex-direction: column;
  width: 80%;
  letter-spacing: 2px;
  margin-bottom:48px;
  margin-left:40px;
}
section h2,
section h1
{
  color: var(--color-1-90);
  margin:0px;
}
section h1
{
  font-size: 2.0em;
  
}
section p
{
  
  margin-left: 16px;
  line-height: 1.3em;
  font-size: 1.2em;
}

.content
{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1280px;
  align-items: center;
  background-color: #080909;
  height: 100%;
  min-height: 100px;
}


.flex-row
{
  display:flex;
  flex-direction: row;
}
.flex-column
{
  display:flex;
  flex-direction: column;
}


.nav
{
  align-items: center;
  justify-content: center;
  width:100%;
  margin: 0px;
  padding:12px;
  border-bottom: 2px solid var(--color-1-70);

}
.center
{
  align-items: center;
}

.logo-header h1, 
.logo-header h2, 
.logo-header h3
{
  color:var(--color-1-90);
  margin-top:10px;
  letter-spacing: .3em;
}
.logo-img
{
  margin-top:-10px;
  max-width: 100%;
  height: auto;
  padding-bottom:16px;
}


.w100{width: 100%;}
.h100{height: 100%;}

.pt32 {padding-top: 32px;}

.test
{
  background-color: red;
}

.hidden
{
  display: none !important;;
}