@font-face {
  font-family: Mercy;
  src: url(fonts/MERCY.otf);
}

@font-face {
  font-family: 'DeterminationDialogue';
  src: url('fonts/DeterminationMonoWeb.woff');
}

body {
  background-color: black;
  font-family: Garamond, serif;
  margin: 0.5rem 1rem;
}

.navbar {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.key {
  position: sticky;
  top: 8vh;
  /* border: 1px solid #e58602; */
  /* background-color: black; */
}

.key ul {
  position: absolute;
  transform: translate(82vw, -8vh);
  list-style-type: none;
  text-align: right;
  /* line-height: 1rem; */
}

.key li {
  text-align: center;
  line-height: 1.6rem;
  font-size: .85rem;
}

.key li.alt-speaker-one {
  border: 0.125rem solid blue;
  background-color: black;
}

/* NOTE: any additions to key should go immediately after the speaker <li> or styles will be misalligned */

/* Header decoration */
.key li:nth-child(1) {
  font-size: 1.15rem;
  padding-right: 0.25rem;
  padding-bottom: 0.25rem;
  background-color: none;
  text-align: right;
}

/* Speaker decoration */
.key li:nth-child(2) {
  border: 0.125rem solid white;
  background-color: black;
}

/* Phase scene decoration */
.key li:nth-last-child(2) {
  border: 0.125rem solid #e502b0;
  background-color: black;
}

/* Alternate scene decoration */
.key li:nth-last-child(1) {
  border: 0.125rem solid #e58602;
  background-color: black;
}

.key li.flowey-scenes {
  border: 0.125rem solid white !important;
  background-color: black;
}
.key li.asriel-scenes {
  border: 0.125rem solid white !important;
  background-color: black;
}
.key li.lab-scenes {
  border: 0.125rem solid white !important;
  background-color: black;
}
/* Index page */
.game-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 0.25rem white solid; */
}

.character-box {
  image-rendering: pixelated;
  margin-top: 20vh;
  margin-bottom: 4vh;
  width: 70vw;
  height: 40vh;
  /* border: 1px solid orange; */
  background-image: url('images/undertale-logo-full.gif');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

.character-box:has(+ .index-nav:hover a.about-button:hover) {
  background-image: url('images/pixel-foot-stomping.gif');
  background-size: 25%;
  background-position: center;
}
.character-box:has(+ .index-nav:hover a.research-button:hover) {
  background-image: url('images/sans.gif');
  background-size: 40%;
  background-position: center;
}


.character-box:has(+ .index-nav:hover a.sources-button:hover) {
  background-image: url('images/dog.gif');
  background-size: 20%;
  background-position: center;
}


/* .gif {
  image-rendering: pixelated;
  margin-top: 20vh;
  margin-bottom: 2vh;
  width: 70vw;
  /* border: 0.25rem white solid;} */

.index-nav {
  width: 80vw;
  height: 15vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 5vh;
  /* border: #006B4D 1px solid; */
}

.index-nav a {
  text-decoration: none;
  border: 0.25rem solid #e58602;
  padding: 0 0.5rem;
  font-family: Mercy;
  font-size: 2rem;
  font-weight: bold;
}

.index-nav a:hover {
  color: #FFFF00;
  border-color: #FFFF00;
}

/* ---- */

.battleSelection {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 0.5rem;
}

a {
  color: #e58602;
  font-weight: bold;
  transition: .2s;
}

a:hover {
  color: white;
}

h1 {
  color: white;
  margin-bottom: 0.125rem;
  font-family: DeterminationDialogue;
}

h2 {
  color: white; 
  font-size: 1.25rem;
}

h3 {
  color: white;
  font-size: 1.15rem;
}

p {
   color: white;
}

li {
    color: white;
    font-size: 1.25rem;
}

img{
 width: 40%
}

img#FriskFlowers
{
    width: 30%;
}
div.flex
{
    display: flex;
    padding-left: 25em;
}

/* Character page styling */
.content h2 {
  text-decoration: underline;
}

.content p {
  text-indent: .5rem;
  
}

.content div {
  margin-top: 2rem;
}

.sceneBox {
  border: 0.125rem solid white;
  padding-left: 1rem;
}

.altSceneBox {
  border: 0.125rem solid #e58602;
  padding-left: 1rem;
}

.phaseBox h3 {
  border: 0.125rem solid #e502b0;
  padding-left: 1rem;
}

.index-content h1{
 text-align:center;
  font-size: 1.75rem;
  color:orange;
}
.index-content h2{
  text-align:center;
    font-size: 1.5rem;
}
.index-content p{
  text-align:left;
  width:50vw;
  font-size: 1.5rem;
}
.index-content{
    display: flex;
    flex-direction: column;
    align-items:center;
}
.MK{
  border-color:white;  
}
.UN{
  border-color:blue;  
}
p.one {
  border-bottom: dotted;
  border-width: thick;
  padding-left: 1rem;
  border-color: blue;
}
p.two{
   border-bottom: dotted;
  border-width: thick;
  padding-left: 1rem; 
  border-color: blue;
}
p.three{
   border-bottom: dotted;
  border-width: thick;
  padding-left: 1rem;  
  border-color: blue;
}
p.four{
  border-bottom: dotted;
  border-width: thick;
  padding-left: 1rem;  
  border-color: blue;
}
.character{
 color: aqua;
}


/* Research Page Section */
.sevegies {
  height: 50vh;
  /* width: 25vw; */
  background-color: white;
}

.sevegies1 {
  width: 60vw;
  /* background-color: white; */
}