*, *::before, *::after 
{
  box-sizing: border-box;
}

@keyframes fadeIn 
  {
    from 
    {
      opacity: 0;
    }
    to 
    {
      opacity: 1;
    }
  }

html 
{
  font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:    16px;
}  

body 
{
  display:            grid;
  grid-template-rows: 1fr 1fr 1fr;
  height:             100vh;
  margin:             0;
  background-color:   #1e1e2f;
  color:              white;
  animation:          fadeIn 1s ease-in-out;
}

.Title-Wrapper 
{
  display:              grid;
  place-self:           end center;
  grid-template-areas:  "stack";
  font-family:          "Bungee Shade", sans-serif;
  font-weight:          bold;
  font-size:            2.8rem;
}

.Fanned-Element 
{
  grid-area:        stack;
  transform-origin: left;
} 

.Main-Title 
{
  grid-area:  stack;
  color:      white;
  z-index:    10;
}

@keyframes dealIn 
{
  from    
  {
    transform:  rotate(0deg);
    opacity:    1;
  }
  to  
  {
    transform:  rotate(var(--rotate-angle));
    opacity:    1;
  }
}

.Fanned-Element-Wrapper 
{
  will-change:          transform;
  backface-visibility:  hidden;
  grid-area:            stack;
  z-index:              7;
  transform-origin:     left;
  animation:            dealIn 0.5s ease-out forwards;
  animation-delay:      0.5s;
}

.Fanned-Element-Wrapper:nth-child(1) 
{
  --rotate-angle: -2deg;
}

.Fanned-Element-Wrapper:nth-child(2) 
{
  --rotate-angle: -4deg;
}

.Fanned-Element-Wrapper:nth-child(3) 
{
  --rotate-angle: -6deg;
}

.Fanned-Element-Wrapper:nth-child(4) 
{
  --rotate-angle: -8deg;
}

.Fanned-Element-Wrapper:nth-child(5) 
{
  --rotate-angle: -10deg;
}

.Sparkle 
{
  position:        absolute;
  opacity:         0;
  top:             -4px;
  right:           -10px;
  font-size:       0.6em;
  animation:       sparkleTwinkle 0.8s ease-out forwards;
  animation-delay: 1.1s;
  pointer-events:  none;
}

@keyframes sparkleTwinkle 
{
  0% 
    {
      transform: scale(0.8) rotate(10deg);
      opacity:   0;
    }
  50% 
    {
      transform: scale(1) rotate(10deg);
      opacity:   1;
    }
  100% 
    {
      transform: scale(0.3) rotate(10deg);
      opacity:   0;
    }
}

.Middle-Wrapper 
{
  display:        grid;
  place-items:    center; 
  opacity:        0;
  animation:      fadeIn 1s ease-in-out 1.7s forwards;
}

.Navigation-Bar
{
  display:                grid;
  grid-template-columns:  repeat(3, 1fr);
  list-style:             none;
  padding:                0;
  margin:                 0;
  gap:                    4.5rem;
  justify-items:          center;
  align-items:            start;
  /* padding-top:            1rem; */
  font-size:              1.2rem;
}

.Navigation-Bar li 
{
  display:            grid;
  grid-template-rows: auto auto;
  place-items:        center;
  row-gap:            0.5rem;
}

.emoji-wrapper
{
  display:      inline-block;
  line-height:  1;
}

.emoji-wrapper-camera
{
  display:      inline-block;
  line-height:  1;
  transform:    translateX(25px);
  z-index:      10;
  position:     relative;
}

.emoji-wrapper-palette
{
  display:      inline-block;
  line-height:  1;
  transform:    translateX(-25px);
  z-index:      0;
}

.emoji-wrapper-palette-stack
{
  width:  2.5em;
}

.icon-link 
{
  padding:          0;
  display:          inline-block;
  text-align:       center;
  position:         relative;
  font-size:        3.2rem;
  color:            white;
  background:       transparent;
  text-decoration:  none;
  border:           none;
}

.modal-wrapper 
{
  position: relative;
}

.modal 
{
  display:          none;
  position:         absolute;
  top:              78%;
  left:             50%;
  transform:        translateX(-50%);
  background-color: #3d4a68;
  color:            white;
  padding:          0.8rem;
  border-radius:    10px;
  box-shadow:       0 0 10px rgba(0, 0, 0, 0.5);
  z-index:          10;
  width:            200px;
  text-align:       center;
  font-size:        0.8rem;
  font-weight:      bold;
}

.modal-arrow 
{
  position:       absolute;
  top:            -12px;
  left:           50%;
  transform:      translateX(-50%);
  width:          0px;
  height:         0px;
  border-left:    12px solid transparent;
  border-right:   12px solid transparent;
  border-bottom:  12px solid #3d4a68;
}

.copy-button 
{
  margin-top:       0.5rem;
  padding:          0.4rem 0.8rem;
  background-color: #4a6ea9;
  color:            white;
  border:           none;
  border-radius:    6px;
  cursor:           pointer;
  font-size:        0.9rem;
}

.emoji 
{
  position: absolute;
  top:      0;
  left:     0;
}

.camera 
{
  z-index:  2;
  left:     0;
  top:      0;
}

.palette 
{
  z-index:  1;
  left:     0.35em;
}

@media (max-height: 480px) 
{
  body 
  {
    grid-template-rows: 1fr 1fr;
    height:             100vh;
  }

  .Title-Wrapper
  {
    font-size:      2.5rem;
    place-self:     end center;
  }

  .Middle-Wrapper 
  {
  }
  
}

@media (max-width: 655px) 
{
  body 
  {
    grid-template-rows: 1fr 1fr 1fr;
    height:             100vh;
  }

  .Title-Wrapper
  {
    font-size:      2.1rem;
    place-self:     end center;

  }

  .Middle-Wrapper 
  {
    display:    grid;
    place-self: center center;
    padding-top: 10vh;
  }

  .Navigation-Bar
  {
    grid-template-columns:  1fr;
    gap:                    3rem;
  }

}