:root {
    --accent: #6262eb;
    --accent-success: #7BBA9C;
    --accent-failure: #ff4f7b;

    --text-primary: #ececec;
    --text-secondary: #cacaca;
    --text-muted: #a0a0a0;

    --bg-100: #484950;
    --bg-200: #3a3b41;
    --bg-300: #303136;
    --bg-400: #26272c;
    --shadow: #00000080;
    --font: 'Montserrat', sans-serif;
    
}

* {
    border: none;
    color:aliceblue;
    font-family:  var(--font);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.main {
    display:flex;
    flex-direction: column;
    height: 100dvh;
    overflow-y:scroll;
    overflow-x:hidden;
    width: 100%;
}

path {
    border: none;
}

button {
    border: none;
}

html {
    height: 100vh;
    background: linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );

    background: -moz-linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );

    background: -webkit-linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );
}

body {
    background: linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );

    background: -moz-linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );

    background: -webkit-linear-gradient(
        130deg,
        oklab(25.839000000000002% 0.0435 -0.04831) 0%,
        oklab(22.903000000000002% 0.00004 -0.04777) 100%
    );
    height: 100dvh;
    max-height: 100dvh;
    margin: 0px;
}

.hover::after {
    position: absolute;
    content: '';
    height: auto;
    width: auto;
    left: 0px;
    background-color: inherit;
    inset: 0.2rem;
}

.hover:hover,
button:hover {
    cursor: pointer;
}

.hover:hover:before,
.hover:active:before,
.hover:focus-within:before {
    opacity: 1;
}

*>.hover {
    position: absolute;
    box-sizing: border-box;
}

.hover:before {
    background: linear-gradient(60deg, transparent 5%, #ffffff 50%, transparent 99%);
    content: '';
    inset: 0px;
    opacity: 0;
    position: absolute;
    transition: opacity 200ms;
    z-index: 0;
}

.content{
    overflow-y: scroll;
}