.very-rounded {
    border-radius: 3rem;
}

.profile {
    max-width: 300px;
}

* {
    font-family: ui-rounded, "SF Pro Rounded", system-ui, san-serif;
}

@media (prefers-color-scheme: dark) {
    * {
        color: #ffffffaa;
    }
    hr {
        border-color: #ffffff33;
    }
    .background-main {
        background-color: #222;
        /*background-color: #f00;*/
    }
    .background-content {
        background-color: #333;
    }
    a {
        color: #ffffffcc;
        font-weight: 500;
    }
    a:hover {
        text-decoration: underline;
        color: #ffffffff;
    }
    .btn {
        background-color: #ffffffaa;
        color: black;
        border: 3px solid #00000000;
    }
    .btn:hover {
        background-color: #ffffffcc;
        color: black;
        box-shadow: 0px 3px 10px #ffffff44;
    }
    .btn:active {
        background-color: #ffffff55;
    }
    .navbar {
        background-color: #222222cc;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@media (prefers-color-scheme: light) {
    * {
        color: #000000aa;
    }
    .background-main {
        background-color: #fafafa;
        /*background-color: #f00;*/
    }
    .background-content {
        background-color: white;
    }
    a {
        color: #000000aa;
        font-weight: 500;
    }
    a:hover {
        text-decoration: underline;
        color: #000000ff;
    }
    .btn {
        background-color: #000000aa;
        color: white;
        border: 3px solid #00000000;
    }
    .btn:hover {
        background-color: #000000bb;
        color: white;
        box-shadow: 0px 3px 10px #00000044;
    }
    .btn:active {
        background-color: #000000dd;
    }
    .navbar {
        background-color: #fafafacc;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}