/* color scheme
text: #EAE8FF
background: #00120B
faded: #D8D5DB 
accent: #3056C9
*/

:root {
    --background: #151515; 
    --text: #EAE8FF; 
    --faded: #aba7af; 
    --accent: #5072d6; 
}

* {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--background); 
  color: var(--text); 
}

#title {
    color: var(--accent); 
}

*, *::before, *::after {
    box-sizing: border-box; 
}

main {
    display: flex; 
    flex-direction: row;
    gap: 10px; 
    width: 100vw; 
    height: 50%; 
}

h1 {
    margin-bottom: 0px; 
}

html {
    height: 100%;
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
}

header {
    height: 10%; 
}

#sidebar {
    flex: 3; 
}

#main-content {
    flex: 7; 
}

#sidebar, #main-content {
    min-width: 0; 
    overflow: hidden; 
}

.extra-info {
    color: var(--faded); 
    font-size: small; 
    margin-top: 5px; 
    margin-bottom: 0px; 
}

.large {
    margin-top: 0; 
    font-size: medium; 
}

#stats {
    font-size: small; 
}

#stats span {
    margin-right: 15px; 
}

h3 {
    margin-bottom: 0px; 
}

#health {
    color: rgb(159, 78, 78); 
}

#mana {
    color: rgb(92, 133, 151); 
}

#gold {
    color: rgb(154, 142, 76); 
}

input {
    border: none; 
    border-bottom: 2px solid white; 
    color: white; 
}

input:focus {
    border: none; 
    outline: none; 
    animation: animation 2s infinite steps(2, end); 
}

@keyframes animation {
    0% { border-bottom: 2px solid transparent; }
    100% { border-bottom: 2px solid white; }
}

.Hint {
    color: rgb(228, 201, 51) !important; 
}

.Instruction {
    color: grey; 
    font-size: small; 
}

#story {
    max-height: 400px; 
    overflow-y: auto; 
    scroll-behavior: smooth; 
}

.Warning {
    color: red; 
}

.Info {
    color: rgb(106, 106, 193); 
}