html, body {
    font-family: mk2text;
    font-size: 1vw;
    font-kerning: none;
    letter-spacing: .1rem;
    word-spacing: .15rem;
    line-height: 1.2em;
    color: #f1f1f1;
    text-shadow: 3px 3px black;
}

h1, h2, h3, h4 {
    font-family: mk2;
    font-kerning: none;
    letter-spacing: .1rem;
    word-spacing: .25rem;
    text-shadow: 3px 3px black;
}

h1,h2 {
    color: #ffff00;
    margin-bottom: 40px;
    text-align: center;
    font-size: 3vh;
}

p {
    font-size: 1.1em;
    line-height: 1.4em;
}

a {
    color: #ffff00;
    text-decoration: none;
}

a:hover {
    color: #0a58ca;
    text-decoration: none;
}

strong {
    color: #ffff00;
}

code {
    color: #ffff00;
    font-size: 0.8vw;
    text-transform: none;
    letter-spacing: normal;
    word-spacing: normal;
    text-shadow: none;
}

button, .btn {
    background-color: #363434;
    border-color: #212121;
    color: white;
    font-size: 1.2em;
    line-height: 1.5em;
    animation: flashing 0.25s linear infinite;
}

.container-fluid, .row {
    height: 100vh !important;
    padding: 0;
}

.h-100 {
    height: 100vh !important;
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.col {
    display: flex;
    justify-content: center;
    min-width: 0.1vh;
}

@keyframes flashing {
    50% {
      color: #0a58ca;
    }
}
  
.btn:hover {
    color: #0a58ca;
}

.alert {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: mk2;
    font-size: 1.1em;
    line-height: 1.7em;
    font-kerning: none;
    text-shadow: 3px 3px black;
}

.alert-danger {
    color: #c20804;
    background-color: transparent;
    border: none;
}

.portal-orange {
    background: url(/images/orange-portal.png) no-repeat center fixed;
    background-size: cover;
    overflow: hidden;
    line-height: 1em;
}

.portal-blue {
    background: url(/images/blue-portal.png) no-repeat center fixed;
    background-size: cover;
    overflow: hidden;
    line-height: 1em;
}

.hc-presents {
    position: absolute;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: black;
    font-family: mk3;
    font-size: 36pt;
    line-height: 40pt;
    padding-top: 47vh;
    text-align: center;
    display: none;
}

.title-bg {
    position: absolute;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    background: black url(/images/hacker-kombat-logo.png) no-repeat bottom center;
    background-size: auto 96%;
    display: none;
}

.title {
    height: 10vw;
    margin-top: 40vh;
    font-family: 'Mortal Kombat Title', mktitle;
    font-size: 7vw;
    color: black;
    background: linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,165,0,1) 50%, rgba(255,255,0,1) 95%, rgba(255,255,0,1) 100%);;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.35vw transparent;
}

.title-left {
    justify-content: right;
    padding-right: 10vw;
}

.title-right {
    justify-content: left;
    padding-left: 10vw;
}

.menu-list {
    height: 70vh;
    width: 48vw;
    overflow: hidden;
    background: url(/images/menu-bg.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    padding-top: 12vh;
    padding-left: 11vw;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: left;
}

.menu-bullet {
    height: 7vh;
    width: 7vh;
    text-align: left;
    background: url(/images/spinner-fast.gif) no-repeat;
    background-size: cover;
    visibility: hidden;
    opacity: 0;
}

.menu-list-item {
    font-family: 'Mortal Kombat Title', mktitle;
    font-size: 4.5vh;
    height: 7vh;
    display: flex;
    line-height: 4.5vh;
    vertical-align: middle;
    align-content: center;
    align-items: end;
}

.menu-list-item:hover .menu-bullet {
    visibility: visible;
    opacity: 1;
}

.dialog {
    height: fit-content;
    width: fit-content;
    max-width: 60vw;
    max-height: 90vh;
    overflow: hidden;
    background: url(/images/stone-bg.png) no-repeat center;
    background-size: 100% 100%;
    display: block;
    padding: 6vh 2vw 6vh 2vw;
}

.dialog-inner {
    max-height:100%;
    max-width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0.2em 0.2em 0.2em 0.2em;
    scroll-padding: 0.2em 0.2em 0.2em 0.2em;
}

.dialog-inner table td {
    padding-right: 2em;
}

.panel-heading {
    color: #ffff00;
}

.inlayed {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgba(50, 50, 50, 0.8);
    border: 5px solid rgba(0, 0, 0, 0.5);
    border-right-color: rgba(200, 200, 200, 0.3);
    border-bottom-color: rgba(200, 200, 200, 0.3);
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow: 1px 1px black;
}

.csr-input {
    height: 20em;
    width: 34em;
    font-size: 1.6vh;
    line-height: 1.7vh;
    color: white;
    overflow: hidden;
}

.csr-input:focus {
    outline: none !important;
}

.fighter-save {
    margin-top: 60px;
    text-align: center;
}

.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
    display: none;
}

.upload-demo.ready .upload-demo-wrap {
    display: block;
}

