*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:system-ui,sans-serif;
}

body{
  max-width:100dvw;
  max-height:100dvh;
  overflow:hidden;
  background-color:#312f47;
  color:#fff;
}

.main-head{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  padding:2rem 4rem;
}

.main-content{
  display:block;
  padding-inline:2rem;
}

.img-container{
  max-width:100%;
  height:auto;
  max-height:75dvh;
  display:block;
  aspect-ratio:1/1;
  margin-inline:auto;
  border-radius:4rem;
  box-shadow:
  0 .25rem .25rem -.15rem #312f47,
  0 .25rem .5rem -.25rem #fff;
  overflow:hidden;
}

img{
  max-width:100%;
  height:auto;
  max-height:75dvh;
  display:block;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4rem;
  margin-inline:auto;
  transition: scale .125s linear, rotate .225s cubic-bezier(0.215, 0.610, 0.355, 1);

  &:hover{
    scale:1.15;
    rotate:12deg;
  }
}

img::selection{
  background-color:inherit;
  color:inherit;
}