body {
    margin: 0;
    background: url("tile.png");
    font-family: Arial, Helvetica, sans-serif;
  }

  button {
    /* margin: 5px 0 0 5px; */
    background-color: transparent;
    object-fit: cover;
    height:100%;
    object-fit: cover;
    overflow: hidden;
  }

  button img {
    padding: 10px;
    max-height: 93%;
    max-width: auto;
  }

  .x-close {
    position: absolute;
    right: 3%;
    top: 3%;
    background-color: transparent;
    border: none;
    background-image: url("../content/x.png");
    background-size: cover;
    width: 50px;
    height: 50px;
    
  }

  :popover-open {
    width:auto;
    height: auto;
    max-width: 60%;
    max-height: 80%;
    border-radius: 10px;
    overflow:hidden;
    color: white;
    animation: fadeIn 0.5s ease-in;
    /*background:
      radial-gradient(circle farthest-side at 0% 50%,#f2f2f2 23.5%,#0000 0)33.6px 48px,
      radial-gradient(circle farthest-side at 0% 50%,#efefef 24%,#0000 0)30.4px 48px,
      linear-gradient(#f2f2f2 14%,#0000 0, #0000 85%,#f2f2f2 0)0 0,
      linear-gradient(150deg,#f2f2f2 24%,#efefef 0,#efefef 26%,#0000 0,#0000 74%,#efefef 0,#efefef 76%,#f2f2f2 0)0 0,
      linear-gradient(30deg,#f2f2f2 24%,#efefef 0,#efefef 26%,#0000 0,#0000 74%,#efefef 0,#efefef 76%,#f2f2f2 0)0 0,
      linear-gradient(90deg,#efefef 2%,#f2f2f2 0,#f2f2f2 98%,#efefef 0%)0 0 #f2f2f2;
background-size: 64px 96px;
background-color: #f2f2f2; */
background:
      radial-gradient(27% 29% at right, #0000 83%,#0d0d0d 85% 99%,#0000 101%) calc(32px/2) 32px,
      radial-gradient(27% 29% at left, #0000 83%,#0d0d0d 85% 99%,#0000 101%) calc(32px/-2) 32px,
      radial-gradient(29% 27% at top, #0000 83%,#0d0d0d 85% 99%,#0000 101%) 0 calc(32px/2),
      radial-gradient(29% 27% at bottom, #0000 83%,#0d0d0d 85% 99%,#0000 101%) 0 calc(32px/-2)
      #060606;
background-size: 64px 64px;

  }

  

  [popover] {
    animation: fadeIn 1s ease-in;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


  p {
    line-height: 1.5;
  }

  ::backdrop {
    backdrop-filter: blur(3px);
  }

  .beeb {
    color: aqua;
  }

  :bongwater {
    color: aqua;
    width: 1px;
  }
/*
  .pf-grid-container {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    max-width: 90%;
    margin: 0 auto;
}

.pf-grid-item {
    flex: 1 0 30%; 
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    text-align: center;
    flex-flow: row wrap;
    max-height: 100px;
}


.pf-grid-item img {
    height:90%;
    width: 90%;
    justify-content: center;
    align-items: center;
    padding-left:10px;
}

*/ 

.pf-grid {
    display: flex;
    flex-wrap: wrap;
}

.pf-box {
    flex: 1 0 200px;
    max-width: 200px;
    max-height: 200px;
    margin: 10px;
    border: 1px solid #4e4e4e;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    backdrop-filter: blur(3px);
    
}


.pf-boxButton {
    object-fit: cover;
    width: 100%;
}

.pf-boxButton img {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}



.pf-box img:hover {
    -webkit-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -ms-animation-duration: 1000ms;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    transform: translate(-50% -50%);
  }
  
 
  /*
 .btnTest {
    object-fit: cover;
    padding: 10px;
    max-width: 50%;
    max-height: 10%;
    object-fit: cover;
    overflow: hidden;
  }
  */

  
/*
  .testr {
    max-width: 500px;
    max-height: 300px;
    border: 15px solid green;
    
  }

  .testr img {
    max-width: 500px;
    max-height: auto;
    object-fit: cover;
    overflow: hidden;
  } */
/* --- GALLERY IMAGES --- */

/* .protopopover img {
    justify-content: center;
    align-items: center;
    max-width: 50%;
    margin-top:-5%;
    margin-bottom: -5%;
  }
*/

.protoImg {
  height:100%;
}
.protoImg img {
  justify-content: center;
  align-items: center;
  max-height: 80%;
  margin-top: -5%;
  margin-bottom: -5%;
}


  .mechaImg {
    height:100%;
    
  }
  .mechaImg img {
    justify-content: center;
    align-items: center;
    max-height: 70%;
    
  }


  .frogImg {
    height:100%;
  }
  .frogImg img {
    justify-content: center;
    align-items: center;
    max-height: 70%;
    
  }

  .logoImg {
    height:100%;
  }
  .logoImg img {
    justify-content: center;
    align-items: center;
    max-height: 70%;
    
  }

  .btnTestLogo {
    filter: drop-shadow(0 0 1.5rem rgb(234, 233, 228));
  }