.upload-demo.ready .upload-result {
    display: inline-block;
}

.upload-demo-wrap {
    width: 350px;
    height: 350px;
    margin: 0 auto;
}

.upload-msg {
    text-align: center;
    padding: 100px;
    font-size: 28pt;
    line-height: 32pt;
    color: #aaa;
    width: 350px;
    height: 350px;
    margin: 50px auto;
    border: 1px solid #aaa;
    cursor: pointer;
}

.cyd {
    margin-top: 20px;
    font-family: mk3;
    font-size: 30pt;
    text-align: center;
}

.ladder {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.ladder-stone {
    background: url(/images/ladder-stone.png) no-repeat;
    background-size: contain;
    height: 265px;
    width: 617px;
    gap: 0;
    margin: 0;
    flex-shrink: 0;
}

.challenge-ladder-stone {
    background: url(/images/ladder-stone.png) no-repeat center fixed;
    background-size: cover;
    height: 265px;
    width: 617px;
    border: none;
    display: flex;
    justify-content: right;
}

.ladder-base {
    background: url(/images/ladder-base.png) no-repeat;
    background-size: contain;
}

.challenge {
    height: 200px;
    width: 180px;
    margin-top: 9%;
    margin-left: 57%;
}

#challenge-ladder {
    margin-left: 50%;
}

#player {
    left: calc(50% - 180px - 100px);
    top:  calc(100vh - 200px - 120px);
}

.challenge-lc {
    width: 161px;
    height: 161px;
    margin-top: 11%;
    margin-right: 17%;
}

.fighter-frame {
    height: 200px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 40px;
    position: fixed;
    background: url(/images/fighter-frame.png);
    padding: 4px;
}

.fighter-frame img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
}

.spinner {
    position: absolute;
    height: 265px;
    width: 265px;
    vertical-align: middle;
    text-align: center;
    bottom: 0;
    font-size: 26pt;
    line-height: 28pt;
    visibility: hidden;
    color: white;
    font-family: mk3;
}

.spinner-fast {
    background: url(/images/spinner-fast.gif) no-repeat;
    background-size: contain;
    z-index: 20;
}

.spinner-slow {
    background: url(/images/spinner-slow.gif) no-repeat;
    background-size: contain;
    z-index: 10;
}

#stage-bg {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    z-index: -10;
    height: 100vh;
    width: 100vw;
    background-size: auto 100vh;
}

.strength-meter {
    position: absolute;
    top: 3.5vh;
    width: 40vw;
    height: 5vh;
    background-color: #c20804;
    border: 0.45vw outset #beabb4;
}

.strength-meter > .progress-bar {
    background-color: #00bf01;
}

#strength-meter-left {
    left: 3vw;
}

#strength-meter-right {
    right: 3vw;
}

#stage-wins {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0.3vh;
    left: 3vw;
    color: #ffff00;
    font-size: 4.5vh;
    font-family: midway;
}

#stage-timer {
    position: fixed;
    padding: 0;
    width: 20vw;
    margin: 0 0 0 -10vw;
    top: 2vh;
    left: 50vw;
    color: #c20804;
    font-size: 10vh;
    font-family: midway;
    text-align: center;
}

.stage-name {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 4.8vh;
    width: 42vw;
    color: #ffff00;
    font-family: mk2;
    font-size: 2.5vh;
    letter-spacing: normal;
    word-spacing: normal;
}

#stage-name-left {
    left: 4.5vw;
}

#stage-name-right {
    right: 4.5vw;
    text-align: right;
}

#stage-description {
    position: fixed;
    height: 50vh;
    width: 60vw;
    margin: 0 0 0 -30vw;
    padding: 25px;
    bottom: 20px;
    left: 50vw;
    background: rgba(0, 0, 0, 0.7);
    color: #cccccc;
}

.challenge-text {
    position: relative;
    height: 100%;
    width: 100%;
}

.challenge-text code {
    margin: 25px 0 25px 0;
    color: #ffff00;
    background: rgba(0, 0, 0, 0.5);
    border: 4px solid black;
    border-right-color: rgba(100, 100, 100, 0.2);
    border-bottom-color: rgba(100, 100, 100, 0.2);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-shadow: 1px 1px black;
    width: 100%;
}

.flag-form-div {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.flag-input {
    background: #000000;
    border: #333333 solid 1px;
    color: #cccccc;
    padding: 5px;
    width: 95%;
    height: 4vh;
    top: 0;

    &:focus {
        outline: none !important;
        border:  #333333 solid 1px;
        box-shadow: 0 0 10px #333333;
    }

    &::placeholder {
        color: #555555;
    }
}

.flag-submit-btn {
    background: #000000;
    border: #333333 solid 1px;
    color: #ffff00;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 4vh;
    margin: auto;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 2vh;
    font-family: mk2;
    animation: flashing-red 0.25s infinite;
}

@keyframes flashing-red {
    50% {
      color: #ff0000;
    }
}

#status {
    position: absolute;
    bottom: 5vh;
}

