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

:root {
    --vhs-dark-blue: #0F0766;
    --vhs-light-orange: #ffe5d0;
    --vhs-orange: var(--bs-orange);

    /* Voting colors */
    --voting-interested-color: #0075E3;
    --voting-like-color: #78B059;
    --voting-love-color: #FFAC32;
    --voting-dislike-color: #DD2E44;
    --voting-mixed-color: #F4900D;
}

.nav-tabs a, .nav-tabs a:hover, a {
    color: var(--bs-orange);
}

.navbar-nav .nav-link:hover {
    color: var(--bs-orange);
}

.navbar-nav .nav-link.active {
    font-weight: bold;
}

.colc-badge a {
    text-decoration: none;
    color: var(--bs-white);
}

.comic-details h1 {
    color: var(--bs-orange);
}

.btn-main {
    color: var(--bs-white);
    background-color: var(--vhs-orange);
}

.btn-main:hover {
    border-color: var(--vhs-orange);
    color: var(--vhs-orange);
    background-color: none;
}

.btn-outline-main {
    border-color: var(--vhs-orange);
    color: var(--vhs-orange);
}

.main-container .btn-outline-main:hover {
    border-color: var(--vhs-orange);
    color: var(--bs-white);
    background-color: var(--vhs-orange);
}

.main-comic-card h1 a {
    text-decoration: none;
}

.progress-bar-vote {
    background-color: var(--vhs-orange);
}

.header-brand-title {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.8em;
}

.header-brand-title .title {
    font-weight: 600;
}

.header-brand-title .subtitle {
    font-weight: 300;
}

.btn-check:checked+.btn {
    color: var(--bs-white);
    background-color: var(--vhs-orange);
    border-color: var(--vhs-orange);
}

.user-display-name a {
    text-decoration: none;
    color: var(--bs-black);
}

@media (max-width: 767.98px) {
    .user-vote-list h1 { text-align: center; }
    .user-vote-list h2 { text-align: center; }
}

.inline-comic-card .badge-love { background-color: var(--voting-love-color); }
.inline-comic-card .badge-like { background-color: var(--voting-like-color); }
.inline-comic-card .badge-mixed { background-color: var(--voting-mixed-color); }
.inline-comic-card .badge-dislike { background-color: var(--voting-dislike-color); }
.inline-comic-card .badge-interested { background-color: var(--voting-interested-color); }

.votes a {
    text-decoration: none;
    color: var(--bs-black);
}

.activity-list {
    border: 1px solid var(--vhs-orange);
    border-radius: var(--bs-border-radius);
    background-color: var(--vhs-light-orange);
}

.activity-list li {
    background: none;
    font-size: 0.9em;
}

footer .links {
    width: 100%;
    text-align: center;
}

footer .links li {
    list-style-type: none;
    display: inline-block;
    padding: 0 0.5rem;
    font-size: 0.9em;
}

footer .links li a {
    text-decoration: none;
}

.voting-button {
    color: #fff;
}

.voting-button-interested, .voting-button-interested:disabled {
    background-color: var(--voting-interested-color);
}

.voting-button-interested:hover {
    border: 1px solid var(--voting-interested-color);
    color: var(--voting-interested-color);
}

.voting-button-like, .voting-button-like:disabled {
    background-color: var(--voting-like-color);
}

.voting-button-like:hover {
    border: 1px solid var(--voting-like-color);
    color: var(--voting-like-color);
}

.voting-button-love, .voting-button-love:disabled {
    background-color: var(--voting-love-color);    
}

.voting-button-love:hover {
    border: 1px solid var(--voting-love-color);
    color: var(--voting-love-color);
}

.voting-button-dislike, .voting-button-dislike:disabled {
    background-color: var(--voting-dislike-color);
}

.voting-button-dislike:hover {
    border: 1px solid var(--voting-dislike-color);
    color: var(--voting-dislike-color);
}

.voting-button-mixed, .voting-button-mixed:disabled {
    background-color: var(--voting-mixed-color);
}

.voting-button-mixed:hover {
    border: 1px solid var(--voting-mixed-color);
    color: var(--voting-mixed-color);
}

.voting-buttons .voted {
    font-weight: bold;
}

