/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face { /*Yiik dialogue font*/
  font-family: Anon;
  src: url(/Fonts/Anonymous.ttf);
}

@font-face { /*From Onism1999.com*/
  font-family: Onism;
  src: url(/Fonts/onismrecreation-webfont.woff2) format('woff2'),
  url(/Fonts/onismrecreation-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal;
        }

@font-face { /*Zine*/
  font-family: Rowdies;
  src: url(/Fonts/Rowdies-Light.ttf);
}

@font-face { /*Zine Large*/
  font-family: Bogle;
  src: url(/Fonts/BBHBogle-Regular.ttf);
}

* {box-sizing: border-box;}

body {
  text-align: center;
  background-image: url("/YIIK/Img/RoadTexture.png");
  background-size: cover;
  font-family: "Onism";
  font-size: 25px;
  color: rgb(255, 251, 16);


  cursor: url('/YIIK/uicursor.png'), auto;
}

a {cursor: url('/YIIK/uicursor.png'), auto;}


div {
  max-width: 100%; 
  
  margin: auto;
}

#Container {
  border-color: #1a34a8f8;
  border-width: 4px;
  border-style: solid;
  background-color: #8cc2ffab;
  width: 1000px;
  height: 800px;
  position: relative;

}

#Dialogue {
font-family: "Anon";
color: #85fbff;
text-shadow: 
     -1px -1px 0 #181616, 
     1px -1px 0 #181616, 
     -1px 1px 0 #181616, 
     1px 1px 0 #181616;
padding-bottom: 20px;
}

#mainImage {
  max-width: 300px;
  height: auto;
  position: fixed;
  right: 80px;
  top: 50px;
}

#Towns {
  height:800px; 
  img {width:500px;
  transition: .3s ease;}
  img:hover {
    max-width: 500px;
    transform: scale(1.2);
  }
}

#Map {
  max-width: 200px;
  height: auto;
  position: fixed;
  left: 130px;
  top: 80px;
  img {
    transition: 0.3s ease;
  }
  img:hover {
    max-width: 200px;
    transform: scale(1.5);
  }
 
  p {
    margin-top  :0px;
    border:2px solid rgb(0, 36, 197);
    border-style: solid;
    background-color: #76dfff;
  }
}

#hoverTarget{
  background-image: url(/Home/EBback1.PNG); 
  border: 4px solid #F3701B;
  max-width: 200px;
  height: fit-content;
  position: fixed;
  left: 130px;
  top: 80px;
  p {margin-top: 0px;
  border: 2px solid #000000;
  background-color: #ffffff;
  width: fit-content;
  margin: auto;
  margin-bottom: 10px;
}
}

img {
  width: 100%;
  height: auto;
  padding: 20px;
}

@media screen and (max-width:400px) {
/*Fix Inline CSS (Which is always selected)
by making imageinsert separate from the image.*/
  div {
  width: 300px;
  }

  #DiaBack {
    background-size: 400px;
    width: 800px;
  }

  #UI {
    width: fit-content;
  }

  img {
    width: 100%;
    height: auto;
    padding-left: 0px;
    padding-right: 0px;
  }

  #insertposter {
  max-width: 150px;
}

  #legend {
    gap:5px;
    width: 330px;
  }

  
}