.background {
    margin: 0;
    background-color: #282c2f;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.main {
    width: 100vw;
}

.flex-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.big-text {
    color: #bababa;
    font: calc(30px + 10vw) "SansusWebissimoRegular";
}

.heading {
    color: #bababa;
    font: calc(6px + 2vh + 1vw) "SansusWebissimoRegular";
}

.build-name-container {
    margin-bottom: -40px;
    height: 35px;
}

.text {
    color: #bababa;
    font: calc(3px + 1vh + 0.5vw) "SansusWebissimoRegular";
}

.main-icon {
    height: calc(1em - 7px);
    width: auto;
}

.no-vertical-margin {
    margin-top: 0;
    margin-bottom: 0;
}

.small-text {
    color: #bababa;
    font: calc(3px + 0.5vh + 0.25vw) "SansusWebissimoRegular";
}

.button {
    border: none;
    padding: 0.8vh 1.4vw;
    border-radius: 40px;
    color: #bababa;
    font: calc(20px + 0.5vw + 1vh) "SansusWebissimoRegular";
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}

.button,
.button:active {
    background-color: darkgreen;
}

.button:hover {
    background-color: green;
}

.button:focus {
    outline: 0;
}

.build-buttons-container button {
    margin-left: 10px;
    margin-right: 10px;
}

.searchbox {
    border: none;
    padding: 0.4vh 1.4vw;
    border-radius: 40px;
    color: #282c2f;
    font: calc(15px + 0.25vw + 0.5vh) "SansusWebissimoRegular";
    transition: all 0.2s ease-in-out;
    cursor: text;
    text-decoration: none;
    text-align: center;
}

.flex-break {
    height: 0;
    flex-basis: 100%;
}

.link {
    cursor: pointer;
}

.container {
    height: 30vh;
    min-height: 250px;
}

.portrait {
    height: 180px;
    width: 180px;
}

.perk-shelf,
.talent-shelf {
    display: flex;
    width: 500px;
    height: auto;
    justify-content: space-between;
}

.talent-shelf {
    align-items: start;
}

.item-shelf {
    display: flex;
    margin-left: 80px;
    width: 300px;
    justify-content: space-between;
}

.perk {
    height: 100px;
    width: 100px;
}

.talent-shelf img {
    height: 64px;
    width: 64px;
    position: relative;
}

.item {
    height: 96px;
    width: 96px;
}

.addon {
    height: 64px;
    width: 64px;
}

#menu-button,
#back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    opacity: 0.7;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    z-index: 2;
}

#menu-button {
    background-image: url("/images/dbd/menu.png");
}

#back-button {
    background-image: url("/images/dbd/back.png");
    opacity: 1;
}

#menu-button:hover,
#back-button:hover {
    filter: contrast(175%) brightness(125%);
}

#menu-container {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(27, 29, 31, 0.6);
    width: 60vw;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    display: none;
}

.dbd-selection {
    width: 100px;
    height: 100px;
    margin: 5px;
}

.hots-selection {
    width: 61px;
    height: 61px;
    margin: 5px;
}

.dbd-selection:hover,
.hots-selection:hover {
    filter: brightness(125%);
}

.not-available,
.not-selected,
.bad {
    filter: grayscale(100%);
}

.questionable {
    filter: grayscale(35%);
}

.good {
    box-sizing: border-box;
    border: 2px solid green;
}

.not-available:hover {
    filter: grayscale(100%) brightness(150%);
}

.selected {
    box-shadow: 0 0 20px 10px #1968d9;
}

.barely-visible {
    opacity: 10%;
}

.sign-in {
    margin-right: 50px;
    margin-left: auto;
    align-items: end;
    justify-content: end;
}

.copy-all-builds {
    margin-left: 50px;
    margin-right: auto;
    align-items: start;
    justify-content: start;
}

.clickable {
    cursor: pointer;
}

.hero-shelf {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MSIgaGVpZ2h0PSI3MSI+PHJlY3QgZmlsbD0iIzY2NjY2NiIgd2lkdGg9IjYxIiBoZWlnaHQ9IjYxIiB4PSI1IiB5PSI1IiAvPjwvc3ZnPg==");
    background-repeat: round;
}

.talent-container {
    width: 64px;
    flex-wrap: wrap;
}

.extra-talents {
    width: 64px;
    flex-wrap: wrap;
}

.extra-talents div {
    height: 28px;
    width: 28px;
    margin: 2px;
    position: relative;
}

.extra-talent-wrapper img {
    height: 28px;
    width: 28px;
}

.extra-talent-wrapper::after {
    content: "?";
    font-size: 20px;
    color: orange;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    pointer-events: none;
}