/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --fern-green: #743230;
  --pistachio: #ad7649;
  --sinopia: #99582a;
  --azure: #d4e4e5;
  --licorice: #231714;
  --licorice-transparent: rgb(35, 23, 20, 0.5);
  --font-family: font;
}

* {
  box-sizing: border-box;
  image-rendering: pixelated;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  font-family: font;
  transition: 0.4s;
}

@font-face {
  font-family: font;
  src: url(VT323-Regular.ttf);
}

html {
  scrollbar-color: var(--sinopia) var(--licorice);
  background-image: url("shrineFord/fordBackground.jpg")
}

a {
  color: var(--pistachio);
  font-weight: bold;
}

a:hover {
  color: var(--licorice);
}



.bb {
  text-align: center;
  }


.header {
  background: var(--fern-green);
  color: var(--azure);
  width: 100%;
  height: 80px;
  border-bottom: 4px solid var(--licorice);
  box-shadow: 0px 4px 8px var(--licorice-transparent);
  padding: 8px;
  position: fixed;
  top: 0px;
  left: 0;
}

.header h1 {
  font-size: 52px;
  margin-right: 8px;
  margin-top: 0px;
  float: right;
}

.header p {
  margin-top: 24px;
}

.header button {
  background: var(--pistachio);
  color: var(--licorice);
  background-image: linear-gradient(
    0deg,
    var(--azure) 26.56%,
    var(--licorice) 26.56%,
    var(--licorice) 32.81%,
    var(--sinopia) 32.81%,
    var(--sinopia) 50%,
    var(--azure) 50%,
    var(--azure) 76.56%,
    var(--licorice) 76.56%,
    var(--licorice) 82.81%,
    var(--sinopia) 82.81%,
    var(--sinopia) 100%
  );
  background-size: 130px 130px;
  width: 56px;
  height: 56px;
  border: 4px solid var(--licorice);
  border-radius: 32px;
  box-shadow: 2px 2px 4px var(--licorice-transparent);
  float: left;
  display: inline;
  margin-right: 16px;
}

.circle {
  background: var(--azure);
  width: 20px;
  height: 20px;
  border: 4px solid var(--licorice);
  border-radius: 20px;
  margin: auto;
  margin-top: 4px;

}

.header button:hover {
  box-shadow: 0px 0px 0px;
  filter: brightness(0.75);
  transform: rotate(180deg);
  cursor: pointer;
}

hr {
    display:block;
    border:0px;
    height: 30px;
    background-image:url('dividers/redDivider.jpg');
}
hr2 {
    display:block;
    border: 0px;
    height: 32px;
    background-image:url('dividers/treeDivider.gif');
    padding-top: 20px;
    padding-bottom: 13px;
}



.sidebar {
  background: var(--fern-green);
  color: var(--azure);
  width: 200px;
  height: 100%;
  position: fixed;
  border-right: 4px solid var(--licorice);
  box-shadow: 4px 0px 8px var(--licorice-transparent);
  padding: 16px;
  overflow-y: hidden;
  scrollbar-color: var(--pistachio) var(--licorice);
  margin-top: 60px;
  left: 0;
}

.sidebar h2 {
  background: var(--pistachio);
  color: var(--licorice);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  box-shadow: 4px 4px 4px var(--licorice-transparent);
}

.sidebar a {
  color: var(--azure);
  letter-spacing: 4px;
  text-decoration: none;
  border-bottom: 4px solid var(--licorice);
  padding: 2px;
  display: block;
}


.sidebar a:hover {
  letter-spacing: 8px;
}

.updates {
  background: var(--fern-green);
  color: var(--azure);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  padding: 4px;
  width: 700px;
  height: 300px;
  overflow-y: auto;
  scrollbar-color: var(--sinopia) var(--licorice);
  margin: 16px auto;
  padding: 16px 24px;
  font-size: 20px;
}

.longupdates {
  background: var(--fern-green);
  color: var(--azure);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  padding: 4px;
  width: 700px;
  height: 500px;
  overflow-y: auto;
  scrollbar-color: var(--sinopia) var(--licorice);
  margin: 16px auto;
  padding: 16px 24px;
  font-size: 20px;
}


