:root {
    --icon-font: "Material Symbols Outlined";
    --base-text-color: white;
    --text-shadow-color: black;
    --text-shadow: 2px 2px var(--text-shadow-color), -2px -2px var(--text-shadow-color), 2px -2px var(--text-shadow-color), -2px 2px var(--text-shadow-color), 0 2px var(--text-shadow-color), 0 -2px var(--text-shadow-color), 2px 0 var(--text-shadow-color), -2px 0 var(--text-shadow-color);
    --button-shadow: 10px 10px #000000AA;
    --banner-shadow: 0 10px #000000AA;
    --colorBG: linear-gradient(45deg, rgb(96, 156, 196),rgb(96, 156, 196), rgb(119, 62, 151), rgb(167, 51, 90));
}

body {
    font-family: "Overlock", "Trebuchet MS", "Helvetica", "Arial", "sans-serif"; 
}

.base-button {
    font-variant: small-caps;
    font-weight: 800;
    font-size: 50px;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    background-image: url(./ui/base-button.png);
    background-color: transparent;
    box-shadow: var(--button-shadow);
}
.base-button:hover {
    background-position-y: -80px;
}

.main-hud-bg {
    background: url(./ui/base-button.png);
    background-position-y: -380px;
    background-color: #000000AA;
    box-shadow: var(--banner-shadow)
}

.main-hud-button {
    font-weight: 500;
    background: none;
    box-shadow: none;
}
.main-hud-button:hover {
    background: linear-gradient(62deg, #bcfff39c, #ff116b17);
}

.icon-button {
    font-family: var(--icon-font);
}

.pc-status {
    font-family: "Overlock", "Trebuchet MS", "Material Symbols Outlined", "Helvetica", "Arial", "sans-serif"; 
    background: none;
    text-shadow: var(--text-shadow);
    font-weight: 600;
    padding: 10px;
}

.button-description {
    font-family: "Overlock", "Trebuchet MS", "Helvetica", "Arial", "sans-serif"; 
    font-weight: 800;
    font-size: 35px;
    text-align: right;
    padding-right: 20px;
    right: 0;
    width: 250px;
}

.dialogue-box {
    background-color: transparent;
    bottom: 0px;
    height: 320px;
    width: 990px;
    background-repeat: no-repeat;
    right: 80px;
    left: auto;
}

.narrator .dialogue-box,
.cheddar_t .dialogue-box,
.cheddar .dialogue-box {
    left: 80px;
    right: auto;
}

.bj-game-text::before,
.dialogue-box::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./ui/dialogue.png);
    opacity: .7;
}

.bj-game-text,
.dialogue-box .dialogue-text {
    left: 105px;
    top: 80px;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    font-size: 40px;
    font-weight: 700;
    width: 670px;
    height: 200px;
}

/* .narrator .dialogue-box .dialogue-text, */
.cheddar_t .dialogue-box .dialogue-text,
.cheddar .dialogue-box .dialogue-text {
    left: 220px;
}

.narrator .dialogue-text {
    left: 90px;
    width: 800px;
}

.cheddar_t .dialogue-text {
  font-style: italic;
}
.dialogue-layer.cheddar_t .dialogue-text::before {
    content: "«";
}
.dialogue-layer.cheddar_t .dialogue-text::after {
    content: "»";
}

.dialogue-layer.wait-for-click::after {
    font-family: var(--icon-font);
    content: "\e0b7";
    background: #c37017;
    color: #412603;
    padding: 3px 15px 0 15px;
    font-size: 33px;
    border-radius: 10px;
    border: 4px solid #412603;
    right: 970px;
    animation: pulse 2s infinite alternate;
}

.narrator.dialogue-layer.wait-for-click::after,
.cheddar_t.dialogue-layer.wait-for-click::after,
.cheddar.dialogue-layer.wait-for-click::after {
    right: 870px;
}

.portrait-body {
    position: absolute;
    bottom: 0;
    z-index: 110;
    left: 0;
    right: 0;
    left: auto;
}

.cheddar_t .portrait-body,
.cheddar .portrait-body {
    right: auto;
    left: 0;
}

.portrait-picture {
    width: 310px;
    height: 384px;
    background-repeat: no-repeat;
}

.portrait-name-body {
    text-shadow: var(--text-shadow);
    left: auto;
    right: 0;
    bottom: 0;
    font-style: italic;
    font-weight: 700;
    width: 270;
    text-align: center;
}
.cheddar_t .portrait-name-body,
.cheddar .portrait-name-body {
    left: 0;
    right: auto;
}


.option-body {
    top: auto;
    bottom: 0;
    left: 900px;
    width: 1020px;
    background-color: transparent;
    background-image: url(./ui/big-panel.png);
}
.option-body ul {
    padding: 20px 30px 0 30px;
}
.option-body li {
    margin: 20px 0;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    font-size: 40px;
    font-weight: 700;
    background-image: url(./ui/base-button.png);
    background-color: transparent;
    background-position-y: -160px;
    box-shadow: var(--button-shadow);
    
}
.option-body li:hover {
    background-position-y: -250px;
}

.item-title {
    font-variant: small-caps;
    font-weight: 800;
    font-size: 50px;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    background: transparent;

}

.base-inventory {
    position: absolute;
    background-image: url(./ui/big-panel.png);
    background-position-x: -320px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px 0;
}

.base-inventory-item {
    cursor: pointer;   
    background-image: url(./ui/base-button.png);
    background-position: -280px -160px;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    font-size: 40px;
    font-weight: 700;
    padding: 20px 80px;
    margin-top: 20px;
}
.base-inventory-item:hover {
    background-position-y: -250px;
}

