body {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  color: #e7dfd3;
  margin: 0;
}


#container {
  margin: 50px auto 20px;
  width: 900px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 80px 1fr;
  gap: 10px 0px;
  grid-template-areas:
    "navigation"
    "main";
}



main {

  overflow-y: hidden;
  padding: 10px;
  text-align: left;
  background-color: #1411249c;
  border: 7px solid transparent;
  border-image: url('/assets/BG/border1.png') 6 round;
  background: url(/assets/BG/bgbgbgbgbg.png);
}

nav {
  height: 60px;
  text-align: center;
  border: 8px solid transparent;
  border-image: url('/assets/BG/border1.png') 7 round;
   background: url(/assets/BG/navbg.png);
   background-position: center;
   background-size: contain;
   padding-top: 10px;
}

/*------------------------------------ link and other styling --------------------------------------*/
nav a:link {

  font-size: 23px;
  font-family: 'Fullmoon', serif;
  text-shadow: #35134b 1px 1px 0px, #ffe0d6 -1px -1px 0px;
 
}

nav a:hover {

   color: #e9b367;


}
a:visited {
  color: #8f7b68;


}

a:hover {
  color: #cddf66;
  text-shadow: 1px 1px #000;
  animation: none;

}

a:link {
  text-decoration: none;
  color: #8f7b68;

  font-size: 15px;
  font-family: 'DejaVu', serif;
  text-shadow: #35134b 1px 1px 0px, #ffe0d6 -1px -1px 0px;

}

h1,
h2,
h3 {
text-align: center;
  font-weight: bold;
  color: #b36c4d;
  margin: 10px 0px 10px;
  text-shadow: #01031ac2 1px 1px 0px, #ffde72 -1px -1px 0px;
  padding: 5px;
  background: url(/assets/BG/marb.png);
  text-transform: uppercase;
}
h1 {
 font-family: 'Fullmoon', serif;
  font-size: 30px;
  margin: 5px -9px 5px;
}
h2 {
  font-size: 20px;
  margin: 5px -9px 5px;
}
h1,
h2 {
  border: 9px solid transparent;
  border-image: url('/assets/BG/border1.png') 6 round;
}
h2,
h3 {
 font-family: 'DejaVu', serif;
  
}



hr {
  height: 30px;
  margin: -8px -8px 8px;
  background: #4e2b21;
  border: solid 1px #000000;
  text-shadow: #100c1a 2px 2px 0px;
  background-image: url(https://117.zone/world/assets/LEO_bg3.png);
}
/*-----------------------------list--------------------------------------------------------*/
main ul {
  margin: 5px 60px;

}

main li {
  background: #00000020;
  list-style-type: square;
list-style-image: url(/assets/bullet1.gif);
  margin-bottom: 6px;
  margin: 5px 0px 5px 10px;
  padding: 10px;
}

li a:link {
  font-size: 20px;
  color: #cddf66;
    text-shadow: none;
}
li a:visited {
  font-size: 20px;
  color: #cddf66;
    text-shadow: none;
}
/*-----------------------------gallery--------------------------------------------------------*/

 .comi {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .comi img {
    width: 170px;
      height: 250px;
      flex: auto;
      margin: 0 5px 5px 0;
      object-fit: cover;
      object-position: bottom;
         border: 8px solid transparent;
  border-image: url('/assets/BG/border1.png') 7 round;
    }
    
    .comi img:hover {

      animation: grow 1300ms;

      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;

    } 

.wiggle {
  width: 170px;
  height: 250px;

  margin: 10px;


}

.wiggle a:link {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
}


.ezgallery.montage img:hover {

  animation: grow 1300ms;

  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

}

.wiggle:hover {

  animation: wiggle 1500ms;

  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

}

@keyframes grow {
  0% {
    transform: scale(1.00);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1.00);
  }

  75% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1.00);

  }
}

@keyframes wiggle {
  0% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/
.photoviewer-stage {

  background-color: #14141c !important;

  background: url(/assets/BG/bgbgbgbgbg.png);
}

.photoviewer-modal {
  color: #fff !important;
}
.photoviewer-header,.photoviewer-footer {
    border: 7px solid transparent;
border-image: url('/assets/BG/border1.png') 6 round;
background: url(/assets/BG/marb.png) !important;
}

.ezgallery.montage {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 60px;
}

.ezgallery.montage img {
  width: 180px;
  height: 250px;
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: cover;
  object-position: bottom;
   border: 8px solid transparent;
  border-image: url('/assets/BG/border1.png') 7 round;
}

.ezgallery.horizontal {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: left;
}

.imagenav {
   border: 8px solid transparent;
  border-image: url('/assets/BG/border1.png') 7 round;
  height: 180px;
  width: 120px;
  text-align: center;
  background-image: url(/assets/BG/marb.png);
  margin: 5px;
}
.imagenav:hover {

   background-image: url(/assets/BG/pic.gif);
   background-position: left;
}
.iconnav img {
height: 90px;

}
/*homepage icon navigation */
.iconnav {
    
    display: flex; 
    flex-direction: row;  
    justify-content: center; 
    flex-wrap: wrap;
    padding: 10px; 
    margin: 10px; 
    height: auto;



}

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

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
 
  scrollbar-color: #89523a #0e0d0e;
}

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

*::-webkit-scrollbar-track {
  background: #0e0d0e;
}

*::-webkit-scrollbar-thumb {
  background-color: #89523a;
  border-radius: 10px;
  border: 1px solid #89523a;
}


/*-----------------------------mobile screens--------------------------------------------------------*/
@media(max-width:685px) {

  #container {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: auto;
  }






}