:root {
    --text-color: #FFF;
    --text-color-dark: #000;
    
    --bg-color-start: #a3a1a6;
    --bg-color-top: #a3a2aa;
    --bg-color-mid: #dbcaae;
    --bg-color-end: #fdd597;
    
    --cloud-color: #f3ac94;
    --cloud-opacity: 0.6;

    --content-padding: 1rem;
}

html, body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background: var(--bg-color-start);
    background: linear-gradient(160deg, var(--bg-color-top) 45%, var(--bg-color-mid) 71%, var(--bg-color-end) 89%);
    background-attachment: fixed;
}

body, p, h1, h2, h3, h4, h5, h6, span, a, li, ul, ol, button, summary, label, input, select, textarea, div:not(#clouds) {
    color: var(--text-color);
    font-family: monospace;
    font-size: 1rem;
}

button {
    background: none;
    border: 1px solid var(--text-color);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;

    &:hover {
        color: var(--bg-color-end);
        border-color: var(--bg-color-end);
    }
}

input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
    border-radius: 0.25rem;
    border: 1px solid var(--text-color);
    color: var(--text-color-dark);
}

ul li {
    margin-bottom: 0.75rem;
}

#about,
#cloud-controls {
    padding: var(--content-padding);
    max-width: calc(100vw - var(--content-padding) * 2);
    box-sizing: border-box;
}

#cloud-controls summary {
    cursor: pointer;
}

#cloud-controls div {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
}

#clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    border-radius: 50%;
    background: var(--cloud-color);
    opacity: var(--cloud-opacity);
    left: 0;
    top: 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
}