.alterimgdev, .alterimgphoto, .alterimgcv {
    --a: 0deg; /* control the angle of rotation (the smaller, the better) */
    width: 20vh;
    aspect-ratio: 1;
    border-radius: 20px;
    transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));
    -webkit-mask: 
      linear-gradient(135deg,#000c 40%,#000,#000c 60%)
      100% 100%/250% 250%;
    transition: .4s;
    cursor: pointer;
  }
  .alterimgdev, .alterimgphoto, .alterimgcv {
    --r: 1,1;
    -webkit-mask: 
      linear-gradient(45deg,#000c 40%,#000,#000c 60%)
      0 100%/250% 250%;
  }
  .alterimgdev:hover, .alterimgphoto:hover, .alterimgcv:hover {
    --i: -1;
    -webkit-mask-position: 0 0;
  }
  .alt:hover {
    -webkit-mask-position: 100% 0;
  }

  
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5em;
  }

  #navigation {
    width: 100vw;
    display: flex;
    justify-content: space-around;
  }