@font-face {
    font-family: chapbookreg;
    src: url(../chapbookotf/Chapbook-Regular.otf);
}


@font-face {
    font-family: chapbookital;
    src: url(../chapbookotf/Chapbook-Italic.otf); 
}

@font-face {
    font-family: chapbookding;
    src: url(../chapbookotf/Chapbook-Dingbats.otf); 
}

body{
    margin: 0;
    background-color: antiquewhite;
}

h1, h2, h3, h4 {
    font-family: "chapbookreg" , "garamond";
}

.dyht{
    margin-right: -30px;

}

.navlist{
    display:flex;
    align-items: center;
    justify-content: center;
    font-family: "chapbookreg" , "garamond";
    color: black;
    font-size: larger; 
    margin-top: 0 ;
    margin-bottom: 0;
    padding-top: 0 ;  
    flex-wrap: wrap;
    flex: 1 1 auto;
    
}





.navtop a {
    color: black;
}

.navtop a:link {
    color: black;
    text-decoration: none;
}

.navtop a:visited{
    color: darkslategrey;

}

.navtop a:hover{
    color:crimson;

}

.navtop a:active{
    background-color: black;

} 


.navtop li {
    list-style: none;
    border-bottom: black solid 2px;
    border-top: black solid 2px;
    padding: 10px;
    
}.noborder li {
    border-style: none;
    padding: 0 ;

}


.catalogbar{
    background-color: #2A2F33;
    color: white;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
    margin: 0;
}


.maincontent{
    margin: 0px auto;
   /* max-width: 1200px; */
    padding: 0px 0px;   
    /* padding: 0px 20px; */ 


}




.spotlightcont{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px 20px; /* may remove */

}




.highlighttop{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.titem {
    margin: 5px 5px;
    max-width: 200px;

}

.bitem{
    margin: 5px 5px;
    max-width: 200px;
}

.highlightbottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


.spotlft{
    width: 60%;
}

.spotrt{
    margin: 20px;
    border: solid #74112F 2px;
    padding: 5px 5px;
    width: 30%;
}




.eventsall{
    background-color: #2A2F33;
    color: white;
    padding: 5px 20px;
}

.eventcont{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.eventsp1 {
    width: 250px;
    
}



footer {
    display: flex;
    flex-wrap: wrap;
    background-color: #3B4754;
    color: white;
    justify-content:space-between;
    font-size: smaller;

}

footer td, th {
    color:white;
    font-size: smaller;
}


.libcardcont {
    display: flex;
}
.leftpan{
    justify-content: center;
    align-items: center;
    margin: 20px;

}

.libcardrightpan{
    margin: 20px;
}

.aboutmain{
    text-align: center;
    margin: 20px;
    
   
}

.aboutmaincont{
    text-align: center;
    
  

}

.refbody{
    background-image: linear-gradient(#ff0000, #ffa500, #ffff00, #008000, #0000ff, #ee82ee);
}

.refheader{
    background-color: antiquewhite;
}



.refsectionall{
    text-align: center;
    display: flex;
    flex-direction: column;




}
.refsection1{
    width: 96%;
    background-color: antiquewhite;
    padding: 20px;
    align-self: flex-start;
    text-align: left;
    
}

.refsection2{
    width: 96%;
    color:white;
    background-color:#2A2F33 ;
    padding: 20px;
    align-self: flex-end;
    text-align: right;
    
}

.refsection2 td{
    color:white;
    font-size: larger;
    border: 1px solid antiquewhite;
    border-collapse: collapse;
    padding: 5px;

}

.refsection2 table{
    color:white;
    font-size: larger;
    border: 1px solid antiquewhite;
    border-collapse: collapse;


}

.refsection2 th{
    color:white;
    font-size: larger;
    border: 1px solid antiquewhite;
    border-collapse: collapse;
    padding: 5px;

}
.refsection2map{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

input{
    background-color: ivory;
}

textarea{
    background-image: linear-gradient( #ff00006b, #ffa5006b, #ffff006b, #0080006b, #0000ff6b, #ee82ee6b);
}