@font-face {
font-family: "Morris";
src: url(/images/Morris\ Jenson\ Initialen.ttf);}

body {
  background-image: url(/images/frames/hanging_vines.png), url(/images/frames/lace_frame2.png), url(/images/backgrounds/red_shells.png);
  background-size: auto 300px, auto 150px, 320px;
  background-position-y: top, bottom;
  background-repeat: repeat-x, repeat-x, repeat;
  background-attachment: fixed;
  color: white;
  font-family:'Times New Roman', Times, serif;
  line-height: 1.3;
  font-size: 1.2rem;
  cursor:url(/images/icons/gauntlet.png), auto;
  }

                  
  p::first-letter {
       font-family: "Almendra SC", serif;
       font-size: 1.7rem;
    }

  .special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
}

.almendra-sc-regular {
  font-family: "Almendra SC", serif;
  font-weight: 400;
  font-style: normal;
}

  
* {
    scrollbar-width: auto;
    scrollbar-color: #bf8251 #d8bf8e;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #d8bf8;
}

*::-webkit-scrollbar-thumb {
    background-color: #d8bf8;
    border-radius: 10px;
    border: 3px none #bf8251;
}

::selection {
    background: #7e9fac
}

#crow:hover{
    transform: rotate(-5deg);
}

center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  width: 1150px;
  background-image: url(/images/backgrounds/green_leather.jpg);
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border: 0.5em solid;
    border-image-slice: 130 125 125 130;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(/images/frames/painting_frame.png);  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
}
  
/*Header and footer images*/
.header{
  height: 200px;
  overflow: hidden;
  background: url(/images/assets/bos_title.png); /*This is the image in the header and footer. Replace it with your own!*/
  background-size:80%;
  background-repeat: no-repeat;
  background-position: center;
  }

  .footer {
  height: 200px;
  overflow: hidden;
  }
  
  
.footer {
  height: 50px;
  }
  
.header img {
  border-top: 0px;
  }
  
  
/*Big title at the top of the page.  
.title {
  padding: 15px 10px 10px 20px;
  }

 .title::first-letter{
  font-family:"Almendra SC", serif;
  font-size: 3rem;
 }
  */
  
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

  h2{
    color: #60352d;
    font-family: "Almendra SC", serif;
    font-size: 1.5rem;
    margin-bottom: -15px;
    margin-top: 5px;
  }

  h3{
    font-family: "Almendra SC", serif;
    color: #313f50;
    margin-bottom: 1px;
  }

  #section-1{
    font-family: "Almendra SC", serif;
    text-align: center;
  }

   #section-1::first-letter {
       font-family: Morris;
       font-size: 4rem;
       font-weight: 400;
       vertical-align: sub;
    }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  text-align: center;
  background-image: url(/images/backgrounds/plain_paper.png);
  background-size: cover;
  border: 0.5em solid;
    border-image-slice: 130 125 125 130;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(/images/frames/painting_frame.png);
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: 10px;
  margin-left: 10px;
  }
  
.link a {
  font-size: 1.2rem;
  color: #60352d;
  font-family: 'Traveling _Typewriter', sans-serif;
  text-decoration: none;
  cursor:url(/images/icons/gauntlet.png), auto;
  }

.link a:hover{
  color: #3e5817;
}

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
  width: 200px;
  position: absolute;
  top: 0;
  }

.sidebar-left {
  margin-left: 10px;
  font-size: 0.98rem;
  }

.sidebar-left p{
  color: #313f50;
}

.sidebar-left a{
  color: #60352d;
  cursor:url(/images/icons/gauntlet.png), auto;
  }

.sidebar-left a:hover{
  color: #ffffff;
  }

   .sidebar-left h2{
    margin-bottom: -10px;
  }

  .sidebar-left h3{
    margin-bottom: -10px;
  }

   .sidebar-left ul{
    list-style-type: lower-roman;
    padding: 0px 0px 0px 30px;
  }
  
.main {
  margin-left: 220px;
  width: 710px;
  }

  
.sidebar-right {
  margin-right: 10px;
  margin-left: 10px;
  font-size: 0.98rem;
  }

.sidebar-right p{
  color: #313f50;
}

  .sidebar-right a{
    color: #60352d;
    cursor:url(/images/icons/gauntlet.png), auto;
  }

  .sidebar-right a:hover{
    color: #ffffff;
  }

   .sidebar-right h3{
    margin-bottom: -10px;
  }

  .sidebar-right ul{
    list-style-type: lower-roman;
    padding: 0px 0px 0px 30px;
  }

/*Box used for individual sections in the sidebar, center column, etc.*/
.box {  
  padding: 5px 10px 0px 10px;
  background-image: url(/images/backgrounds/light_blue_leather.png);
  background-size: 300px;
  color: #12282f;
  border: 10px solid transparent;
  border-image: url(/images/frames/whitelace.png) 34 round;
  background-clip: padding-box;
  margin: 10px 0px 15px 0px;
  }

  .main-box {  
  height: 100%;
  padding: 60px 80px 70px 80px;
  background-image: url(/images/backgrounds/plain_paper.png);
  color: #60352d;
  margin: 10px 0px 15px 0px;
  border-image: url(/images/frames/manuscript.png);
  border-image-slice:100 96 96 100;
  border-image-width:70px 70px 70px 70px;
  border-image-repeat:repeat repeat;
  }

  .main-box ul {
    list-style-type: lower-roman;
  }

  a {
    color: #354719;
    text-decoration: none;
    font-family: "Special Elite", system-ui;
    cursor:url(/images/icons/gauntlet.png), auto;
  }

  a:hover{
    color: #60352d;
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  }
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }
  
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    margin-left: 180px;
    width: 52vw;
    }
  }
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
  }