@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;600;700&family=Indie+Flower&family=JetBrains+Mono:wght@500;600;700;800&display=swap");


:root {
    --bar-width: 8vh;
    --bar-height: 1.5vh;
    --hamburger-gap: 1vh;
    --foreground: #333;
    --background: white;
    --hamburger-margin: 2vh;
    --animation-time: 200ms ease-in-out;
    --hamburger-height: calc((var(--bar-height) * 3) + (var(--hamburger-gap) * 2));
    --button-width: 38vh;
    --x-width: calc(var(--hamburger-height) * 1.41421356237);
}

*, *::after, *::before {
    box-sizing: border-box;
}

.navbar {
    position: fixed;
    margin: 0 10%;
    text-align: center;
    overflow-wrap: anywhere;
    display: block;
    width: 80%;
}

.hamburger {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: fixed;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    z-index: 99999;
    cursor: pointer;
    user-select: none;
}

.hamburger:has(input:checked) {
    --foreground: white;
    --background: #333;
}

.hamburger::before,
.hamburger::after,
.hamburger input {
    opacity: 100%;
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--foreground);
    border-radius: .5vh;
    transform-origin: left center;
    /*border: 1px solid var(--background);
    box-shadow: 0 0 0 1px var(--foreground);*/
    transition: opacity var(--animation-time), width var(--animation-time), rotate var(--animation-time), translate var(--animation-time), background-color var(--animation-time);
}
.hamburger input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2)
}
.hamburger:has(input:checked)::after {
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2)
}
.hamburger input[id=hamburger]:checked {
    opacity: 0;
    width: 0;
}

.sidebar {
    transition: translate var(--animation-time), opacity var(--animation-time);
    translate: -100%;
    opacity: 0;
    padding: 1vh;
    position: fixed !important;
    color: var(--background);
    width: 40vh;
    min-height: 100vh;
    text-align: left;
    top: 0 !important;
    left: 0 !important;
}
.sidebar.one {
    z-index: 99990;
    background-color: var(--foreground);
}
.sidebar.two {
    padding: calc(var(--hamburger-height) + var(--hamburger-margin) + 1vh) 1vh 1vh 1vh;
    z-index: 99992;
    background-color: dimgray;
}

nav input[name=menu] {
    display: none;
}

.hamburger:has(input:checked) + .sidebar.one {
    translate: 0;
    opacity: 95%;
}

.account-btn {
    height: calc(var(--hamburger-height) + 1.4vh);
    width: calc(var(--hamburger-height) + 1.4vh);
    border-radius: .5vh;
    text-decoration: none;
    margin: .3vh .3vh .3vh calc(var(--button-width) - (var(--hamburger-height) + .7vh));
    border: none;
    cursor: pointer;
    padding: .75vh;
    display: inline-block;
    transition: all var(--animation-time) ease;
    background-color: gray;
    font-size: 6vh;
    font-weight: 400;
    text-align: left;
    position: relative;
    right: 1vh;
}
.profile {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: .5vh;
    justify-items: center;
    background-color: darkgray;
    background-repeat: no-repeat;
    background-size: cover;
}
div.profile p {
    position: absolute;
    bottom: -.5vh;
    left: -.5vh;
    font-size: 1.5vh;
    padding: .1vh;
    background-color: white;
    color: black;
    text-align: center;
    overflow: hidden;
    border-radius: .5vh;
    width: calc(var(--hamburger-height) + 1.4vh + 1vh);
}

.hamburger-btn {
    border-radius: .5vh;
    text-decoration: none;
    margin: .5vh 0;
    border: none;
    cursor: pointer;
    padding: .5vh;
    width: var(--button-width);
    display: inline-block;
    transition: all var(--animation-time) ease;
}
.hamburger-btn.one {
    background-color: gray;
    font-size: 6vh;
    font-weight: 400;
    text-align: left;
}
.hamburger-btn.two {
    background-color: darkgray;
    font-size: 4vh;
    text-align: center;
}

.productBtn {
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: 0.2px;
    height: 6.5vh;
    line-height: 6.5vh;
    padding: 0 .5vh;
}