.voting-buttons button:disabled {
    border: none;
}

.action-column {
    text-align: right;
}
.delete-form {
    display: inline-block;
}

.vote-result-0 { background: linear-gradient(90deg, var(--vhs-light-orange) 0%, #ffffff 0%); }
.vote-result-1 { background: linear-gradient(90deg, var(--vhs-light-orange) 1%, #ffffff 0%); }
.vote-result-2 { background: linear-gradient(90deg, var(--vhs-light-orange) 2%, #ffffff 0%); }
.vote-result-3 { background: linear-gradient(90deg, var(--vhs-light-orange) 3%, #ffffff 0%); }
.vote-result-4 { background: linear-gradient(90deg, var(--vhs-light-orange) 4%, #ffffff 0%); }
.vote-result-5 { background: linear-gradient(90deg, var(--vhs-light-orange) 5%, #ffffff 0%); }
.vote-result-6 { background: linear-gradient(90deg, var(--vhs-light-orange) 6%, #ffffff 0%); }
.vote-result-7 { background: linear-gradient(90deg, var(--vhs-light-orange) 7%, #ffffff 0%); }
.vote-result-8 { background: linear-gradient(90deg, var(--vhs-light-orange) 8%, #ffffff 0%); }
.vote-result-9 { background: linear-gradient(90deg, var(--vhs-light-orange) 9%, #ffffff 0%); }
.vote-result-10 { background: linear-gradient(90deg, var(--vhs-light-orange) 10%, #ffffff 0%); }
.vote-result-11 { background: linear-gradient(90deg, var(--vhs-light-orange) 11%, #ffffff 0%); }
.vote-result-12 { background: linear-gradient(90deg, var(--vhs-light-orange) 12%, #ffffff 0%); }
.vote-result-13 { background: linear-gradient(90deg, var(--vhs-light-orange) 13%, #ffffff 0%); }
.vote-result-14 { background: linear-gradient(90deg, var(--vhs-light-orange) 14%, #ffffff 0%); }
.vote-result-15 { background: linear-gradient(90deg, var(--vhs-light-orange) 15%, #ffffff 0%); }
.vote-result-16 { background: linear-gradient(90deg, var(--vhs-light-orange) 16%, #ffffff 0%); }
.vote-result-17 { background: linear-gradient(90deg, var(--vhs-light-orange) 17%, #ffffff 0%); }
.vote-result-18 { background: linear-gradient(90deg, var(--vhs-light-orange) 18%, #ffffff 0%); }
.vote-result-19 { background: linear-gradient(90deg, var(--vhs-light-orange) 19%, #ffffff 0%); }
.vote-result-20 { background: linear-gradient(90deg, var(--vhs-light-orange) 20%, #ffffff 0%); }
.vote-result-21 { background: linear-gradient(90deg, var(--vhs-light-orange) 21%, #ffffff 0%); }
.vote-result-22 { background: linear-gradient(90deg, var(--vhs-light-orange) 22%, #ffffff 0%); }
.vote-result-23 { background: linear-gradient(90deg, var(--vhs-light-orange) 23%, #ffffff 0%); }
.vote-result-24 { background: linear-gradient(90deg, var(--vhs-light-orange) 24%, #ffffff 0%); }
.vote-result-25 { background: linear-gradient(90deg, var(--vhs-light-orange) 25%, #ffffff 0%); }
.vote-result-26 { background: linear-gradient(90deg, var(--vhs-light-orange) 26%, #ffffff 0%); }
.vote-result-27 { background: linear-gradient(90deg, var(--vhs-light-orange) 27%, #ffffff 0%); }
.vote-result-28 { background: linear-gradient(90deg, var(--vhs-light-orange) 28%, #ffffff 0%); }
.vote-result-29 { background: linear-gradient(90deg, var(--vhs-light-orange) 29%, #ffffff 0%); }
.vote-result-30 { background: linear-gradient(90deg, var(--vhs-light-orange) 30%, #ffffff 0%); }
.vote-result-31 { background: linear-gradient(90deg, var(--vhs-light-orange) 31%, #ffffff 0%); }
.vote-result-32 { background: linear-gradient(90deg, var(--vhs-light-orange) 32%, #ffffff 0%); }
.vote-result-33 { background: linear-gradient(90deg, var(--vhs-light-orange) 33%, #ffffff 0%); }
.vote-result-34 { background: linear-gradient(90deg, var(--vhs-light-orange) 34%, #ffffff 0%); }
.vote-result-35 { background: linear-gradient(90deg, var(--vhs-light-orange) 35%, #ffffff 0%); }
.vote-result-36 { background: linear-gradient(90deg, var(--vhs-light-orange) 36%, #ffffff 0%); }
.vote-result-37 { background: linear-gradient(90deg, var(--vhs-light-orange) 37%, #ffffff 0%); }
.vote-result-38 { background: linear-gradient(90deg, var(--vhs-light-orange) 38%, #ffffff 0%); }
.vote-result-39 { background: linear-gradient(90deg, var(--vhs-light-orange) 39%, #ffffff 0%); }
.vote-result-40 { background: linear-gradient(90deg, var(--vhs-light-orange) 40%, #ffffff 0%); }
.vote-result-41 { background: linear-gradient(90deg, var(--vhs-light-orange) 41%, #ffffff 0%); }
.vote-result-42 { background: linear-gradient(90deg, var(--vhs-light-orange) 42%, #ffffff 0%); }
.vote-result-43 { background: linear-gradient(90deg, var(--vhs-light-orange) 43%, #ffffff 0%); }
.vote-result-44 { background: linear-gradient(90deg, var(--vhs-light-orange) 44%, #ffffff 0%); }
.vote-result-45 { background: linear-gradient(90deg, var(--vhs-light-orange) 45%, #ffffff 0%); }
.vote-result-46 { background: linear-gradient(90deg, var(--vhs-light-orange) 46%, #ffffff 0%); }
.vote-result-47 { background: linear-gradient(90deg, var(--vhs-light-orange) 47%, #ffffff 0%); }
.vote-result-48 { background: linear-gradient(90deg, var(--vhs-light-orange) 48%, #ffffff 0%); }
.vote-result-49 { background: linear-gradient(90deg, var(--vhs-light-orange) 49%, #ffffff 0%); }
.vote-result-50 { background: linear-gradient(90deg, var(--vhs-light-orange) 50%, #ffffff 0%); }
.vote-result-51 { background: linear-gradient(90deg, var(--vhs-light-orange) 51%, #ffffff 0%); }
.vote-result-52 { background: linear-gradient(90deg, var(--vhs-light-orange) 52%, #ffffff 0%); }
.vote-result-53 { background: linear-gradient(90deg, var(--vhs-light-orange) 53%, #ffffff 0%); }
.vote-result-54 { background: linear-gradient(90deg, var(--vhs-light-orange) 54%, #ffffff 0%); }
.vote-result-55 { background: linear-gradient(90deg, var(--vhs-light-orange) 55%, #ffffff 0%); }
.vote-result-56 { background: linear-gradient(90deg, var(--vhs-light-orange) 56%, #ffffff 0%); }
.vote-result-57 { background: linear-gradient(90deg, var(--vhs-light-orange) 57%, #ffffff 0%); }
.vote-result-58 { background: linear-gradient(90deg, var(--vhs-light-orange) 58%, #ffffff 0%); }
.vote-result-59 { background: linear-gradient(90deg, var(--vhs-light-orange) 59%, #ffffff 0%); }
.vote-result-60 { background: linear-gradient(90deg, var(--vhs-light-orange) 60%, #ffffff 0%); }
.vote-result-61 { background: linear-gradient(90deg, var(--vhs-light-orange) 61%, #ffffff 0%); }
.vote-result-62 { background: linear-gradient(90deg, var(--vhs-light-orange) 62%, #ffffff 0%); }
.vote-result-63 { background: linear-gradient(90deg, var(--vhs-light-orange) 63%, #ffffff 0%); }
.vote-result-64 { background: linear-gradient(90deg, var(--vhs-light-orange) 64%, #ffffff 0%); }
.vote-result-65 { background: linear-gradient(90deg, var(--vhs-light-orange) 65%, #ffffff 0%); }
.vote-result-66 { background: linear-gradient(90deg, var(--vhs-light-orange) 66%, #ffffff 0%); }
.vote-result-67 { background: linear-gradient(90deg, var(--vhs-light-orange) 67%, #ffffff 0%); }
.vote-result-68 { background: linear-gradient(90deg, var(--vhs-light-orange) 68%, #ffffff 0%); }
.vote-result-69 { background: linear-gradient(90deg, var(--vhs-light-orange) 69%, #ffffff 0%); }
.vote-result-70 { background: linear-gradient(90deg, var(--vhs-light-orange) 70%, #ffffff 0%); }
.vote-result-71 { background: linear-gradient(90deg, var(--vhs-light-orange) 71%, #ffffff 0%); }
.vote-result-72 { background: linear-gradient(90deg, var(--vhs-light-orange) 72%, #ffffff 0%); }
.vote-result-73 { background: linear-gradient(90deg, var(--vhs-light-orange) 73%, #ffffff 0%); }
.vote-result-74 { background: linear-gradient(90deg, var(--vhs-light-orange) 74%, #ffffff 0%); }
.vote-result-75 { background: linear-gradient(90deg, var(--vhs-light-orange) 75%, #ffffff 0%); }
.vote-result-76 { background: linear-gradient(90deg, var(--vhs-light-orange) 76%, #ffffff 0%); }
.vote-result-77 { background: linear-gradient(90deg, var(--vhs-light-orange) 77%, #ffffff 0%); }
.vote-result-78 { background: linear-gradient(90deg, var(--vhs-light-orange) 78%, #ffffff 0%); }
.vote-result-79 { background: linear-gradient(90deg, var(--vhs-light-orange) 79%, #ffffff 0%); }
.vote-result-80 { background: linear-gradient(90deg, var(--vhs-light-orange) 80%, #ffffff 0%); }
.vote-result-81 { background: linear-gradient(90deg, var(--vhs-light-orange) 81%, #ffffff 0%); }
.vote-result-82 { background: linear-gradient(90deg, var(--vhs-light-orange) 82%, #ffffff 0%); }
.vote-result-83 { background: linear-gradient(90deg, var(--vhs-light-orange) 83%, #ffffff 0%); }
.vote-result-84 { background: linear-gradient(90deg, var(--vhs-light-orange) 84%, #ffffff 0%); }
.vote-result-85 { background: linear-gradient(90deg, var(--vhs-light-orange) 85%, #ffffff 0%); }
.vote-result-86 { background: linear-gradient(90deg, var(--vhs-light-orange) 86%, #ffffff 0%); }
.vote-result-87 { background: linear-gradient(90deg, var(--vhs-light-orange) 87%, #ffffff 0%); }
.vote-result-88 { background: linear-gradient(90deg, var(--vhs-light-orange) 88%, #ffffff 0%); }
.vote-result-89 { background: linear-gradient(90deg, var(--vhs-light-orange) 89%, #ffffff 0%); }
.vote-result-90 { background: linear-gradient(90deg, var(--vhs-light-orange) 90%, #ffffff 0%); }
.vote-result-91 { background: linear-gradient(90deg, var(--vhs-light-orange) 91%, #ffffff 0%); }
.vote-result-92 { background: linear-gradient(90deg, var(--vhs-light-orange) 92%, #ffffff 0%); }
.vote-result-93 { background: linear-gradient(90deg, var(--vhs-light-orange) 93%, #ffffff 0%); }
.vote-result-94 { background: linear-gradient(90deg, var(--vhs-light-orange) 94%, #ffffff 0%); }
.vote-result-95 { background: linear-gradient(90deg, var(--vhs-light-orange) 95%, #ffffff 0%); }
.vote-result-96 { background: linear-gradient(90deg, var(--vhs-light-orange) 96%, #ffffff 0%); }
.vote-result-97 { background: linear-gradient(90deg, var(--vhs-light-orange) 97%, #ffffff 0%); }
.vote-result-98 { background: linear-gradient(90deg, var(--vhs-light-orange) 98%, #ffffff 0%); }
.vote-result-99 { background: linear-gradient(90deg, var(--vhs-light-orange) 99%, #ffffff 0%); }
.vote-result-100 { background: linear-gradient(90deg, var(--vhs-light-orange) 100%, #ffffff 0%); }