@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Fuzzy+Bubbles:wght@400;700&family=Quicksand:wght@300..700&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
}

body {
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position:absolute;
    overflow-x:hidden;
    background-color: #161616;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100vw;
}

.characterContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 95vw;
    min-width: 50vw;
    padding: 4vw;
}

.characterContainer>h1 {
    font-size: 200%;
    color: #fff;
    margin-bottom: 2vh;
    letter-spacing: 0.4em;
    min-width: 289.28px;
}

.filters {
    display: flex;
    column-gap: 5px;
    width: 70px;
    justify-content: center;
    flex-wrap: nowrap;
    padding-bottom: 1vh;
    color:transparent
}

p {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    text-align: center;
}

.filters button {
    font-size: 0.70em;
    width: 70px;
    border-radius: 10px;
    border: none;
    background-color: #00000000;
    background-image: linear-gradient(100deg, #49494956, #ecececd8 170%);
    color: #000;
    transition: background-color 0.3s linear, color 0.3s linear;
    cursor:pointer
}

.filters button.pressed {
    font-size: 0.70em;
    width: 70px;
    border-radius: 10px;
    border: none;
    background-color: #00000000;
    background-image: linear-gradient(100deg, #00000000, #726b6bba 170%);
    color: #fff;
    transition: background-color 0.3s linear, color 0.3s linear;
    cursor:pointer
}

.filters input,
select {
    font-size: 0.70em;
    padding-left: 10px;
    max-height: 16.8px;
    max-width: 70px;
    border-radius: 10px;
    border: none;
    background-color: #726b6b83;
    outline: none;
}

.characters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.521vw;
    justify-content: center;
    color:#ccc;
    font-size: 0.875rem;
    line-height: 0.8;
}

.character {
    border: 1px solid rgba(99, 99, 99, 0.2);
    padding: 5px;
    border-radius: 10px;
    background-color: #312e2e4d;
    text-align: center;
}

.character img {
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 0.5vh;
    border-radius: 5px;
}

.attribution {
    color: #fff;
    text-decoration: underline;
    margin-right: -10.5vw;
    margin-top: -3vh;
    padding-bottom: 1vw;
    font-size: 100%;
}

a:any-link {
    color: #fff;
    text-decoration: underline;
    font-family: "Caveat", cursive;
    letter-spacing: 0.05em;
}

.custom-popover {
    --bs-popover-body-color: #fff;
    --bs-popover-header-color: #fff;
    --bs-popover-header-bg: #312e2e;
    --bs-popover-bg: #312e2e;
    

    /* List of supported variables:
    --bs-popover-zindex:
    --bs-popover-max-width:
    --bs-popover-font-size:
    --bs-popover-bg:
    --bs-popover-border-width:
    --bs-popover-border-color:
    --bs-popover-border-radius:
    --bs-popover-inner-border-radius:
    --bs-popover-box-shadow:
    --bs-popover-header-padding-x:
    --bs-popover-header-padding-y:
    --bs-popover-header-font-size:
    --bs-popover-header-color:
    --bs-popover-header-bg:
    --bs-popover-body-padding-x:
    --bs-popover-body-padding-y:
    --bs-popover-body-color:
    --bs-popover-arrow-width:
    --bs-popover-arrow-height:
    --bs-popover-arrow-border:
    */
}

.custom-popover .quote {
    font-family: "Fuzzy Bubbles", sans-serif;
    letter-spacing: 0.1em;
    line-height: 0.1em;
    font-weight: 100;
    font-size: 0.813rem;
    text-align: center;
}