.title-banner {
    font-size: 2em;
    color: #ff8800;
    text-shadow: 3px 3px 7px #6b391a;
    
}

.subtitle-banner {
    font-size: 1.5em;
    font-weight: 600;
    color: #ff8800;
    text-shadow: 3px 3px 7px #3a1600;
}

.two-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
}

.terminal {
    background: black !important;
    background-color: black;
    .terminal-text {
        color: #00c800;
        text-align: start;
        line-height: 0.1rem;
        margin-top: 20px;
        font-family: 'Courier New', Courier, monospaced;
    }
}

.navigation {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    
    a {
        text-decoration: none;
    }
    
    .nav-button {
        color: blacK;
        font-weight: 600;
        padding: 0 5px 5px;
        border-image: url(img/wow/border3.png);
        border-image-slice: 17% fill;
        border-width: 14px;
        border-style: solid;
        
        cursor: pointer;
    }
}

ul {
  li {
    text-align: left;    
  }
}

@font-face {
    font-family: 'Scumm-Menu';
    src: url('fonts/lucasarts-scumm-menu.otf/lucasarts-scumm-menu.otf'); /* IE9 Compat Modes */
    src: url('fonts/lucasarts-scumm-menu.otf/lucasarts-scumm-menu.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/lucasarts-scumm-menu.otf/lucasarts-scumm-menu.otf') format('otf'), /* Modern Browsers */
         url('fonts/lucasarts-scumm-menu.otf/lucasarts-scumm-menu.otf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Scumm-Solid';
    src: url('fonts/lucasarts-scumm-solid.otf/lucasarts-scumm-solid.otf'); /* IE9 Compat Modes */
    src: url('fonts/lucasarts-scumm-solid.otf/lucasarts-scumm-solid.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/lucasarts-scumm-solid.otf/lucasarts-scumm-solid.otf') format('otf'), /* Modern Browsers */
         url('fonts/lucasarts-scumm-solid.otf/lucasarts-scumm-solid.otf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Scumm-Outline';
    src: url('fonts/lucasarts-scumm-outline.otf/lucasarts-scumm-outline.otf'); /* IE9 Compat Modes */
    src: url('fonts/lucasarts-scumm-outline.otf/lucasarts-scumm-outline.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/lucasarts-scumm-outline.otf/lucasarts-scumm-outline.otf') format('otf'), /* Modern Browsers */
         url('fonts/lucasarts-scumm-outline.otf/lucasarts-scumm-outline.otf')  format('truetype'), /* Safari, Android, iOS */
}

.dialog {
    font-family: 'Scumm-Outline';
    font-size: 32px;
    color: #ff8800;
    text-align: right;
    background-color: rgba(137, 21, 177, 0.64);
    padding-right: 20px;
}

.statusbar {
    background-color: black;
    font-family: 'Scumm-Solid';
    color: #a03c9a;
    padding: 5px 0;
    height: 18px;
    
    &.active {
        color: #cb54bd;
    }
}

.scumm {
    display: grid;
    grid-template-columns: 95px 150px 95px;
    background-color: black;
    padding:10px;
    gap: 10px;
    font-family: 'Scumm-Menu';
    color: #a03c9a;
    font-size: 32px;
    margin-bottom: 30px;
    
    .verb {
        background-color: #14040f;
        margin-top: 6px;
        margin-bottom: 6px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        justify-self: center;
        
        &:hover {
            color: #cb54bd;
            cursor: pointer;
        }
        
        &.lightUp {
            color: #cb54bd;
        }
    }
}

.inventory {
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
    
    .slot {
        background-color: #14040f;
        width: 100px;
        height: 58px;
        margin-top: 11px;
        margin-left: 5px;
        margin-right: 4px;
    }
}

.buttons {
    background-color: rgba(190, 176, 243, 0.45);
    padding: 10px 0 5px;
    border-radius: 5px;
    margin: 0 15px;
}