/*** Fonts ***/
@font-face {
  font-family: dogica;
  src: url(/public_html/fonts/TTF/dogica.ttf);
}

@font-face {
  font-family: source;
  src: url(/public_html/fonts/OTF/SourceSansPro-Regular.otf);
}

/*** Global site ***/
body{
  background-color: whitesmoke;
  font-family: dogica;
}

div{
margin-top: 64px;
}

img{
width: 75%;
height: auto;
}

header{
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

hr{
margin-left: 384px;
margin-right: 384px;
}

ol.link-list{
/*margin-left: 138px;*/
line-height: 32px;
/*text-align: left;*/
}

/*** text edit ***/
.text{
font-family: source;
font-size: 18px;
text-align: left;
margin-left: 384px;
margin-right: 384px;
letter-spacing: 0px;
word-spacing: 1px;
line-height: 26px;
}

.note{
font-family: dogica;
font-size: 16px;
text-align: left;
margin-left: 384px;
margin-right: 384px;
letter-spacing: -1px;
word-spacing: -4px;
line-height: 30px;
color: #73172d;
}

.pixel{
font-family: dogica;
font-size: 16px;
text-align: center;
letter-spacing: -2px;
word-spacing: -4px;
line-height: 24px;
margin-left: 128px;
margin-right: 128px;
}

.title{
font-family: dogica;
margin-top: 64px;
font-size: 18px;
margin-left: 384px;
color: red;
text-align: left;
}

.title2{
font-family: dogica;
font-size: 22px;
margin-left: 384px;
color: red;
text-align: left;
}

/*** Flexbox ***/
.flexbox-container{
display: flex;
margin-left: 384px;
}

.flexbox-item{
padding-right: 200px;
}

.flex-title{
font-size: 20px;
line-height: 30px;
color: red;
text-align: left;
}

/*** Navigation Bar ***/
nav ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
margin: 0;
padding: 0px;
}

nav{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
width: 100%;
height: 42px;
background-color: #333;
}

nav ul li{
float: left;
}

nav ul li a:hover{
background-color:  	black;
}

.active{
background-color: #F9A31B;  /** currend side **/
color: #73172d;
}

/*** Dropdown menu ***/  
nav ul li{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  float: left;
  list-style: none; /* no bulletpoints */
  position: relative;
}

nav ul li a{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  display: block;
 /*text-align: center;*/
  padding: 14px 12px;
  text-decoration: none;
  color: red;
}

nav ul li ul{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 42px;
  display: none;
  position: absolute;
  background-color: #333;
  padding: 8px;
}

nav ul li:hover ul{
  display: block;
}

nav ul li ul li{
  width: 400px;
}

nav ul li ul li a{
  padding: 12px 2px;  /* Spacing dropdown text */
}

nav ul li ul li a:hover{
  background-color:  	black;
}

/*** Book shelve ***/  
.colum1{
  float: left;
  padding: 32px;
  margin-left: 384px;
}

.colum2{
  float: left;
  padding: 32px;
}

.colum3{
  float: left;
  padding: 32px;
}

.colum4{
  float: left;
  padding: 32px;
}