html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #081425;
    background-image: url("https://lh3.googleusercontent.com/aida/AP1WRLvWyBFUQxXZ74aaJdbi3aYo9_mY1NXI8qDD46coi1l5uU1D6wjopTB1lllqi4QzYhvvNVK-GgfZRny6MwycaYUyAcQG_EbrUlo8t0pCxuZsk_nc7kg7v-ZBDwwLPDb-biQIp8YdRmEKMUgXUKi4w2eVZs5iWEDAxFOPaHFVC6QScmoXfIMJQiQ7tUiRG6UvzabAY1f9gdB9KcLi7FOsdqogWWkCInJwbt3Ahp2ObZarR3tFMxnrYw1k8sZz"); 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover;
    color: #d8e3fb;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.strength-segment {
    transition: all 0.3s ease;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #4edea3;
    cursor: pointer;
    border: 4px solid #081425;
}

.custom-toggle:checked + .toggle-track {
    background-color: #4edea3;
}

.custom-toggle:checked + .toggle-track > .toggle-knob {
    transform: translateX(20px);
    background-color: #00311f;
}