/* EVERWHERE */
body{
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-image: url('../images/bkg/Bkg11.gif');
  background-color: black;
  margin-bottom: 0;
  
}

p{
  font-size: 12px;
  


}



.infobox{
  font-size: 16px;
    text-shadow: 0 0 6px black ;
  color: yellow;
  


}

#tidus {

  width: 400px;

}
#tidus2 {
  width: 400px;
  
}

#tidus3 {
   width: 400px;
  
}

#tidus4 {
    width: 400px;
 
}



/* NAV */

header {
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  background-image: linear-gradient(to bottom, yellow, rgba(255,0,0,0));
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}

.updatelog{
  margin: 0;
  position: absolute;
  right: 0;
  padding-right: 10px;
  padding-bottom: 203px;
  color: blue;
}
.navcont{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#banner {
  width: 40vw;     
  max-width: 500px;
  min-width: 200px;
  height: auto;
  }

.designbutton {
  position: relative;
    top: 2px; 
    right: 6px;
   width: 7vw;    
  max-width: 90px;
  min-width: 77px;
  height: auto;

}

.infobutton img{
    position: relative;
    top: -6px; 
    right: 29px;
   width: 7vw;
  max-width: 101px;
  min-width: 77px;
  height: auto;
}

.pubbutton img{
    position: relative;
    top: -9px; 
    right: 24px;
   width: 7vw;
  max-width: 101px;
  min-width: 77px;
  height: auto;
}

.tattoobutton img{
    position: relative;
    top: 23px; 
    right: 47px;
   width: 7vw;
  max-width: 101px;
  min-width: 77px;
  height: auto;
}

.navbuttonbottom2row{
  display: flex;
  flex-direction: column
}

.illustbutton {
position: relative;
    top: -7px; 
    right: 23px;
 width: 19vw;
   max-width: 194px;
  min-width: 59px;
 height: auto;
 
}
.visdev {
  position: relative;
    top: 5px; 
    right: 54px;
   width: 12vw;    
  max-width: 208px;
  min-width: 139px;
  height: auto;

}

.ceramicbutton {
  position: relative;
    top: -4px; 
    right: 26px;
   width: 7vw;    
  max-width: 114px;
  min-width: 92px;
  height: auto;
  z-index: 999;

}
.navbuttontoprow{
  display: flex;
  

}
.navbuttonbottomrow{
  display: flex;
}

.navcont img {

  width: 12vw;        
  max-width: 97px;
  min-width: 59px;
  height: auto;
}

/* GRIDS OF IMAGE */

.container {
  max-width: 1817px;
  min-width: 200px;
  margin: 0 auto;
  padding-top: 14vw;
}

.masonry_grid{
  columns: 3;
  gap: .8vw;
}

.item{
  margin-bottom: .5vw;
  overflow: hidden;
}

.item img{
  width: 100%
}
.item img{
 box-shadow: 39px 0 5px yellow;
}

/* FOOTER */

.footer {
  position: relative;

  padding-top: 55px;
  text-align: center;
  font-size: 0;
  color:brown;
background-image: linear-gradient(to top, yellow, rgba(255,0,0,0));
  padding-bottom: 16vw;
  margin-left: -8px;
  margin-right: -8px;
}

.footer img{
  padding-top: 59px;
  position: static;
  width: auto;
  height: 3vw;
 
}


/* Bigger Break */

@media (max-width: 1573px){
   .updatelog{
  margin: 0;
  position: absolute;
  right: 0;
  padding-right: 3px;
  padding-bottom: 0;
    padding-top: 133px;
font-size: 12px;
}
  .container {
  padding-top: 15%;
}
  
}

/* Big-mid Break */

@media (max-width: 1298px){

  .container {
  padding-top: 17%;
}
  
}

/* Big-small Break */

@media (max-width: 1042px){

  .container {
  padding-top: 21%;
}
  
}

/* Big-xsmall Break */

@media (max-width: 873px){

  .container {
  padding-top: 25%;
}
  
}

/* Mid Break */
@media (max-width: 690px){
  .ceramicbutton {
  position: relative;
    top: -4px; 
    right: 28px;
   width: 10vw;    
  max-width: 75px;
  min-width: 53px;
  height: auto;
}

}



/* Mobile Break */
@media (max-width: 576px){
  
    .container {
  padding-top: 26%;
}
  
  .masonry_grid{
    columns: 2;
  }
  
  .updatelog{
  margin: 0;
  position: absolute;
  right: 0;
  padding-right: 3px;
  padding-bottom: 0;
    padding-top: 90px;
font-size: 7px;
}
  
  #banner {
  width: 23vw;     
  max-width: 181px;
  min-width: 122px;
  height: auto;
  position: relative;
    top: -32px; 
    
  }
  
  
.designbutton {
  position: relative;
    top: 11px; 
    right: 5px;
   width: 7vw;    
  max-width: 101px;
  min-width: 47px;
  height: auto;

}

.infobutton img{
    position: relative;
    top: 15px; 
    right: 18px;
   width: 7vw;
  max-width: 101px;
  min-width: 50px;
  height: auto;
}

.pubbutton img{
    position: relative;
    top: -15px; 
    right: 126px;
   width: 7vw;
  max-width: 101px;
  min-width: 62px;
  height: auto;
}

.tattoobutton img{
    position: relative;
    top: 5px; 
    right: -91px;
   width: 7vw;
  max-width: 101px;
  min-width: 58px;
  height: auto;
  z-index: 999;
}

.illustbutton {
position: relative;
    top: -1px; 
    right: 56px;
 width: 97px;
 height: auto;
 
}
.visdev {
  position: relative;
    top: 7px; 
    right: 91px;
   width: 12vw;    
  max-width: 208px;
  min-width: 104px;
  height: auto;

}

.ceramicbutton {
  position: relative;
    top: 13px; 
    right: 51px;
   width: 7vw;    
  max-width: 169px;
  min-width: 49px;
  height: auto;

} 
}

/* Mobile-medium Break */

@media (max-width: 484px){

  .container {
  padding-top: 28%;
}
  
}

/* Big-small Break */

@media (max-width: 430px){

  .container {
  padding-top: 32%;
}
  
}
/* Break END */


/* Nav Hover */
audio {
  display: none;
}

.designbutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}

.infobutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}
.tattoobutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}

.pubbutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}

.ceramicbutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}

.visdevbutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}
.illustbutton:hover img{
  cursor: pointer;
  transform:scale(1.1);
}

/* Hover End */
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/games/gam-4/gam308.cur), auto !important;} /* End https://www.cursors-4u.com */
/* CCAD */
.ccadd {

    position: fixed;
    bottom: -3px; 
    right: 1px;
    z-index: 1000;
}

.ccadd img {
    width: 136px;
    height: auto;
}

/* Lightbox */
#lightbox{
   position: fixed;
   z-index:100;
   top:0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.8);
   display:none;
}

#lightbox.active{
   display: flex;
   justify-content: center;
   align-items: center;
}

#lightbox img{
   max-width:90%;
   max-height:80%;
   padding:4px;
   background-color: black;
   border:4px solid var(--font-color);
}