*{
    font-family: 'Crimson Pro', serif;
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #D9CDF7;
    
}

div{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    gap: 4rem;   
    transition: 0.3s;

}

.sofa{
    align-items: center;
    animation: FromRight 0.5s ease backwards;
    animation-delay: 0.4s;
}


.sofa-image img{
    position: relative;
    left: 90%;
    cursor: pointer;
    animation: FromTop 0.5s ease backwards;
    animation-delay: 0s;
    transition: 2s;

}


.sofa-image{
    align-items: center;
    height: 250px;
    width: 380px;
    background: url(./src/image2.png) center no-repeat;

}

.desc {
    
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    animation: FromTop 0.5s ease backwards;
    animation-delay: 0.4s;


}

.desc p{
    color: #271A45;
    font-weight: normal;
}

.code{
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    font-weight: light;
}

.title{
    font-family: 'Crimson Pro', serif;
    font-size: 32px;
    font-weight: regular;

}

#gif{
    display: none;
    
}

#x{
    display:none
}

#x.active{
    display: flex

}

#icon.active{
    display: none;
}

#gif.active{
    display: flex;
    animation: FromBottom 0.5s ease backwards;
    animation-delay: 0s;
}
.price{
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: light;
}

.desc button{
    background: none;
    border: 1.5px #271A45 solid;
    border-radius: 20px;
    padding: 10px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    transition: 0.4s;
    color: #271A45
}
.desc button:hover{
    color: white;
    background-color: #271A45;

}

@keyframes FromBottom {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  
  
  @keyframes FromTop {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }
  
  @keyframes FromRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
  
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  
  @keyframes FromLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
  
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }