/* GOOGLE FONTS poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ———————————————————————————————————————————————————————————————————————————————————————————————————————————— */

/* inherent attributes to the entire page*/
*
{
  font-family: "Poppins", sans-serif;
  font-weight:  500;
  font-style:   normal;

}

body
{
    overflow: hidden;
    background-color: #FFF0EB;
}

/* ———————————————————————————————————————————————————————————————————————————————————————————————————————————— */

.container
{
    display:          flex;
    flex-direction:   column;

    gap:              5vh; 

    position:         absolute;
    width:            100vw;
    height:           100vh;
    align-items:      center;
    justify-content:  center;
    background-color: #FFF0EB;
}

.loader
{
    position: relative;
    width:    15vw;
    height:   15vw; 
}

.image
{
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);

    width:      100%; 
    height:     auto; 

    /* hides the image */
    clip-path:  inset(0 100% 0 0); 
}

.mask
{
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    width:     100%;
    height:    auto;

}


/* ———————————————————————————————————————————————————————————————————————————————————————————————————————————— */


.wrapper
{
  display:         flex;
  gap:             0.2vw;

  align-items:     center;
  transform:       translateX(-10px); 

}

.letter
{
  width:            100%;
  height:           1.8vw;
  position:         relative;
}