/*colors ... pink #FF0073 green #77E429

/*all text related customization*/

::selection {
        background: #77E429;
    }
body {
  font-family: Arial, Helvetica, sans-serif, Verdana;
  background-image: linear-gradient(45deg, #333333 25%, #404040 25%, #404040 50%, #333333 50%, #333333 75%, #404040 75%, #404040 100%);
  background-size: 44.00px 44.00px;
  background-color: #404040;
  color: #FF0073;
  text-align: center;
  overflow-x: auto;
}
a {
  color: #77E429;
}
a:hover {
  color: #FF0073;
}

/* navigation */
.navi {
  top:0; bottom:0; left:0;
  width:200px;
  height:110%;
  position: absolute; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  font-size: 300%;
  line-height: 150%;
  float:left;
  
}
.active {
  background-color: #FF0073;
  color:#000000;
}
.navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.navi li {
  display: inline-block;
}
.navi a :active {
  color: #ccc;
}

/*filter*/
.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none; /* Hidden by default */
}
.show {
  display: block;
}
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}
.btn.active {
  background-color: #666;
  color: white;
}
.btn:hover {
  background-color: #ddd;
}
/*center content*/
.gallery-title {
  background-color: #1f1f1f;
  color: #77E429;
  width: auto;
  padding: 10px;
  display: inline-block;
  font-size: 30px;
}
#gallery {
  position:absolute;
  justify-content: center;
  padding:15px; 
  margin:-10px 0 500px 200px;
  width: 1350px;
  height:550px;
  overflow-y:scroll;
  background-color: #1f1f1f;
}
#div.image {
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;
}
.image img {
  width: auto;
  height: 300px;
  padding:1.5%;
}
#div.image div.desc {
  padding: 15px;
  text-align: center;
}
/*tip page*/
#tip-page {
  display: inline-flex;
  padding:15px; 
  margin:50px 0 300px 200px;
  width: 1200px;
  height:auto;
  overflow-y:scroll;
  background-color: #1f1f1f;
}
#contact-page {
  display: inline-flex;
  padding:15px; 
  margin:50px 0 300px 200px;
  width: 1200px;
  height:auto;
  overflow-y:scroll;
  background-color: #1f1f1f;
}
/*responsive*/
@media screen and (max-width: 400px) {
  .navi a {
    text-align: center;
    float: none;
  }
}
@media screen and (max-width: 700px) {
  .navi {
    width: min-content;
    height: auto;
    position: relative;
    font-size: 30px;
    margin: 0 20px 20px 0;
  }
  .navi a {float: left;}
  .gallery-title {
    width: min-content;
    margin: 30px 60px 0 0;
  }
  #gallery {
    width: 100vw;
    margin: 50px 0 0 0;
    padding: 10px;
  }
.image img {
  width: auto;
  height: 100px;
  display: inline-block;
}
  .header{
    display: none;
  }
  }
  div.content {margin-left: 0;}
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%;}}