/*Imports*/

@import "tailwindcss";
@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');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

/*All*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/*Header*/

header {
    padding: 0px 100px 20px 100px;
}

.mask {
    background: linear-gradient(109deg, rgba(10, 12, 16, 0.90) 15%, rgba(10, 12, 16, 0.60) 50%, rgba(10, 12, 16, 0.90) 85%);
}

.logo,
.box p,
.card-price-text {
    font-family: "Lobster", sans-serif;
}

form {
    width: 370px;
    height: 500px;
}

input {
    border: 1px solid #fff;
}

/*Effect one*/

.levitating {
    animation: levitating 5s ease-in-out infinite;
}

@keyframes levitating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

/*Effect two*/

.box:hover {
    background-color: rgb(0, 0, 40);
    color: #fff;
    transition: 0.5s;
}