#stage-solved {
    position: fixed;
    top: 30vh;
    left: 50vw;
    width: 80vw;
    margin: 0 0 0 -40vw;
    font-family: mk2;
    font-size: 5vh;
    text-align: center;
    letter-spacing: normal;
    word-spacing: normal;
    animation: flashing 0.25s linear 10 normal paused;
    display: none;
}

.leaderboard {
    position: absolute;
    width: 1000px;
    left: 50vw;
    margin: 0 0 0 -500px;
    background: url(/images/stone-texture.png) repeat;
    border: 10px solid rgba(0, 0, 0, 0.4);
    border-right-color: rgba(200, 200, 200, 0.2);
    border-bottom-color: rgba(200, 200, 200, 0.2);
    padding: 25px;
}

.leaderboard h1 {
    font-size: 32pt;
    animation: flashing 0.25s linear infinite;
}

.leaderboard-row {
    position: relative;
    width: 100%;
    height: 250px;
    margin: 25px 0 25px 0;
}

.leaderboard-row > .avatar {
    position: relative;
    float: left;
    height: 200px;
    width: 180px;
    border: 4px solid rgba(0, 0, 0, 0.5);
    border-left-color: rgba(200, 200, 200, 0.3);
    border-top-color: rgba(200, 200, 200, 0.3);
    top: 50%;
    margin-top: -100px;
    margin-right: 25px;
}

.leaderboard-row > .team-name {
    position: relative;
    float: left;
    height: 200px; 
    top: 50%;
    margin: -100px 25px 15px 25px;
    font-family: mk2;
    font-size: 18pt;
    line-height: 36pt;
    color: #ffff00;
    vertical-align: middle;
    letter-spacing: normal;
    word-spacing: normal;
}

.leaderboard-row > .points {
    position: relative;
    float: left;
    margin: 15px;
}

.leaderboard-row > .levels {
    position: relative;
    float: left;
}

.leaderboard-row > .levels img {
    margin-right: 25px;
}

.chat-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    color: #cccccc;        
}

.chat-pane {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
}

.chat-blurb {
    display: flex;
    margin-bottom: 15px;
    padding: 10px;
    max-width: 45%;
}

.chat-blurb pre {
    white-space: pre-wrap; /* Ensure pre tags wrap text */
    word-wrap: break-word; /* Break long words */
    font-family: mk2text;
    overflow: hidden;
    margin: 0;
    padding: 15px;
    background: #FDDA0D;
    color: black;
    border: 2px black solid;
    border-radius: 20px;
    text-shadow: none;
}

.chat-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 10px;
    background: black;
    border: 2px solid #FDDA0D;
}

.input-pane {
    display: flex;
    padding: 10px;
}

#user-input {
    flex-grow: 1;
    border-radius: 4px;
    resize: none;
    background: #000000;
    border: #333333 solid 1px;
    color: #cccccc;
    padding: 5px;

    &:focus {
        outline: none !important;
        border:  #fdda00 solid 1px;
        box-shadow: 0 0 10px #333333;
    }

    &::placeholder {
        color: #555555;
    }

}

#send-button {
    padding: 10px 20px;
    background-color: #FDDA0D;
    color: black;
    border: none;
    cursor: pointer;
    animation: none;
}

#send-button:hover {
    background-color: black;
    color: #FDDA0D;
}

.user-message {
    justify-content: flex-end;
    align-items: self-end;
    margin-left: 55%;
}

.assistant-message {
    justify-content: flex-start;
    align-items: self-end;
    margin-right: 55%;
}

.card {
    background-color: transparent;
    border: none;
}

.nav-tabs {
    border-bottom: none;
}

.tab-pane {
    border: 10px solid rgba(0, 0, 0, 0.4);
    border-right-color: rgba(200, 200, 200, 0.2);
    border-bottom-color: rgba(200, 200, 200, 0.2);
    padding: 25px;
}

.mt-3 {
    margin-top: 0 !important;
}

.nav-tabs .nav-link {
    background-color: #333333;
    border: 5px solid rgba(0, 0, 0, 0.5);
    border-left-color: rgba(200, 200, 200, 0.3);
    border-top-color: rgba(200, 200, 200, 0.3);
    text-shadow: 1px 1px black;
    width: 140px;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    text-shadow: 1px 1px black;
    border: 5px solid rgba(0, 0, 0, 0.5);
    border-left-color: rgba(200, 200, 200, 0.3);
    border-top-color: rgba(200, 200, 200, 0.3);
    width: 140px;
}

.form-control {
    background-color: rgba(50, 50, 50, 0.8);
    border: 5px solid rgba(0, 0, 0, 0.5);
    border-right-color: rgba(200, 200, 200, 0.3);
    border-bottom-color: rgba(200, 200, 200, 0.3);
    text-shadow: 1px 1px black;
    color: white;

    &:focus {
            background-color: rgba(50, 50, 50, 0.8);
            border: 5px solid yellow;
            color: white;
            box-shadow: 0 0 10px #333333;
    }
}

.admin-table {
    width: 100%;
    word-wrap: break-word;
}
.admin-table > th, td {
    vertical-align: middle;
    text-align: left;
}
.admin-table > img {
    max-width: 100px;
    max-height: 100px;
}