html {
    font-family: sans-serif;
    --color: black;
}
* {
	box-sizing: border-box;
}

body {
    width:  100vw;
    padding:  0;
    margin:  0;
    overflow-x: hidden;
    
    > header {
        width:  100%;
        overflow: hidden;
        text-align: center;
        padding: 1em 1em;
        background-color: #135213;
        color: white;
    
        h1 {
            margin: 0;
        }
    }

    > main {
        width: min(100%, 35em);
        margin: auto;
        padding: 1em;
    }
}

.box,
button {
	display: block;
    width: max-content;
    padding: 1em;
    border: .1em solid var(--color);
    border-radius: 2em;
    color: var(--color);
    line-height: 1em;
    margin: 0 .75em .75em 0;
    
    > *:first-child { margin-top: 0; }
    > *:last-child { margin-bottom: 0; }
}
.box.wide { width: 100% }
.box.inline { display: inline-block; }
a.box {
    text-decoration: none;
    color: var(--color);
}

.self {
    --color: #135213;
}
.idea.self h3:after {
    content: "(your idea)";
    margin-left: .25em;
    font-weight: 500;
    font-size: 80%;
}

input#santa-toggle {
    display: none;
}
input#santa-toggle:checked ~ .santa {
    --color: #0064ff;
}
input#santa-toggle:checked ~ .santa h3:after {
    content: "🎁";
    margin-left: .25em;
    font-weight: 500;
    font-size: 80%;
}
input#santa-toggle:checked ~ [for="secret-santa"] span:first-of-type {
    display: none;
}
input#santa-toggle:checked ~ [for="secret-santa"] span:nth-of-type(2) {
    display: none;
}

.acquired {
    --color: #cd7f00;
    font-weight: bold;
}
.removed {
    --color: #cd0000;
    font-weight: bold;
}
.open {
    font-weight: bold;
}
.acquired:before {
    content: "⊖";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}
.removed:before {
    content: "⊗";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}
.acquired h3:after {
    content: "(already acquired)";
    margin-left: .25em;
    font-weight: 500;
    font-size: 80%;
}
.open:before {
    content: "◯";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}
.back:before {
    content: "←";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}
.edit:before {
    content: "✎";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}
.new:before {
    content: "🞣";
    margin-right: .5em;
    font-size: 1.5em;
    float: left;
}

pre {
    font-family: sans-serif;
    white-space: pre-wrap;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
}
input[type="text"]#idea {
    font-weight: bold;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    cursor: pointer;
}
input[type="radio"]:checked + label {
    background-color: var(--color);
    color: white;
}
textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    min-height: 15em;
    field-sizing: content;
}
button {
    font-size: 1rem;
    background-color: transparent;
    cursor: pointer;
}
.hidden {
    display: none;
}
#acquired:not(:checked) ~ .acquired-hidden {
	display: none;
}