* {
font-family: Noto Sans;
font-size: 16px;
color: white;
transition: 0.2s;
}

body {
    background-color: #202020;
    background-image: url("carbon_fiber.svg");
    background-attachment: scroll;
    margin: 0px;
}

p {
    margin: 20px;
}

h1 {
    font-size: 32px;
    margin: 20px;
}

h2 {
    font-size: 24px;
    margin: 20px;
}

h3 {
    font-size: 18px;
    margin: 20px;
}

small {
    font-size: 14px;
    margin: 10px 20px;
}

a {
    margin: 20px;
    text-decoration: none;
    color: #8080ff;
}

.topnav-container {
    background-color: #402060;
    top: 0px;
    left: 0px;
    right: 0px;
    padding: 16px;
}

.topnav {
    overflow: hidden;
    border-radius: 8px;
    box-shadow:
    -4px 4px 8px #201030,
    4px -4px 8px #8040c0;
}

.topnav > small:not(.topnav-right) {
    float: left;
}

.topnav-inactive {
    float: left;
    margin: 10px;
    padding: 4px 16px;
    border: 1px solid #201030;
    border-radius: 8px;
    text-decoration: none;
    text-shadow: none;
    color: white;
    font-size: 17px;
    box-shadow:
    -2px 2px 4px #201030,
    2px -2px 4px #8040c0;
}

.topnav-inactive:hover {
    box-shadow: none;
}

.topnav-active {
    float: left;
    margin: 10px;
    padding: 4px 16px;
    border: 1px solid #201030;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-size: 17px;
    text-shadow: none;
    box-shadow:
    inset -2px 2px 4px #201030,
    inset 2px -2px 4px #8040c0;
}

.topnav-right {
    float: right;
}

.topnav-text {
    text-align: center;
    padding: 8px 16px;
    margin: 8px;
    text-decoration: none;
    text-shadow: none;
}

.style-hcb-label {
    cursor: pointer;
}

.style-hcb-label::after {
    content: "Carbon";
}

/* Fancy Style */

#style_hcb:checked ~ .style-hcb-label::after {
    content: "Fancy";
}

body:has(#style_hcb:checked) {
    background-image: url('backgrounds/donox_anarchy_shader_03.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body:has(#style_hcb:checked) .section {
    background-color: transparent;
    border: 1px solid #fff4;
    border-radius: 16px;
    box-shadow: none;
    backdrop-filter: blur(16px);
}

body:has(#style_hcb:checked) .button {
    border: 1px solid #fff4;
    border-radius: 16px;
    box-shadow: none;
}

body:has(#style_hcb:checked) .hcb-label {
    border: 1px solid #fff4;
}

body:has(#style_hcb:checked) .submenu {
    border: 1px solid #fff4;
    box-shadow: none;
}

body:has(#style_hcb:checked) *:not(.topnav *) {
    text-shadow: 4px 4px 16px rgb(0, 0, 0), -4px 4px 16px rgb(0, 0, 0), -4px -4px 16px rgb(0, 0, 0), 4px -4px 16px rgb(0, 0, 0);
}

/* / Fancy Style */

.fancy-button {
    border-radius: 0px 16px 0px 16px;
}

.section {
    background-color: #203020;
    border-radius: 8px;
    margin: 12px;
    display: inline-block;
    vertical-align: top;
    box-shadow:
    inset -4px 4px 8px #101810,
    inset 4px -4px 8px #406040;
}

.button {
    border: 1px solid #101810;
    border-radius: 8px;
    margin: 10px 20px;
    padding: 4px 16px;
    display: inline-block;
    box-shadow:
    -4px 4px 8px #101810,
    4px -4px 8px #406040;
    transition: 0.2s;
}

.button:hover {
    box-shadow: none;
}

.container {
    display: inline-block;
    vertical-align: top;
}

.section hr {
    border: 2px dotted #101810;
    margin: 8px;
}

.files {
    padding: 0px 20px 20px 0px;
}