html {
    height: 100%;
    height: -webkit-fill-available;
}

body {
    overflow-y: auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #181d29;
}

::-webkit-scrollbar-thumb {
background: #2d3748;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: #4a9eff;
}

body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
min-height: 100vh;
min-height: -webkit-fill-available;
background: #181d29;
pointer-events: none;
z-index: -1;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}


.background-meshes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
min-height: 100vh;
min-height: -webkit-fill-available;
z-index: -1;
overflow: hidden;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}

.background-mesh-bottom {
position: absolute;
width: 500px;
height: 500px;
background-color: transparent;
border-radius: 50%;
opacity: 0;
filter: blur(120px);
bottom: -200px;
right: -200px;
}

.background-mesh-top {
position: absolute;
width: 500px;
height: 500px;
background-color: transparent;
border-radius: 50%;
opacity: 0;
filter: blur(120px);
top: -200px;
left: -200px;
}