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

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Oxanium', sans-serif;
    background-color: #1A1826;
    color: #FFFFFF;
}

/* styles.css */
.cut-corners {
    clip-path: polygon(10% 0%,
            /* Top-left cut */
            90% 0%,
            /* Top-right cut */
            100% 10%,
            /* Top-right corner */
            100% 90%,
            /* Bottom-right corner */
            90% 100%,
            /* Bottom-right cut */
            10% 100%,
            /* Bottom-left cut */
            0% 90%,
            /* Bottom-left corner */
            0% 10%
            /* Top-left corner */
        );
}

.top-corners {
    clip-path: polygon(93% 0, 100% 8%, 100% 100%, 0 100%, 0 8%, 7% 0);
}

.except-bottom-left {
    clip-path: polygon(93% 0, 100% 7%, 100% 93%, 93% 100%, 0 100%, 0 7%, 7% 0);
}

.except-bottom-right {
    clip-path: polygon(9% 0, 93% 0, 100% 7%, 100% 100%, 7% 100%, 0 93%, 0 7%);

}

.top-right-corner {
    clip-path: polygon(94% 0, 100% 24%, 100% 100%, 0 100%, 0 0);
}


.bottom-left-corner {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 5% 100%, 0 76%)
}

.gradient-border {
    border: 2px solid transparent;
    border-image-source: radial-gradient(80.38% 222.5% at -13.75% -12.36%, #A2A2A2 0%, rgba(191, 193, 193, 0) 100%),
        radial-gradient(80.69% 208.78% at 108.28% 112.58%, #41668C 0%, rgba(135, 38, 183, 0) 100%);
    border-image-slice: 1;
}

.gradient-bg {
    background: radial-gradient(80.38% 222.5% at -13.75% -12.36%, #A2A2A2 0%, rgba(191, 193, 193, 0) 100%),
        radial-gradient(80.69% 208.78% at 108.28% 112.58%, #41668C 0%, rgba(135, 38, 183, 0) 100%);
}

input[type="email"],
input[type="password"] {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-button:hover {
    color: #9ca3af;
}

.submit-button {
    background-color: #476685;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #3a5574;
}

.bottom-left-corner {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 75% 100%, 5% 100%, 0 76%)
}