body{
  height:100%;
  /*background:#6cc1cc;/*/
   background-image: url("https://anaiaram.neocities.org/ocs/republic/bg2.png"); 
  font-family:'Source Sans Pro', sans-serif;
  font-size:15px;
  color: #666;
  letter-spacing:0.5px;
  margin: 0; padding: 0; 
  width:100%;} 


#header 
  {position:absolute;
  top:0px;
  left:0px;
  width:100%;
  padding-top: 0px;
  padding-bottom:7px;
  background-color:#f4f4f4;
  line-height:36px;
  text-align:center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:70px;
  color:#ffffff;
  letter-spacing:3px;
  }
#linkity{
  position:relative;
  top:-5px
  }
a.linkit{
  display:inline-block;
  width:100px;
  font-size:16px;color:#feca24;
  text-transform:uppercase;
  line-height:16px;
  letter-spacing:2px;
  padding:10px;
  border:2px #e1e1e1 solid;
  }  
a.linkit:hover, a.longan:active{
  background-color:#6cc1cc;
  color:#fff;
  border-color:#6cc1cc;
  -o-transition:0.3s;
  -ms-transition:0.3s;
  -moz-transition:0.3s;
  -webkit-transition:0.3s;
  transition:0.3s;
  }
  
#back-box{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  margin-top:60px;
  padding-top:0px;
  padding-bottom:0px;
  background-color:#3d423d;
  margin-bottom:-130px}
#back-box a:link { color: #38a9ba; }
#back-box a:visited {  color: #a78cc2; text-decoration: none;}
#back-box a:hover {  color: #ddb1e0;}
#back-box a:active {  color: #bb6eff;  text-decoration: none;
  } 
#back{
  position:relative;
  max-width: 42em;
  margin:0 auto;   
  font-size:20px;
  }

  
#box1{
  margin:0 auto;   max-width: 50em;
  margin-top:119px; 
  width:800px;
  padding:26px;
  background-color:#fff;
  font-size:16px;
  line-height:22px;
  height:100%;
  }
#box2{
  position:relative;
  margin-bottom:16px;
  width:800px;
  }  
  
 #spoiler{
  display: table-cell;
  background-color:#3d423d;
  width:40em;
  height:1em;
  margin:0 auto;   
  padding-left:10px;
  padding-right:10px;
  font-size:15px;
  color: #3d423d;
  vertical-align: middle;
  }
#spoiler a:link { color: #3d423d; }
#spoiler a:visited {  color: #3d423d;}
#spoiler a:hover {  color: #b0b0b0;}
#spoiler  a:active {  color: #b0b0b0; }
  
#bottom-back-box{
  position:relative;
  margin:0;
  padding:0;
  top:0px;
  left:0px;
  width:auto;
  background-color:#3d423d;
  margin-bottom:-10px
}
#bottom-back{
  position:relative;
  max-width: 44em;
  width:100%;
  margin:0 auto;   
  font-size:20px;
  padding:1px;
  }
  #bottom-back a:link { color: #38a9ba; }
  #bottom-back a:visited {  color: #a78cc2; text-decoration: none;}
  #bottom-back a:hover {
  color: #ddb1e0;}
  #bottom-back  a:active {
  color: #bb6eff;
  text-decoration: none;
} 



#gallery{
  background-color:#3d423d;
  width:auto;
  margin:0 auto;   
  padding:6px;
  font-size:20px;
  color: #fff;
  }
  
  #tiny{
  display: table-cell;
  background-color:#3d423d;
      border-radius: .5em;
    border: 1px;
  width:30em;
  height:1em;
  margin:0 auto;   
  padding:0;
  font-size:15px;
  color: #fff;
  vertical-align: middle
  }

#tiny a:link { color: #38a9ba; }
#tiny a:visited {  color: #a78cc2; text-decoration: none;}
#tiny a:hover {  color: #ddb1e0;transform: scale(1.10); text-shadow: 0 0 5px #fff; }
#tiny a:active {  color: #bb6eff;  text-decoration: none;
  } 

  
a:link {
  color: #38a9ba;
  text-decoration: none;
}
/* visited link */
a:visited {
  color: #806799;
}
/* mouse over link */
a:hover {
  color: #ddb1e0;
}
/* selected link */
a:active {
  color: #bb6eff;
  text-decoration: none;
} 

.flex-container{
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.flex-container div{
  align-content: center;
  }
.image_gallery{
    margin: 10px 50px;
}
.image_gallery img{
    height: 100px;
    width: auto;
    padding: 5px;
    filter: grayscale(0%);
    transition: 0.5s;
}
.image_gallery img:hover{
    filter: grayscale(0);
    transform: scale(0.95);
}
.single_image_display {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    
  }
.image_content {
    margin: auto;
    display: block;
    max-width: 100%;
  max-height: 100vh;
   
  }
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 50px;
    font-weight: bold;
    color: #bababa;
    cursor: pointer;
  }