/***************************************************/
/***************************************************/
/***************************************************/
*:before,
*:after,
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   position: relative;
   min-height: 100vh;
   max-width: 100vw;
   /* width: 100%; */
   background-color: #f4f4f4;
   color: #555;
   font-family: Arial, Helvitica, sans-serif;
   font-size: 16px;
   line-height: 1.6em;
   display: grid;
   grid-template-columns: 1fr;
   grid-gap: 0 0;
   background-image: url("./leather.jpg");
   background-position: center;
   background-repeat: repeat;
   /*background-size:contain; */
}
/*------------------*/

#header {
   background-color: #9f7732;
   background-image: linear-gradient(to bottom right, #9f7732, #bfa477);
   color: #6b0000;
   text-align: center;
   word-spacing: 0.5em;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
   font-weight: 900;
   padding: 1vmax;
}

#header h1 {
   font-size: 4vmax;
   padding: 1vmax;
   margin-top: 1vmax auto;
}

#header h2 {
   font-size: 3vmax;
   padding: 1vmax;
   margin-top: 1vmax auto;
}
/*------------------*/

img {
   /* border-radius: 2vmax; */
   width: 100%;
   height: 100%;
   /* box-shadow:0 0 10px 10px rgba(75,75,75,.5); */
   /* transition:transform 0.3s; */
}

/* img:hover
{
  transform:scale(.98);
  box-shadow:0 0 5px 5px rgba(75,75,75,.5);  
} */

#imgs-grid {
   width: 95%;
   margin: auto;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-content: center;
   gap: 1rem;
   padding-bottom: 1rem 0;
   margin: 1rem auto;
}

.img-container:hover {
   transform: scale(0.98);
   box-shadow: 0 0 5px 5px rgba(75, 75, 75, 0.5);
}

.img-container {
   /*width:30%;*/
   /* flex-basis:45%; 
  flex-grow:1;
  flex-shrink:1; */
   display: block; /*inline-block;*/

   /* margin: 1em; */

   border-radius: 2vmax;
   width: clamp(150px, 30%, 45%);
   /*height: 100%;*/
   box-shadow: 0 0 10px 10px rgba(75, 75, 75, 0.5);
   transition: transform 0.3s;
   overflow: hidden;
}
/*
@media(max-width:1200px)
{
  .img-container
  {
    width:40%;
  }
}

@media(max-width:800px)
{
  .img-container
  {
    width:100%;
  }
}
*/
/*------------------*/
/*------------------*/
/*------------------*/
/*------------------*/
#nav-container {
   position: sticky;
   top: 0;
   z-index: 1000;
   background-color: #333; /*rgba(0,0,0,0); //#333;*/
   color: #fff;
   padding: 0.55em 0.5em;
   min-height: 2em;
}

#nav-items {
   padding: 0.1em 0 0.2em;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-content: space-around;
}

.nav-item {
   height: 100%;
   text-decoration: none;
   text-align: center;
   display: block;
   /*white-space:nowrap;*/
   background-color: #333;
   color: #fff;
   margin: 0 0.2em;
   padding: 0.1em 0.5em;
   border: 0.1em solid #999;
   border-radius: 1em;
   box-sizing: border-box;
   box-shadow: 0.1em 0.1em 0.2em 0.1em rgba(255, 127, 80, 0.7); /*#ff7f50 = coral;*/
   transition: transform 0.2s;
}

.nav-current-page {
   color: #999;
}

.nav-allowed:hover /*, .nav-allowed:focus*/ {
   background-color: #bfa477;
   transform: scale(0.92);
   /*box-shadow:0.05em 0.05em 0.8em 0.05em rgba(255,127,80,0.7);
  padding:0.1em 0.41em .1em .59em;*/
}

.menu-icon {
   /*border:3px solid red;*/
   padding: 0.5em 0.5em;
   margin: 0.1em;
   position: relative;
   float: left;
   cursor: pointer;
   display: none;
}

.menu-icon .nav-icon {
   background: #fff; /*#333;*/
   display: block;
   height: 2px;
   width: 1.1em;
   position: relative;
   transition: background 0.2s ease-out;
}

.menu-icon .nav-icon:before {
   content: "";
   background: #fff; /*#333;*/
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: all 0.2s ease-out;
   top: 5px;
}

.menu-icon .nav-icon:after {
   content: "";
   background: #fff; /*#333;*/
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   transition: all 0.2s ease-out;
   top: -5px;
}

.menu-btn {
   display: none;
}

.menu-btn:checked ~ #nav-items {
   display: flex;
}

.menu-btn:checked ~ .menu-icon .nav-icon {
   background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
   transform: rotate(-45deg);
   top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
   transform: rotate(45deg);
   top: 0;
}

@media (max-width: 700px) {
   #nav-items {
      flex-flow: column;
      display: none;
   }
   .nav-item {
      margin-bottom: 0.4em;
   }
   .menu-icon {
      display: block;
   }
}
/*------------------*/
/*------------------*/
/*------------------*/
#footer-grid {
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 1.6em 0;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
}

@media (max-width: 700px) {
   #footer-grid {
      flex-flow: column;
   }
}

/*------------------*/