.updates ul {
  margin: 2px;
  padding-left: 24px;
  text-align: left;
}

.longupdates ul {
  margin: 2px;
  padding-left: 24px;
  text-align: left;
}

div.content {
  margin-left: 200px;
  height: auto;
  padding: 90px 0px;
}

.box {
  background: var(--fern-green);
  color: var(--azure);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  max-width: 700px;
  margin: 16px auto;
  box-shadow: 4px 4px 4px var(--licorice-transparent);
  padding: 16px 24px;
  font-size: 20px;
}

.box2 {
  background: var(--pistachio);
  color: var(--licorice);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  max-width: 700px;
  margin: 16px auto;
  box-shadow: 4px 4px 4px var(--licorice-transparent);
  padding: 16px 24px;
  font-size: 20px;
}

.box ul{
  margin: 2px;
  padding-left: 24px;
  text-align: left;
  }
  
  .square {
  background-color: var(--azure);
  color: var(--licorice);
  border: 4px solid var(--licorice);
  border-radius: 8px;
  height: 50px;
  width: 50px;
  padding: 16px 24px;
}
  
  
  
  .scrollbox {
  background: var(--fern-green);
  color: white;
  border: 4px solid var(--licorice);
  border-radius: 8px;
  max-width: 700px;
  margin: 16px auto;
  box-shadow: 4px 4px 4px var(--licorice-transparent);
  padding: 16px 24px;
  font-size: 20px;
  overflow-y: auto;
  scrollbar-color: var(--licorice) var(--azure);
  height: 60px;
}

.scrollbox ul{
  margin: 2px;
  padding-left: 24px;
  text-align: left;
  overflow-y: auto;
  scrollbar-color: var(--licorice) var(--azure);
  }

@media screen and (max-width: 650px) {
  
  body {
    overflow-x:hidden;
    background-image: url("shrineHarvey/harveyBackground.png");
  }
  
  .header {
    z-index:10;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
  }
  .updates {
    height: 120px;
  }

  .content {
    position:absolute;
    left:-100px;
    height: auto;
    margin-top: 400px;
    width:100%;
  }

  .box {
    max-width: 100%;
  margin-left: -100px;
    
  padding: 16px 24px;
  font-size: 32px
  }
}

@media screen and (max-width: 410px) {
  .header h1 {font-size:32px;}
}

@media screen and (max-width: 345px) {
  .header h1 {font-size:32px; margin-top:-32px;}
}

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}


.s{
   text-decoration: line-through;
  }
  
  
          navul {
  list-style-type: none;
  margin: 2px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  color: white;
}

navli {
  padding: 2px;
  float: left;

}

navli:last-child {
  border-right: none;
}

navli a {
  border: 4px solid var(--licorice);
  border-radius: 8px;
  display: block;
  color: var(--licorice);
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
  background-color: var(--pistachio);
}

navli a:hover:not(.active) {
  background-color: var(--pistachio);
  color: var(--licorice);
}

.active {
  background-color: var(--pistachio);
  color: var(--licorice);
}

navli a, .dropbtn {
  border: 4px solid var(--licorice);
  border-radius: 8px;
  display: block;
  color: white;
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
}

navli a:hover, .dropdown:hover .dropbtn {
  background-color: var(--pistachio);
  color: var(--licorice);
}

navli.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  border: 4px solid var(--licorice);
  border-radius: 8px;
  display: block;
  color: white;
  text-align: center;
  padding: 6px 14px;
  text-decoration: none;
}

.dropdown-content a:hover {background-color: #99582a;
  color: white;}

.dropdown:hover .dropdown-content {
  display: block;
}



* {box-sizing: border-box}
body { margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  max-height: 500px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/*
/* On hover, add a black background color with a little bit see-through */
/*.prev:hover, .next:hover {*/
/*  background-color: rgba(0,0,0,0.8);*/
/*}*/


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #307435;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}