body{
  /*background-image: url('https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHBtYXl5M282YWVvOWd1cmYzcTY4bTl5MmRrdWRrazk2aDByMHh2eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uGkXpJfiBTKE0/giphy.gif');*/
  margin: 30px;
  background-size: cover;
  overflow: hidden;
  background-color: #EFEFEF;
}

.halftone {
  display: flex;
  justify-content: center;
  align-items: center;
  --halftone-size: 4px; /*size of the halftone within the image*/
  --halftone-bleed: 0.45; /*size of the spaces of the halftone*/
  --halftone-separate-k: 0.5; /*contrast of the dots*/
  
  --halftone-dot-size: calc(var(--halftone-size) * var(--halftone-bleed)); /*calculation of of the dot size*/
  --halftone-color-dot-size: var(--halftone-dot-size); /*calculation of the CMYK dot size*/
  
  filter: brightness(calc(0.5 + var(--halftone-bleed) * 0.3 - var(--halftone-separate-k) * 0.02)) blur(calc(var(--halftone-size) * 0.1)) contrast(1000) blur(0.8px); /*filter based on the halftone parameters*/
}
.halftone::after{
  content: "";
  position: absolute;
  inset: 0; /*size of the halftone effect on the image*/
  background-image: 
      radial-gradient(var(--halftone-color-dot-size) at 25% 25%, #000, #666, #ccc, #fff), 
      radial-gradient(var(--halftone-color-dot-size) at 75% 75%, #000, #fff);
  background-size: var(--halftone-size) var(--halftone-size); /*halftone size*/
  background-blend-mode: multiply;
  mix-blend-mode: screen;
}

h3 {
  font-family: Times New Roman;
  letter-spacing: 5px;
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
}

p {
  font-family: Times New Roman;
  font-style: italic;
  letter-spacing: 5px;
  font-size: 10px;
  color: white;
  mix-blend-mode: exclusion;
}

h2 {
  font-family: Times New Roman;
  letter-spacing: 5px;
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
}

/* BATANGAS */
.clickable {
    cursor: pointer;
}

#batangasbg {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: brightness(1) blur(0.1px) contrast(1);
}

#coconut {
  filter: brightness(0.9) blur(0.1px) contrast(1.1);
  position: absolute;
  z-index: 10;
  left: 10%;
  top: 40%;
 
}

#beachHouse {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 30%;
  top: 5%;
  mix-blend-mode: exclusion;
}

#kalachuchi {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 65%;
  top: 10%;
  mix-blend-mode: exclusion;
}

#crab {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 80%;
  top: 70%;
  mix-blend-mode: exclusion;
}

#pail {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 20%;
  top: 80%;
  mix-blend-mode: exclusion;
}

#unan {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 90%;
  top: 40%;
  mix-blend-mode: exclusion;
}

#halaman {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 75%;
  mix-blend-mode: exclusion;
}

#banka {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 5%;
  top: 15%;
  mix-blend-mode: exclusion;
}

#carousel {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 70%;
  top: 45%;
  mix-blend-mode: exclusion;
}

#bike {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 25%;
  top: 30%;
  mix-blend-mode: exclusion;
}

#ferris {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 85%;
  top: 5%;
  mix-blend-mode: exclusion;
}

#palay {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 3%;
  top: 65%;
  mix-blend-mode: exclusion;
}

#wheat {
  filter: brightness(1.1) blur(0.1px) contrast(1.1) invert(100%);
  position: absolute;
  z-index: 10;
  left: 52%;
  top: 48%;
}

a:link {
    color: white;
    text-decoration: none;
    font-size: 30px;
}

#copy {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    left: 32vw;
    right: 32vw;
    top: 80%;
    transform: translateY(-50%);
}