.location-inventory {
    background: linear-gradient(45deg, #51b5d5, #a7335a);
    border-top: 4px solid white;
    padding: 15px;
}
.location-inventory .base-inventory-item {
    background: transparent;
    margin-top: 0;
    display: inline-block;
    padding: 15px 10px 15px 80px;
}

.location-inventory .base-inventory-item:hover {
    background: rgb(51,161,195);
}

.inline-text-icon {
    display: inline-block;
    height: 40px;
    width: 40px;
    vertical-align: text-bottom;
    margin: 4px 8px;
    background: transparent;
    background-image: url(./ui/icons.png);
}

/* SAVE */

.gallery-title {
    font-size: 60px;
    font-weight: 700;
    padding: 20px 40px;
    color: var(--base-text-color);
    text-shadow: var(--text-shadow);
    background-color: transparent;
}

.gallery-title.banner {
    background-image: url(./ui/base-button.png);
    background-position-y: -340px;
    box-shadow: var(--banner-shadow);
}

.save-screen-container {
    background: var(--colorBG);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 500;
}
.save-slot-room::before {
    display: none !important;
}

.slot-group .inline-text-icon {
    margin: 4px 0;
}
.slot-group {
    text-align: right;
}

.base-deleteSlot,
.base-deleteSlot.empty-slot,
.base-saveSlot,
.base-loadSlot.empty-slot,
.base-loadSlot {
    border: 3px white solid;
    padding: 10px;
    box-shadow: var(--button-shadow);
}
.base-deleteSlot *,
.base-saveSlot *,
.base-loadSlot * {
    cursor: pointer;
}
.base-saveSlot.empty-slot {
    background: linear-gradient(45deg, #59ef7245, #7e44bfad);
}

.base-deleteSlot.empty-slot,
.base-loadSlot.empty-slot {
    cursor: default;
    background: linear-gradient(335deg, #1c1c1c, #656565);
}
.base-deleteSlot.empty-slot *,
.base-loadSlot.empty-slot * {
    cursor: default;
}

.save-time-stamp {
    border-bottom: 3px white solid;
    margin-bottom: 10px;
}

/* BJ */
.bj-status-info {
    height: 110px;
    background: url(./ui/base-button.png);
    background-position-y: -340px;
}

.bj-game-text {
    position: absolute;
    z-index: 10;
    padding: 20px 70px;
    left: 970px;
    top: 50px;
    height: 300px;
    width: 950px;
    white-space: break-spaces;
}
.bj-game-text::before {
    left: -10px;
    top: -70px;
    z-index: -1;
}

.bj-game-layer.wait-for-click::after {
    bottom: 825px;
    right: 41px;
}

.bj-status-info .gag-label,
.bj-status-info .blow-label,
.bj-status-info .oxygen-label,
.bj-status-info .time-label {
    position: absolute;
    text-align: right;
    width: 250px;
    padding-right: 20px;
    font-size: 35px;
    font-weight: 700;
    text-shadow: var(--text-shadow);
}
.bj-status-info .blow-label {
    top: 50px;
    left: 20px;
}
.bj-status-info .oxygen-label {
    top: 5px;
    left: 970px;
}
.bj-status-info .time-label {
    top: 5px;
    left: 20px;
}
.bj-status-info .gag-label {
    top: 50px;
    left: 970px;
}

.base-progressBar.mc-libido,
.bj-status-info .gag-meter,
.bj-status-info .blow-meter,
.bj-status-info .oxygen-meter,
.bj-status-info .timer-meter {
    position: absolute;
    width: 650px;
    height: 32px;
    background: url(./ui/base-button.png);
    background-position: -400px -32px;
}

.base-progressBar.mc-libido::before,
.bj-status-info .gag-meter::before,
.bj-status-info .blow-meter::before,
.bj-status-info .oxygen-meter::before,
.bj-status-info .timer-meter::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(./ui/base-button.png);
    background-position: -400px 0;
    z-index: 1;
}

.bj-status-info .oxygen-meter {
    left: 1220px;
    top: 15px;
}
.bj-status-info .blow-meter {
    left: 270px;
    top: 60px;
}
.bj-status-info .timer-meter {
    left: 270px;
    top: 15px;
}

.bj-status-info .gag-meter {
    top: 60px;
    left: 1220px;
}

.base-progressBar.mc-libido .value,
.bj-status-info .gag-meter .value,
.bj-status-info .blow-meter .value,
.bj-status-info .oxygen-meter .value,
.bj-status-info .timer-meter .value {
    position: absolute;
    height: 100%;
}

.base-progressBar .progress-description {
    font-size: 24px;
    font-weight: 700;
    padding: 1px 20px;
    text-shadow: var(--text-shadow);
}

.base-progressBar.mc-libido .progressBar-progress,
.bj-status-info .blow-meter .value {
    left: 0;
    background: url(./ui/base-button.png);
    background-position: -400px -96px;
}

.bj-status-info .oxygen-meter .value {
    left: 0;
    background: url(./ui/base-button.png);
    background-position: -400px -64px;
}

.bj-status-info .timer-meter .value {
    right: 0;
    background: url(./ui/base-button.png);
    background-position: -1050px -32px;
}

.bj-status-info .gag-meter .value {
    left: 0;
    background: url(./ui/base-button.png);
    background-position: -1050px 0;
}

/* Frames */
@keyframes pulse {
 from {opacity: 1} 
 to {opacity: 0.3;}
}