@import "tailwindcss";

/* npx @tailwindcss/cli -i ./src/style/master.css -o ./src/style/output.css --watch */

.favBg {
    background: #C75773;
    background: linear-gradient(180deg, rgb(199, 87, 115) 0%, rgba(16, 24, 40, 1) 20%, rgba(16, 24, 40, 1) 80%, #2a7b9b 100%);
}

.btnBg {
    background: #000000;
    background: linear-gradient(258deg, #2a7b9b 8%, rgba(199, 87, 115, 1) 100%);
}

.favFont1 {
    font-family: "Lato", sans-serif;
}

.favFont2 {
    font-family: "Jersey 10", sans-serif;
}

.myShadow {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.645);
}

/* --------------------over lines----------------------- */
.lineX {
    width: 0px;
    height: 5px;
    background-color: #2aff67;
    position: absolute;
    top: 50%;
    left: 0;
    transition: 1s;
    display: none;
    z-index: 1000;
}

.lineY {
    width: 5px;
    height: 0px;
    background-color: #2aff67;
    position: absolute;
    top: 0;
    left: 50%;
    transition: 1s;
    display: none;
    z-index: 1000;
}

.lineXY1 {
    width: 0px;
    height: 5px;
    background-color: #2aff67;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotate(-45deg);
    transform-origin: left;
    transition: 1s;
    display: none;
    z-index: 1000;
}

.lineXY2 {
    width: 0px;
    height: 5px;
    background-color: #2aff67;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotate(45deg);
    transform-origin: right;
    transition: 1s;
    display: none;
    z-index: 1000;
}

/* --------------------stars----------------------- */
.star {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.8;
    animation: shine 5s infinite ease-in-out;
}

@keyframes shine {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

/* -------------------------------------------------- */
#joy {
    font-size: 50px;
}