
:root {
  --scheme-1-dark: #372c1e;
  --scheme-1-light: #ba7f2c;

  --scheme-2-dark: #212a2f;
  --scheme-2-light: #737f85;

  --scheme-3-dark: #4a4833;
  --scheme-3-light: #d3d7b5;

  --main-font-color-dark: var(--scheme-3-dark);
  --main-font-color-light: var(--scheme-3-light);
}

body {
  font-family: "Calibri", 'helvetica neue', sans-serif;
}

.mainTitle
{
  color: var(--main-font-color-light);
  text-shadow: 4px 4px var(--main-font-color-dark);
  text-align: center;
  background-image: url('../images/border_4k.png');
  background-position: center; 
  height: 500px;
  width: 100%;
  font-size: 8rem;
  font-family: "Futura", "Franklin Gothic", arial;
}

.mainTitle h1
{
  vertical-align: middle;
  font-size: 8rem;
  white-space: nowrap;
}

.mainTitle h2
{
  vertical-align: middle;
  font-size: 4rem;
  white-space: nowrap;
}


.mainNavBarHeader {
  background-color: var(--main-font-color-dark);
  padding: 0px;
}

.mainNavBarItem {
  background-color: var(--main-font-color-dark);
  color: var(--main-font-color-light);
  padding: 0px 40px;
  margin: 0px;
  border: 0px;
  transition: background-color 200ms, color 200ms;
}

.mainNavBarItem:hover {
  background-color: var(--main-font-color-light);
  color: var(--main-font-color);
}

.sideBarCard{
  border: 0px;
}

.sideBarCardTitle{
  margin-top: 6px;
  margin-bottom: 6px;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: var(--main-font-color-light);
}

.sideBarCardTitle a{
  color: var(--main-font-color-dark);

  transition: color 200ms;
}

.sideBarCardTitle:hover a{
  color: var(--main-font-color-light);
  text-decoration: none;
}


.sideBarList{
  list-style-type: none;
  padding-left:0;
}

.sideBarList li {
  margin-top: 6px;
  margin-bottom: 6px;
  text-indent: 0.25rem;
  color: var(--main-font-color-dark);
  border: none;
  -webkit-transition: width 200ms; /* For Safari 3.1 to 6.0 */
  transition: text-indent 200ms, color 200ms;
}

.sideBarList li:hover {
  text-indent: 1rem;
  color: var(--main-font-color-light);
}

.sideBarList li .animLine{
  position: absolute;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;

  border-width: 1px 1px 0;
  border-style: solid;
  border-color: var(--main-font-color-light);
  
  width: 100px;
  height: 0px;

  transition: width 200ms;
}

.sideBarList li:hover .animLine{
  width: 100%;
}

.sideBarList li .statLine{
  position: absolute;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;

  border-width: 1px 1px 0;
  border-style: solid;
  border-color: var(--main-font-color-dark); 
  
  width: 100%;
  height: 0px;
}

.footer {
  bottom: 0;
  width: 100%;
  height: 40px;
  background-color: var(--main-font-color-dark); 
  color: var(--main-font-color-light);
}

.errorMsgCommentForm
{
  color: red;
  font-style: italic;
}

