@import "fonts";

$white: #ffffff;
$white-a50: rgba(255, 255, 255, .5);
$white-a75: rgba(255, 255, 255, .75);
$purple: #25002f;
$purple-dark: #110018;
$purple-light: #3A0051;
$purple-lighter: #4e166a;
$pink: #ee33ff;
$pink-a25: rgba(238, 51, 255, .25);
$gold: #FFC955;
$black: #000000;
$grey: #414141;
$red: #f44336;
$yellow: #ffeb3b;
$green: #4CAF50;
$blue: #2196F3;
$gradient-purple-dark-to-purple: linear-gradient(to bottom, #25002f 0%,#110018 100%);
$gradient-purple-light-to-purple: linear-gradient(to bottom, #25002f 0%,#110018 100%);

body {
    color:var(--bs0-dark);
    background-color: #f0f0f0;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTQuMzUwMDAwMDAwMDAwMDAwNSAnIGlkPSdmZUNvbG9yTWF0cml4MzExOScgLz4KCQkJPGZlQ29tcG9zaXRlIGluMj0ncmVzdWx0NScgb3BlcmF0b3I9J2luJyBpbj0nU291cmNlR3JhcGhpYycgcmVzdWx0PSdyZXN1bHQ2JyBpZD0nZmVDb21wb3NpdGUzMTIxJyAvPgoJCQk8ZmVNb3JwaG9sb2d5IGluPSdyZXN1bHQ2JyBvcGVyYXRvcj0nZGlsYXRlJyByYWRpdXM9JzUwJyByZXN1bHQ9J3Jlc3VsdDMnIGlkPSdmZU1vcnBob2xvZ3kzMTIzJyAvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPgoJPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgeD0nMCcgeT0nMCcgaWQ9J3JlY3QyOTg1JyBmaWxsPScjMDAwMDAwJy8+ICAgICAKCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgc3R5bGU9J2ZpbGw6IzIyMDAzMztmaWx0ZXI6dXJsKCNmaWx0ZXIzMTE1KScgLz4KPC9zdmc+);
    background-attachment: fixed;
}

a {
    transition:color .3s ease;
    text-decoration: none;
    color:$gold;
    &:hover {
        color:$pink;
    }
}

h1 {
    font-family:"Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
}

.container-fluid {
    max-width: 90vw;
}

label.required::after {
    content: ' *';
    color: var(--bs-danger);
    font-weight: 700;
    font-size: 1rem;
}

.form-control,
.form-control:focus,
.btn:focus,
.btn.active {
    box-shadow: none;
}

.dropdown-menu {
    min-width: 20rem;
}

.thread-title {
    display:inline-block;
    margin-left:1rem;
}

.post-header {
    background:#dedede;
}

.card {
    border-radius:.5rem;
    border-color:$purple;
    background:$purple-dark;
    color:$white;
    .card-header {
        border-radius:.25rem;
        background:$gradient-purple-dark-to-purple;
        color:$white;
        border-bottom:0;
    }
}

.btn-purple {
    border-color:$purple-light;
    background:$gradient-purple-dark-to-purple;
    color:$white;
    &:hover {
        border-color:$purple-lighter;
        background:$gradient-purple-light-to-purple;
        color:$gold;
    }
}

.alert-danger {
    background:$red;
    color:$white;
    border-color:$red;
}

input[type="file"] {
    background:$gradient-purple-dark-to-purple;
    border-color:$purple-light;
    color:$white;
    &::file-selector-button {
        background:$gradient-purple-dark-to-purple;
        color:$white;
    }
}