@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

body{
    font-family: 'Poppins', sans-serif;
    color: #323232;
    background-image: url('/img/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

#logo{
    position: absolute;
    top: 20px;
    left: 20px;
}
footer{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.orange{
    color: #E59F71;
}

.title h1{
    font-size: 52px;
}
.title h6{
    font-size: 16px;
}
.btn-login{
    background-color: #E59F71;
    color: white;
    border: 1px solid #E59F71;
    border-radius: 11px;
    box-shadow: 0px 26px 23px -13px rgba(229, 159, 113, 0.56);
}
.btn-login:hover{
    background-color: #b97a4f;
    color: white;
    border: 1px solid #b97a4f;
}
.form-control:focus{
    border-color: #e59f71;
    box-shadow: 0 0 0 0.25rem rgb(229 159 113 / 18%);
}
.form-control{
    background-color: #FFEEE3;
    border-radius: 11px;
}
::placeholder{
    color: #00000050;
}
/* tes */
#orang,#key,#chat1,#chat2{
    animation: up 1s infinite ease-in-out alternate;
}
#chat1,#chat2,#kotak,#bulat{
    animation: up 1s infinite ease-in-out alternate-reverse;
}


@keyframes up{
    0%{transform: translateY(0px)}
    100%{transform: translateY(12px)}
}