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

body {
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.app-container {
    background: #f3f3f3;
    min-height: 940px;
    width: 100%;
    height: 100vh;
}

.circle {
    width: 450px;
    height: 450px;
    background: linear-gradient(to bottom, #fa39ad 40%, #fa6c4c 50%);
    filter: blur(120px);
}

.red {
    background: #fe642d; 
    border: 2px solid #ee5e4b;
}

.yellow {
    background: #ffc432;
    border: 2px solid #f28d3a;
}

.green {
    background: #5bde47;
    border: 2px solid #5fc651;
}

.app-color-yellow { color: #ffa41d; }
.app-color-black { color: #292b48; }
.app-color-gray { color: #877f95; }
.app-color-lavender { color: #9ea1cf; }
.app-color-pink { color: #fb28cd; }
.app-bg-lavender { background: #d5d7ff; }
.app-bg-light-white { background: #f7f8ff; }
.app-bg-light-white-2 { background: #eff2fc; }
.app-color-dribble { color: #e04b85;}

.app-shadow {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.03);
}

.app-title {
    background: linear-gradient(45deg, #fb28cd, #7c65d7);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

}

span.active {
    position: relative;
    color: #292b48;
    display: flex;
    justify-content: center;
    align-items: end;
}

span.active::after {
    content: '';
    width: 200%;
    height: 2px;
    background: #292b48;
    position: absolute;
    bottom: -20px;

}

.switch-checkbox {
    display: none;
}

.switch {
    position: relative;
}

.switch-bg {
    height: 24px;
    width: 44px;
    background: #fb28cd;
    border-radius: 15px;
}

.switch-indicator {
    position: absolute;
    height: 20px;
    width: 20px;
    background: #fb28cd;
    border: 5px solid white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: .2s ease-out;
}

.switch-checkbox:checked~.switch-indicator {
    transform: translateX(100%);
}

.switch-checkbox:checked~.switch-bg {
    background: #e9ecfa;
}

/* DARK MODE STYLES */

body.dark-mode {
    background-color: #0c1a1a;
    color: #d4f9f0;
}

body.dark-mode .app-container {
    background: #081515;
}

body.dark-mode .circle {
    background: linear-gradient(to bottom, #00ffaa 40%, #0066ff 60%);
    filter: blur(100px);
}

body.dark-mode .app-title {
    background: linear-gradient(45deg, #00ffcc, #33ccff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

body.dark-mode .app-color-black {
    color: #e6fff9;
}

body.dark-mode .app-color-gray,
body.dark-mode .app-color-lavender {
    color:#88cfd3
}

body.dark-mode .app-bg-light-white,
body.dark-mode .app-bg-light-white2,
body.dark-mode .bg-white,
body.dark-mode .bg-white\/50,
body.dark-mode .bg-white\/80 {
    background-color: #112222 !important;
    border-color: #1a3a3a !important;
}

body.dark-mode .app-shadow {
    box-shadow: 0 10px 25px rgba(0, 255, 170, 0.1);

}

body.dark-mode .switch-bg,
body.dark-mode .switch-indicator {
    background: #00ffaa;
}