:root {
    --hexagon-primary: white;
    --hexagon-secondary: #0000005c;
    --hexagon-secondary: black;
}

summary {
    background-color: var(--hexagon-primary);
    font-size: 1cqi;
    padding-left: 3px;
}

.hexagon-block hr {
    border: 0.1cqi solid var(--hexagon-primary);
    margin: 0;
}
.hexagon-block button {
    padding: 0;
    margin: 0;
    box-shadow: unset;
    display: unset;
    border: none;
    background-color: transparent;
    font-family: 'OpenSquare';
    color: var(--hexagon-tertiary);
    width: 90%;
}

.hexagon-block {
    width: 80vw;
    position: relative;
    aspect-ratio: 16/9;
    display: inline-grid;
    color: var(--hexagon-primary);
    text-shadow: -1px -1px 0 var(--hexagon-secondary), 1px -1px 0 var(--hexagon-secondary), -1px 1px 0 var(--hexagon-secondary), 1px 1px 0 var(--hexagon-secondary);
}
.hexagon-video, .hexagon-bg {
    width: -webkit-fill-available;
    aspect-ratio: 16/9;
    cursor: pointer;
}
.hexagon-video, .hexagon-bg, .hexagon-view-left, .hexagon-view-right {
    position: absolute;
    top: 0%;
}
.hexagon-video {
    z-index: 1;
}

.hexagon-view-left, .hexagon-view-right {
    overflow-y: scroll;
    width: 30%;
}
.hexagon-view-left {
    border-right: 2px solid var(--hexagon-primary);
    background: var(--hexagon-secondary);
    height: 100%;
}
.hexagon-view-right {
    justify-self: flex-end ;
    overflow: visible;
}

.level-name, .level-text, .level-lbl, .level-lbl-sm, .pack-name {
    font-family: 'OpenSquare';
    margin: 0;
    text-transform: uppercase;
    padding-left: 0.3cqi;
}
.level-name {
    font-weight: bold;
    padding-bottom: 0;
    font-size: 1.5cqi;
}
.level-text {
    font-weight: normal;
    font-size: 0.8cqi;
}
.level-details:hover {
    background-color: var(--hexagon-primary);
    cursor: pointer;
}
.level-details {
    border-top: .25cqi solid var(--hexagon-primary);
    background-color: var(--hexagon-tertiary);
    border-left: .25cqi solid var(--hexagon-primary);
    border-bottom: .25cqi solid var(--hexagon-primary);
}
.pack-name {
    text-align: center;
    color: var(--hexagon-tertiary);
    text-shadow: -1px -1px 0 var(--hexagon-primary), 1px -1px 0 var(--hexagon-primary), -1px 1px 0 var(--hexagon-primary), 1px 1px 0 var(--hexagon-primary);
    padding: 0;
}
.pack-name p {
    text-align: left;
    text-shadow: none;
    color: var(--hexagon-primary);
    filter: brightness(90%);
}
.level-lbl {
    font-size: 1cqi;
    padding-top: 0.25cqi;
    display: block;
}
.level-lbl-sm {
    font-size: 0.8cqi;
}

.difficulty-btn {
    display: flex;
    cursor: pointer;
    font-size: 1.25cqi;
    padding-bottom: 0.2cqi;
}
.difficulty-btn:hover {
    background: #aaaaaa5e;
}

.force-row {
    height: 1.8%;
}
.final, #achieved-on{
    margin-bottom: .5cqi;
}

.selected {
    left: -15%;
    width: 115%;
    top: unset;
    position: relative;
}

::-webkit-progress-bar{
    background-color: var(--hexagon-primary);
}


#level-desc {
min-height: 10%;
max-height: 10%;
overflow: clip;
}
#level-diff {
font-size: 1cqi;
width: 5cqi;
text-align: center;
padding-top: 0.25cqi;
}
#personal-best, #previous-best {
font-size: 1cqi;
}

@font-face {
    font-family: 'OpenSquare';
    src: url('../assets/hexagonviewer/OpenSquare-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSquare';
    src: url('../assets/hexagonviewer/OpenSquare-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}