/* CSS file for CndOldGuy Website*/

  
  :root {
    --bg: rgb(15, 104, 188);
    --fg: rgb(0, 26, 128);
   --menu-normal: rgb(11, 115, 27);
   --menu-underline: rgb(206, 10, 40);
   

    --clr-primary-400: #00a1ab;
    --clr-primary-500: #3741a0;
  
    --clr-accent-400: #00cdac;
    --clr-accent-500: #114243;
  
    --clr-neutral-100: #fff;
    --clr-neutral-200: #fafafa;
    --clr-neutral-300: #e5e3e8;
    --clr-neutral-400: #4e4e4e;

  --ff-accent: "Podkova", serif;
  --ff-base: "Open Sans", sans-serif;

  --fs-300: 0.75rem;
  --fs-400: 1rem;
  --fs-500: 2rem;

  --fw-400: 400;
  --fw-700: 700;

  --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
  --shadow-thumb: .5em .25em .5em  black;
  --border-radius: 0.75rem;

    --pix-1:"photos\blaine.jpg";  
    --pix-2:"photos\Lake.jpg";
    --pix-3:"photos\Hunter.jpg";
    --pix-4:"photos\kent.jpg";
    --pix-5:"photos\MoonStick.jpg";

  }

  /* ///////////////
  Reset
  ////////////// */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    font-family: var(--ff-base);
    text-align: center;
    margin: 0;
  }
  

  section {
    padding: 6rem 0;
  }
  
/* Make images easier to work with*/ 
img,
picture {
box-shadow: var(--shadow);
    
}
/* Set up SlideShow Image Box */

.imagebox{
  display: grid;  
  font-family: Arial;
  align-content: center;
  max-width: 99%;
  margin-left:1em;
  margin-right: 1em;
  padding: 1em; 
} 

.imagebox p{
  font-size: 1rem;
  text-align:center;
  font-weight:bold;
  color: red;

}

.imagebox h1{
 margin-top: 0;
 font-size: .7rem;
 text-align:center;
 font-weight:bold;
 color: red;

}
.imagebox h2{
  margin-top: 0;
  font-size: 1rem;
  text-align:center;
  font-weight:bold;
  color: red;
}



/* Set up Menu Bar with Underlines*/ 

.menubar{
  max-width: 95%;
  padding: 1em;
  display:grid;
  grid-template-columns:auto auto;
  


}
.thumb{
  visibility:hidden;
 margin-top: 2em;
 margin-left: 2em;

 box-shadow: var(--shadow-thumb)

}
@media (min-width: 350px) {
  .thumb {
    visibility:visible;
  }

}

    nav {
      margin: 1em;
      margin-top:0;
      padding:.1em
    }

    nav ul {
        list-style: none;
        text-align: right;
        font-family:var(--ff-base);

        
      }
      
      nav li {
        display:inline-block;
        padding: 2%;
        position: relative;
      }
      
      nav a {
        color: var(--menu-normal);
        text-decoration: none;
        text-transform: uppercase;
        font-size: var(--fs-400);
      }
      
      nav a:hover {
      
        font-weight:var(--fw-700);
      }
      
      nav a::before {
        content: '';
        display: flex;
        height: 1.5px;
        background-color:var(--menu-underline);
      
        position: relative;
        top: 1.5em;
        width: 0%;
      
        transition: all ease-in-out 250ms;
      }
      
      nav a:hover::before {
        width: 100%;
      }

      .topbanner {
        background-image: url(assets/hero.jpg);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2em;
        margin-right: 2em;
        padding-top: .1rem;
        padding-bottom: .1rem;
      }
      
      .topbanner__content {
        background-color :  rgb(15, 104, 188,.2);
        max-width: 800px;

        padding: .3rem .2rem;
        margin: 0 auto;
        text-align: center;
      }


      
/* Position the image container (needed to position the left and right arrows) */
.slide {
  position: relative;
  font-family: Arial;
  align-content: center;
  max-width: 90%;
  margin-left:2em;
  margin-right: 1em;
  padding: 1em; 
}

/* Hide the images by default */
.mySlides {
  display:none;
}

/* Add a pointer when hovering over the thumbnail images 
.cursor {
  cursor: pointer;
}*/

/* Next & previous buttons */
.prev,
.next {
  cursor: poi ter;
  position:absolute;
  top: 70%;
  width:max-content;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

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

/* 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);
}

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

/* Hover over Demo 
.active,
.demo:hover {
  opacity: 1;
}
*/