* {
  font-family: "Trebuchet MS", sans-serif;
}

body {
  background-color: #3C5233;
}

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 clip-path: inset(50%);
 white-space: nowrap;
}

header {
  display: flex;
  justify-content: space-between;
}

#startScreen {
  max-width: 25vw;
  max-height: 90vh;
  background-color: #1E2A22;
  color: #EAE7C6;
  margin: 10em auto;
  padding: 10px;
}

#game {
  display: none;
  max-width: 25vw;
  max-height: 75vh;
  background-color: #1E2A22;
  color: #EAE7C6;
  margin: 10em auto;
  padding: 10px;
}

#game:focus {
  outline: none;
}


#title {
  text-align: center;
  font-size: 2em;
  font-style: italic;
  color: #EAE7C6;
}


#logo {
  box-sizing: border-box;
  width: 80%;
  height: auto;
  display: block;
  margin: 0.5em auto;
}

#startText {
  box-sizing: border-box;
  width: 80%;
  height: auto;
  margin: 0.5em auto;
  background-color: #1E2A22;
  color: #EAE7C6;
  padding: 0.5em;
}

#text {
  background-color: #1E2A22;
  color: #EAE7C6;
  padding: 1em;
}

#buttonStart {
 margin: 1em auto;
 display: block;
}

#locationImage {
  width: 80%;
  height: auto;
  display: block;
  margin: 2em auto;
}

#bag {
  display: block;
  width: auto;
  height: 2em;
  padding: 0;
  margin: auto;
}

.bag {
  padding: 0;
}

.inventimage {
  width: auto;
  height: 2em;
  display: inline;
  margin: 0 auto;
  padding: 0;
  vertical-align: middle;
}

#coin {
  width: auto;
  height: 1.5em;
  display: inline;
  margin: 0 0.5em 0 0;
  padding: 0;
  vertical-align: middle
}

#healthVial {
  width: auto;
  height: 1.5em;
  display: inline;
  margin: 0;
  padding-right: 0.25em;
  vertical-align: middle
}

#xp {
  width: auto;
  height: 1.5em;
  display: inline;
  margin: 0 0.5em 0 0;
  padding: 0;
  vertical-align: middle
}


#controls,
#stats {
  padding: 0.5em;
  background-color: #EAE7C6;
  color: #1E2A22;
  display: flex;
  justify-content: space-around;
}

#inventory {
  padding: 0.5em;
  background-color: #BF9972;
  display: flex;
  align-items: center;
  border-bottom: #0F1C14 solid 1px;
}

.bag-container {
  display: inline-block;
  width: 15%;
  background-color: #3C5233;
  padding: 0;
}

.bag {
  display: block;
}

.item-container {
  width: 85%;
  display: inline-block;
  width: 75%;
}

.items {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-left: 2em;
}


#item1, 
#item2, 
#item3, 
#item4 {
  display: inline-block;
  vertical-align: middle;
}

#creatureStats {
  display: none;
  border: 1px solid #0F1C14;
  padding: 5px;
  color: #EAE7C6;
  background-color: #642e2e;
}

.stat {
  padding-right: 10px;
}

button {
  color: #1E2A22;
  background-color: #EAE7C6;
  border: 2px solid #0F1C14;
  padding: 2px;
}

button:focus {
  background-color: #1E2A22;
  color: #EAE7C6;
  border: 2px solid #EAE7C6;
  outline: 2px solid #1E2A22;
}

audio:focus {
  outline: 2px solid #EAE7C6;
  outline-offset: 4px;
}

@media (max-width: 1200px) {
#startScreen {
  max-width: 80vw;
  max-height: 100%;
}

#game {
  display: none;
  max-width: 80vw;
  max-height: 100%;
}
}

@media (max-height: 800px) {
#startScreen {
  max-width: 80vw;
  max-height: 100%;
}

#game {
  display: none;
  max-width: 80vw;
  max-height: 100%;
}
}