@font-face {                  
font-family: "VG5000";
src: url(https://humantooth.neocities.org/fonts/VG5000.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

/*phones*/
@media only screen and (max-width: 720px){
  .box{
    width: 100vw;
    display: block;
    margin-left: 5vw;
    }
    
  .divider{
    width: 90vw;
  }
    
  .container{
      padding: 0;
      width: 100%;
    }
    
  .column{
    column-count: 1;
    }
    
  .homeBtn{
    position: fixed;
    top: 1vw;
    right: 1vw;
    z-index: 900;
  }
  
  .icon-bar{
      display: none;
    }
    
  .icon{
      width: 10vw;
      height: auto;
    }
    
  .scrollToTop{
      height: 40vw;
      width: auto;
    }
    
  .header{
    width: 50vw;
    background-color: white;
    overflow: auto;
    position: fixed;
    top: 0;
    z-index: 800;
    }
    
      .header a{
        float: left; /* Float links side by side */
        text-align: center; /* Center-align text */
        transition: all 0.3s ease; /* Add transition for hover effects */
        color: black; /* White text color */
        width: 33%;
        font-size: 12px;
        }
  
  .gallery{
    width: 100vw;
    }
    
    .text-overlay {
    width: 90vw;
    
    }
  
  .portraitImg, .portraitImg-static{
    width: 90vw;
    height: auto;
    }
  
  .landscapeImg, .landscapeImg-static{
    width: 90vw;
    height: auto;
  }
  
  .squareImg, .comicImg, .longImg{
    width: 90vw;
    height: auto;
  }
  
  .modal{
    width: 90vw;
    height: 90vh;
    overflow-y: scroll;
    }
    
  .long{
    width: 90vw;
    height: auto;
    }
  
  .modal-content {
    width: 80vw;
    height: auto;
  }
  
  .modal-content-long {
    width: 80vw;
    height: auto;
  }
}

/*tablets & desktop*/
@media only screen and (min-width: 721px){
  
  .box{
    width: 50vw;
    }
  
  .divider{
    width: 45vw;
  }
  
  .column{
    column-count: 2;
    }
    
  .header{
    display: none;
    }
    
  .homeBtn{
    position: fixed;
    top: 1vw;
    left: 1vw;
  }
    
  .icon-bar{
      width: 8vw;
      
    }
    
    .icon-bar a{
        margin-top: 12px;
        padding: 2px;
      }
      
    .icon{
      width: 6vw;
      height: auto;
      }
  
  .scrollToTop{
    height: 15vw;
    width: auto;
    }
  
  .gallery{
    width: 50%;
    }
    
  .text-overlay {
    width: 20vw;
    
    }
  
  .portraitImg, .portraitImg-static{
    width: 22vw;
    height: 30vw;
    }
  
  .landscapeImg, .landscapeImg-static{
    width: 22vw;
    height: 14.1vw;
  }
  
  .squareImg{
    width: 22vw;
    height: auto;
  }
  
  .comicImg{
    width: 40vw;
    height: auto;
  }
  
  .longImg{
      width: 45vw;
      height: auto;
    }
  
  .modal{
    width: auto;
    height: 90vh;
    overflow-y: scroll;
    }
  
  .long{
    width: 95vw;
    height: auto;
    }
  
  .modal-content {
    width: auto;
    height: 80vh;
  }
  
  
  .modal-content-long {
    width: 90vw;
    height: auto;
  }
}


/*general*/
html {
  position: relative;
  min-height: 100%;
  width: 100%;
  overflow: auto;
}

body {
  font-family: "VG5000", sans serif;
  word-wrap: break-word;
  font-size: 16px;
  background-attachment: fixed;
  z-index: -1;
  overflow: auto;
}

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

.container{
  /*border: 1px solid black;*/
}

.spacer{
  height: 20px;
}

.box{ 
  padding: 25px;
  background-color: white;
}

.divider{
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
  }

.unevenBorder{
   border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

.classicBorder{
    border-width: 7px;
    border-style: solid; 
    border-image: url("Assets/Design/imgBorder.png") 8 fill round;  
  }
  
.blackBorder1{
    border-width: 8px;
    border-style: solid;
    border-image: url("Assets/Design/border_black.png") 8 fill round; 
}

.homeBtn{
    color: black;
  }

/*Icon-Bar*/
.icon-bar{
  background-color: white;
  z-index: 800;
  position: fixed;
  top: 100px;
  margin-left: 12px;
  }
  
    .icon-bar a{
      display: block; /* Make the links appear below each other instead of side-by-side */
      text-align: center; /* Center-align text */
      transition: all 0.3s ease; /* Add transition for hover effects */
      color: black; /* White text color */
    }

      .icon:hover{
          transform: scale(1.1,1.1);
          transition: .10s ease-in;
        }
  
    .scrollToTop{
      display: block;
      margin-left: auto;
      margin-right: auto;
      object-fit: contain;
      width: 50%;
      cursor: pointer;
    }
    
        .scrollToTop:hover{
            background-color: black;         
          }

/*FilteredGallery*/
  .portraitImg, .portraitImg-static{
    object-fit: cover;
    transition: .10s ease-out; 
    }
    
      .portraitImg:hover{
          filter: grayscale(30%) blur(2px);
          transition: .10s ease-in; 
          opacity: 0.7;
          cursor: pointer;
        }

  
  .landscapeImg, .landscapeImg-static{
    object-fit: cover;
  }
  
      .landscapeImg:hover{
          filter: grayscale(30%) blur(2px);
          transition: .10s ease-in; 
          opacity: 0.7;
          cursor: pointer;

        }
  
  .squareImg{
    object-fit: cover;
    cursor: pointer;
  }
  
      .squareImg:hover{
          filter: grayscale(30%) blur(2px);
          transition: .10s ease-in; 
          opacity: 0.7;
        }
        
  .longImg{
      object-fit: cover;
      cursor: pointer;
    }
      .longImg:hover{
          filter: grayscale(30%) blur(2px);
          transition: .10s ease-in; 
          opacity: 0.7;
        }
  
  .comicImg{
    object-fit: cover;
  }

  .text-overlay {
      position: absolute;
      display: none;
      word-break: normal;
      text-align: center;
      text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
      }
      
      .toHover:hover + .text-overlay{
        display: block;
        cursor: pointer;
        }

  
  /* Add padding BETWEEN each column (if you want) */
  .row {
    padding: 2px;    
  }
  
  /* Create 2 equal columns that floats next to each other */
  .gallery {
    float: left;
    display: none; /* Hide columns by default */
  }
  
  /* Clear floats after rows */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
  }

.button{
  border-width: 7px;
  border-style: solid; 
  border-image: url("Assets/Design/imgBorder.png") 8 fill round;
  background-color: white;
  color: black;
  padding: 10px;
  margin: 10px;
  font-size: 14px;
  cursor: pointer;  
}

  .button:hover{
     transform: scale(110%);
  }
  
  .button.active{
    background-color: black;
    color: white;
  }

/*Modals*/
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* Sit on top */
    padding: 10px; /* Location of the box */
    overflow: auto; /* Enable scroll if needed */
    background-color: white;
    border-width: 12px;
    border-style: solid; 
    border-image: url("Assets/Design/imgBorder.png") 8 fill round;
    }

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: flex;
}

    /* Caption of Modal Image (Image Text)*/
    #caption {
        margin: auto;
        text-align: center;
        color: black;
        padding: 10px 0;
        display: flex;
        font-size: 18px;
        word-wrap: break-word;
    }

        /* Add Animation - Zoom in the Modal */
        .modal-content, .modal-content-long, #caption {
            animation-name: zoom;
            animation-duration: 0.5s;
        }

            @keyframes zoom {
                from {
                    transform: scale(0)
                }

                to {
                    transform: scale(1)
                }
              }

  /* The Close Button */
  .close {
      position: sticky;
      top: 10px;
      right: 35px;
      float: right;
      color: black;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
      text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
      }
  
      .close:hover,
      .close:focus {
          color: white;
          text-decoration: none;
          cursor: pointer;
          text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px black;
      }
  
  #loader {
  z-index: 9999;
  width: 100%;
  height: 100%;
  margin: 0;
  left: 0px;
	top: 0px;
  position: fixed;
  background-image: url("Assets/Design/loaderBW.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 1;
  animation: fade .3s linear forwards;
  
}