/* Moving Checkered Background */
  body{
    background: 
      linear-gradient(225deg, #CAA347 25.5%, transparent 25%, transparent 75%, #CAA347 75%, #CAA347 0), 
      linear-gradient(225deg, #CAA347 25.5%, transparent 25%, transparent 75%, #CAA347 75%, #CAA347 0), #DCC080;
    background-repeat: repeat, repeat;
    background-position: 0 0, 13px 13px;
    background-size: 25px 25px, 25px 25px;
    animation: move 5s linear infinite;
    overflow-x: hidden;
  }
  
  @keyframes move{
    100%{
      background-position: -100px 0px ,-87px 13px;
    }
  }
  
  
  /* Fonts */
  
  @font-face {
    font-family: 'freepixel';
    src: url(./assets/fonts/freepixel/freepixel-webfont.woff);
  }
  
  h1, h2, h3 {
    font-family: "Emilys Candy", serif;
  }
  p, a, li {
    font-family: 'Shadows Into Light Two', cursive;
  }
  h1, h2, h3, p, a {
      color: #333;
  }
  
  .comp-text {
    font-family:'freepixel';
  }

  a {
    z-index:999;
  }

  .container {
    width:100%;
  }
  
  .inner-container-border{
     margin: 10vh auto;
    max-width: 800px;
    background: linear-gradient(35deg,#679C2E,#B31D0C,#69CC00,#B31D0C,#679C2E,#B31D0C,#69CC00,#B31D0C,#679C2E,#B31D0C,#69CC00,#B31D0C,#679C2E,#B31D0C,#69CC00,#B31D0C,#679C2E,#B31D0C,#69CC00,#B31D0C,#679C2E,#B31D0C,#69CC00,#B31D0C);
    box-shadow: 0 0 32px rgba(0,0,0,0.5);
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:5px;
  }
  
  .inner-container-border.center-col {
    min-width: 300px;
  }
  
  .inner-container {
      background-color: #EFF8E2;
      width:100%;
      height:100%;
  }
  
  .footer-wrapper {
    background-color:#EFF8E2;  
  }
  
  .title {
    padding:32px 0px;
    width:100%;
    text-align:center;
    margin: auto;
  }

  .main {
      margin: 26px;
      display:flex;
      justify-content: space-between;
      flex-wrap: nowrap;
  }

  .right-sidebar {
      position:relative;
      display:flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      padding:12px;
      border: 3px double #fff;
      background-color: #945928;
      min-height: 400px;
      padding-bottom:100px;
  }
  
  .right-sidebar img {
    display:absolute;
    bottom:0;
    right:0;
    }
    
  .right-sidebar p {
      margin: 0 0 12px 0;
  }
  
  .right-sidebar p, .right-sidebar a, .right-sidebar h2 {
    color: #fff;
  }
  
  .under-sidebar-deco {
    text-align:center;
    width:100%;
  }
  
  .under-sidebar-deco p {
    color: #945928;
    font-size:24px;
    margin: 0px;
    padding:0px;
  }

  h2 {
      margin:0;
  }
  
  * {cursor: url(https://cur.cursors-4u.net/anime/ani-11/ani1019.cur), auto !important;}



::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #4d8050; 
}
 
::-webkit-scrollbar-thumb {
  background: #f7ca34; 
}

::-webkit-scrollbar-thumb:hover {
  background: #ffdd6e; 
}



.kaoani-collection img {
  padding: 12px;
}

.footer {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10vh auto;
}

/* christmas candy cane divider */
.candy-cane-divider{
  background: repeating-linear-gradient(
    45deg,
    white,
    white 10px,
    red 10px,
    red 20px
  );
}


.rainbow-dots {
  width:100%;
  height:3px;
  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}
  
.rainbow-dots hr {
  width:100%;
  border: dotted 3px #fff;
}

.lists ul {
  padding-inline-start: 0px;
  list-style-type: none;  
}

.lists ul, .lists li {
  font-size: 14px; 
}

.new-book-lists {
display:flex;
justify-content:flex-start;
align-items:flex-start;
flex-wrap:nowrap;
}

.outside-bar {
  width:100%;
  }
.outside-bar-inner {
  margin: auto;
  max-width:800px;
  text-align:center;
  }


/* Photos Page Gallery */
.gallery-images-container {
  display:flex;
  flex-wrap:wrap;
}

.gallery-images-container img {
  height: 100px;
  width: 100px;
  margin: 10px;
  object-fit: cover;
  opacity: 0.8;
  transition: all 0.3s;
  border: 3px dashed lightblue;
}

.gallery-images-container img:hover {
  opacity: 1;  
}

.photo-gallery {
  display:flex;
}

.photo-gallery ul li{
  transition: all 0.2s;
}

.photo-gallery ul li:hover, .photo-gallery ul .selected {
  font-weight:bold;
}

.left-photo-sidebar {
  min-width:150px;
  }
  
  
.container-inner {
  margin:auto; 
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  max-width:1000px;
}

.header-wrapper {
    max-width:1000px;
    margin: 5vh auto 0 auto;
}

.inner-container-border.header {
  width:100%;
  max-height:200px;
  max-width:990px;
  margin: 0px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}


.container-inner .inner-container-border {
    margin:12px;
    max-width:1200px;
    width:100%;
}
.container-inner .inner-container-border.left-bar {
      margin:12px 0 12px auto;
  }
.container-inner .inner-container-border.right-bar {
      margin:12px auto 12px 0;
  }
  
@media screen and (max-width: 600px) {
  .container-inner .inner-container-border.left-bar {
    display:none;
  }
  .container-inner .inner-container-border.right-bar {
    display:none;
  }
  .container-inner {
    flex-wrap: wrap;
    }
  .top-nav-bar {
    display:block;
    color:white;
  }
  .top-nav-bar a, .top-nav-bar a:hover {
    color:white;
  } 
  .inner-container-border.header {
    width: fit-content;
  }
  .header-wrapper {
    margin: 3vh auto 0 auto;
  }
  .photo-gallery {
    display:block;
  }
  .left-photo-sidebar ul li {
    text-align:center;
  }
  
}

@media screen and (min-width: 600px) {
  .top-nav-bar {
    display:none;
  }
}
  
.header-image {
  width:100%;
  height:100%;
  object-fit:contain;
  
  }
  
  /* Small World Clock Styles */
  
  #mb-clock {
    width:100%;
    height:100%;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:url(assets/mygifs/mb-clock-animation.gif);box-shadow:none;
  }
  #clock-hour, #clock-minute, #clock-second {
      position: absolute;
      background: #333;
      border-radius: 0px;
      transform-origin: bottom;
      border:1px solid white;
  }
  #clock-hour {
      width: 2%;
      height: 25%;
      top: 25%;
      left: 48.85%;
  }
  #clock-minute {
      width: 2%;
      height: 30%;
      top: 19%;
      left: 48.9%;
  }
  #clock-second {
      width: 2%;
      height: 40%;
      top: 9%;
      left: 49.25%;
  }
  #clock-center {
    position:absolute;
    top: calc(40%-8px);
    left: calc(40%-8px);
    background-color:#333;
    border-radius:20px;
    border:1px solid white;
    width:16px;
    height:16px;
  }
  
  /* Tunes Box */
  .tunes-outer-container {
    width:184px !important;
    height:368px;
    margin:12px 5px;
    box-shadow: 0 0 32px rgba(0,0,0,0.5);
    }