/* styling from: https://www.w3schools.com/howto/howto_css_responsive_header.asp */
:
* {box-sizing: border-box;}

body { 
  /* center within width */
  width: 95vw;
  max-width:1000px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  margin: 0;
  font-family: 'Bodoni Moda', serif;
  font-style: normal;
  font-weight: 400;
}

.bodyFont {
  font-family: 'Bodoni Moda', serif;
  font-size: .9em;
}

a {
  font-optical-sizing: auto;
}

/* order matters */
a.active, a:active {
  border: 1px white solid;
}
/* end-order matters */

a:hover {
  color:red;
}
a:visited, a:link {
  color:darkred;
}

.bd-solid {
  border-width: 1px;
  border-style: solid;
}
.bd-col-white {
  border-color: white;
}
.bd-col-blue {
  border-color: #87ceeb; /* blue */ /* pastel sky blue light */
}

.title, #TITLE {
  color: #222222;
  font-size: 2.0em;
  font-family: 'Funnel Display', sans-serif;
  font-style: normal;
  font-weight: 300;
}
/*
h1, h1 a {
  font-family: 'Epilogue', sans-serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 200;
  color: red;
  text-decoration: none;
}
h1 a:visited {
  color: red;
}
*/
h2, h2 a {
  font-family: 'Epilogue', sans-serif;
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  /* color: #5b4816; /* brown */
  color: #120813; /* deep blue green */
}
h2 a:visited {
  /* color: #5b4816; /* brown */
  /*color: #120813; /* deep blue green */
  color: darkred;
}
h2 a:hover {
  /*color: #87ceeb; /* blue */ /* pastel sky blue light */
  /* background-color: #5b4816; /* brown */
  /*background-color: #120813; /* deep blue green */
  color: red;
}
h3 {
  /* font-weight: bold; */
}

.bodyContentTop {
  padding-top:10px;
}

.button {
  text-align: center;
  padding: 12px;
  font-size: 0.9em; 
  line-height: 25px;
  border-radius: 4px;
}
.colBlack {
  color: #222222; /* a black */
}
.colWhite {
  color: #ffffff; /* white */
}
.colRed {
  color: red; /* red */
}
.colBlue {
  color: #87ceeb; /* blue */ /* pastel sky blue light */
}
.colBrown {
  color: #5b4816; /* brown */
}
.colDeepBlue {
  color: #120813; /* deep blue green */
}

.bkgndStd {
  background-color: #FFC300; /*yellow*/
  /*background-color: #FFFAFA; /*snow*/
  /*background-color: rgb(91, 72, 22);/* brown */
  /*background-color: #120813; /* deep blue green */
}
.bkgndLayer {
  background-color: #FFFAFA; /*snow*/
  /*background-color: #EBEBEB; /*lightgrey; /* grey */
  /*background-color: rgb(135, 206, 235);/*blue light*/
  /*background-color: #87ceeb; /* pastel sky blue light */
}
.bkgndBright {
  /*background-color: #FF5733;  /* orange */
  /* background-color: rgb(91, 72, 22);/* brown */
  background-color: #120813; /* deep blue green */
}

/* Header */

.header {
  font-optical-sizing: auto;
  margin-bottom: 10px;
}

.header-right {
  text-align: right;
  float: right;
}
.header-left {
  text-align: left;
}
/* Change header display when screen width gets small */
@media screen and (max-width: 400px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
}

.toTop {
  float: right;
  margin-right: 0;
  font-family: 'Epilogue', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: .8em; 
}

.floatright {
  float: right;
  margin-right: 0;
}

/* menu & about sections  */

.section {
  margin: 1rem 0 0 1rem;
  padding: .8em;
  border-radius: 4px;
}

/* projecs */
.project {
  margin: 1rem 0 0 1rem;
  padding: .8em;
  border-radius: 4px;
}
.balancedColumns {
  column-width: 200px;
  column-fill: balance;
  column-count: 3;
}
.columnText {
  padding-left: .8em;
  padding-right: .8em;
  padding-bottom: .8em;
  line-height: 1.3em;
}

/* utilities  */
.tinyFont {
  font-size: .6em; 
}
.smallFont {
  font-size: .7em; 
}