*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: white transparent;
}

body {
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(100px);
    background-image: repeating-radial-gradient(
      circle at 50% 50%,
      springgreen 0 50px,
      magenta 50px 100px,
      skyblue 150px 200px
    );
  }
}

.container-face {
  width: 200px;
  height: 200px;
  position: relative;

  .face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    transition-property: left, transform, z-index;
    transition-duration: 1s, 0.5s, 0.5s;
    transition-delay: 0, 1s, 1s;
  }

  .face1 {
    background-image: url('assets/n1.avif');
    z-index: 1;
  }
  .face2 {
    background-image: url('assets/n2.png');
    z-index: 2;
  }

  &:hover {
    .face1 {
      left: -200px;
      transform: translateX(200px);
      z-index: 2;
    }
    .face2 {
      left: 200px;
      transform: translateX(-200px);
      z-index: 1; 
    }
  }
}