@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
    font-family: "Pathfinder Actions";
    src: url("PATHFINDER2EACTIONS.TTF")
}

* {
    font-family: "Inter", sans-serif;
    font-size:.9rem;
    margin:0;
    padding:0;
    user-select:none;
}

body {
    background-color: hsl(205, 100%, 12%);
    color: hsl(0, 0%, 88%);
    width:min(calc(100vw - 2rem), 65ch);
    margin-inline:auto;
    height:100svh;
}

.homepage {
    display:flex;
    align-items: center;
    height:4rem;
    color: unset;
    text-decoration: none;
}

h1 {
    margin-block:1.2rem;
}

main {
    min-height:calc(100% - 6rem);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.input {
    display:flex;
    flex-direction: column;
    gap:1rem;
}

.input-group {
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:.5rem;
    div {
        display:flex;
        gap:.25rem;
        align-items: center;
        &:has(select) {
            flex-grow:1;
        }
    }
}

.output {
    font-weight:500;
    border:2px solid black;
    padding:1rem;
    &.starlit {
        color:purple;
        border-color:purple;
    }
    &.crit {
        color:red;
        border-color:red;
    }
}

select {
    flex-grow:1;
    border:unset;
    font-size:unset;
    appearance:unset;
    padding:.5rem;
}

input {
    opacity:0;
    width:0;
    height:0;
}

label {
    cursor: pointer;
}

.switch {
    position: relative;
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    
}

.slider {
    --color: #ccc;
    position: absolute;
    inset:0;
    border-radius: 5rem;
    background-color: var(--color);
    transition: .4s;
}

input:disabled + .slider {
    --color: #d3d3d3;
}

label:has(+ label input:disabled){
    color:#d3d3d3;
}

input:checked + .slider {
    --color: #2196F3;
}

#starlitSentinel:checked + .slider {
    --color: purple;
}

#crit:checked + .slider {
    --color: red;
}

.hidden {
    display:none !important;
}