.productCandor {
    background:
        radial-gradient(140px 90px at 18% 20%, rgba(185, 219, 242, 0.7), transparent 60%),
        radial-gradient(160px 110px at 84% 78%, rgba(230, 160, 106, 0.35), transparent 65%),
        linear-gradient(180deg, #f8fbff 0%, #f5f5f5 55%, #fff6ee 100%);
    border-color: #d7e2ed;
}

.productDcops {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #eef2f6 100%);
    border-color: rgba(11, 18, 32, .18);
}

.productInspectre {
    background:
        radial-gradient(140px 90px at 26% 24%, rgba(107, 107, 255, 0.28), transparent 65%),
        radial-gradient(160px 110px at 74% 76%, rgba(176, 124, 255, 0.24), transparent 70%),
        linear-gradient(180deg, #0b0b12 0%, #07070c 100%);
    border-color: rgba(255, 255, 255, .18);
}

.productLafter {
    background:
        radial-gradient(140px 90px at 20% 22%, rgba(139, 26, 26, 0.3), transparent 65%),
        radial-gradient(160px 110px at 80% 78%, rgba(201, 168, 76, 0.2), transparent 70%),
        linear-gradient(180deg, #0c0808 0%, #140d0d 100%);
    border-color: rgba(201, 168, 76, .18);
}

.brandCandor {
    font-family: "Comfortaa", "Trebuchet MS", "Gill Sans", "Optima", sans-serif;
    color: #7b3f22;
    letter-spacing: 0.4px;
    font-weight: 700;
    font-size: 4vh;
}

.brandDc,
.brandOps,
.brandInspectre {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.6px;
    font-size: 3.8vh;
}

.brandDc {
    color: #4a0f1a;
    font-weight: 800;
}

.brandOps {
    font-weight: 700;
    background: linear-gradient(
        180deg,
        #eddc9a 0%,
        #d4bb63 30%,
        #bfa14a 52%,
        #a48732 72%,
        #8a6f24 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 0.4px rgba(230, 200, 120, .55),
        0 1px 1px rgba(120, 95, 30, .25);
}

.brandInspectre {
    text-transform: lowercase;
    background: linear-gradient(135deg, #6b6bff, #b07cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.brandLafter {
    font-family: "Indie Flower", cursive;
    background: linear-gradient(135deg, #ffffff 0%, #f0e6dc 20%, #ffffff 40%, #ffe8d6 60%, #fff 80%, #ffe0cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-size: 3.6vh;
}

.brandLafterA {
    background: linear-gradient(140deg, #c9a84c 0%, #e0c56a 30%, #f0b840 50%, #c9a84c 70%, #d4a030 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: inherit;
}

.selected {
    border: 2px solid red;
    transform: scale(1.05);
}

.hamburger-btn:hover {
    font-weight: 700;
    transform: scale(1.01);
}
.account-btn:hover {
    font-weight: 700;
    transform: scale(1.1);
}

nav input:checked + .hamburger-btn {
    font-weight: 700;
}
nav input:checked + .hamburger-btn + .sidebar.two {
    translate: 0;
    opacity: 100%;
}

nav input:checked + .account-btn {
    font-weight: 700;
}
nav input:checked + .account-btn + .sidebar.two {
    translate: 0;
    opacity: 100%;
}

.sectBtn {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: calc(var(--scaling) * 0.5);
    padding: calc(var(--scaling) * 0.1);
    width: calc(var(--scaling) * 2.5);
    height: calc(var(--scaling) * 2.5);
    font-size: calc(var(--scaling) * 1.3);
    font-weight: bold;
    z-index: 5000;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: calc(var(--scaling) * 0.2);
    background-color: dimgray;
    transition: all 0.2s ease;
}
.sectBtn:hover {
    background-color: #37474F;
    transform: scale(1.05);
}
#upBtn {
    top: calc(var(--scaling) * 0.5);
}
#upBtn::before {
    content: "";
    display: block;
    color: white;
    width: calc(var(--scaling) * 0.5);
    height: calc(var(--scaling) * 0.3);
    background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polyline points='1,5 5,1 9,5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
    background-size: contain;
}
#downBtn {
    bottom: calc(var(--scaling) * 0.5);
}
#downBtn::after {
    content: "";
    display: block;
    color: white;
    width: calc(var(--scaling) * 0.5);
    height: calc(var(--scaling) * 0.3);
    background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polyline points='1,1 5,5 9,1' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center;
    background-size: contain;
}