:root {
    --color-bg: #f0f0e0;
    --color-text: #1a1a1a;
    --color-accent: #ffff00;
    --color-border: #1a1a1a;
    --color-box-bg: #ffffff;
    --color-shadow: #1a1a1a;
    --color-button-bg: #1a1a1a;
    --color-button-text: #f0f0e0;
    --color-button-active: #ff99cc;
    --color-range-bg: #d3d3d3;
    --color-range-thumb: #1a1a1a;
    --color-range-thumb-border: #f0f0e0;
    --color-highlight: #ffff00;
    --color-shadow-light: #999;
}

.drawing-filter {
    filter: contrast(1.5);
    border: 2px solid var(--color-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    border-radius: 8px;
    transform: scale(1);
    transition: transform 0.2s;
}
.drawing-filter:hover {
    transform: scale(1.15);
    transition: transform 0.2s;
}
body {
    font-family: 'Special Elite', monospace;
    background-color: var(--color-bg);
    color: var(--color-text);
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.zine-box {
    background-color: var(--color-box-bg);
    border: 2px solid var(--color-border);
    box-shadow: 5px 5px 0px var(--color-shadow);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.zine-header {
    background-color: var(--color-border);
    color: var(--color-bg);
    padding: 0.5rem 1rem;
    display: inline-block;
    font-size: 2.5rem;
    border: 2px solid var(--color-border);
    transform: rotate(-2deg);
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .zine-header {
        font-size: 1.8rem;
    }
}

.highlight-tape {
    background-color: var(--color-highlight);
    padding: 0.25rem 0.5rem;
    transform: rotate(1deg);
    display: inline-block;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--color-range-bg);
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
    border: 2px solid var(--color-border);
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: var(--color-range-thumb);
    cursor: pointer;
    border: 2px solid var(--color-range-thumb-border);
}

input[type="range"]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: var(--color-range-thumb);
    cursor: pointer;
    border: 2px solid var(--color-range-thumb-border);
}

.a-button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 2px solid var(--color-border);
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 3px 3px 0px var(--color-shadow-light);
    transition: all 0.1s ease-in-out;
}
.a-button:hover, .a-button:focus {
    background-color: var(--color-accent);
    color: var(--color-border);
    box-shadow: 5px 5px 0px var(--color-shadow);
    transform: translate(-2px, -2px);
}

.a-button.active {
    background-color: var(--color-button-active);
    color: var(--color-border);
    box-shadow: 3px 3px 0px var(--color-shadow);
}

.a-input {
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    padding: 0.5rem;
    width: 100%;
}
.a-input:focus {
    outline: none;
    background-color: var(--color-box-bg);
    border-color: var(--color-accent);
    box-shadow: 2px 2px 0px var(--color-shadow);
}

/* if on mobile, the tilt effect is disabled */
@media (max-width: 640px) {
  #finder,
  #contact {
    transform: none !important;
  }
}

.list-db-button {
    margin-top: 1rem;   
}