/* 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;
        }

body {
  text-align: center;
  background-image: url("/YIIK/Bradiant.png"), url("/YIIK/Img/Back.jpg"), url("/YIIK/Bradiant.png");
  font-family: "Onism";
  font-size: 25px;
  color: rgb(255, 251, 16);
  
  background-size: auto, contain, auto;
  background-repeat: repeat-x, no-repeat, repeat-x;
  background-position: top, bottom, center;

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

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


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

#AlexMonologue {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 50px;
}

#Container {
  position:relative;
  height: 850px;
}

#Logo {
  max-width: 800px;
  position: absolute;
  top:100px;
}

#Yerk {
  margin-bottom: 200px;
  position: absolute;
  top:600px;

  #MainMenu {
    font-family: "Anon";
    border-color: #acc0d3;
    border-width: 8px;
    border-radius: 4px;
    border-style: groove;
    width:300px;
    margin-bottom: -50px;

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    
    background-color: #1a34a896;
    color: #85fbff;
     text-shadow: 
     -1px -1px 0 #181616, 
     1px -1px 0 #181616, 
     -1px 1px 0 #181616, 
     1px 1px 0 #181616,
      -2px -2px 0 #181616, 
     2px -2px 0 #181616, 
     -2px 2px 0 #181616, 
     2px 2px 0 #181616;


          a:visited  {
      color: #d1d1d1;
     }
            a:link  {
      color: #d1d1d1;
     }
          a:active  {
      color: #d1d1d1;
     }
          a:hover {
     color: #eccc15;
     }

}
}

#back {
    font-family: Glitch;
    font-size: 35px;
}

#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;
}

#DiaBack {
background-image: url(/YIIK/Img/YiikTalk.png);
background-size: contain;
width: 1300px;
height: fit-content;
  padding-top: 10px; 
  padding-bottom: 20px;

}

#UI {
    font-family: "Anon";
    border-color: #acc0d3;
    border-width: 8px;
    border-radius: 4px;
    border-style: groove;
    width:600px;
    
  
    
    background-color: #1a34a8;
    color: #85fbff;
     text-shadow: 
     -1px -1px 0 #181616, 
     1px -1px 0 #181616, 
     -1px 1px 0 #181616, 
     1px 1px 0 #181616;
}

#Char {
    color: rgb(21, 255, 53);
    text-align: left;
    margin-left: 15px;
}

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

#legend {
  width: 400px;
  height: auto;
  padding: 5px;
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  
}

#imageinsert {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 width: fit-content;
 max-width: 610px;
 margin-left: auto;
 margin-right: auto;
 background-color: #fad6b8;
 border: none; 
 padding: 5px;
 padding-bottom: 0px;
}

#insertimage {
 max-width: 200px;
}

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


  #AlexMonologue {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
  max-width: 350px;
  max-height: 1000px;
  font-size: 20px;
}

  #Container {
  position:relative;
  height: 700px;
}

#Logo {
  position: absolute;
  top:100px;
  width: fit-content;
  margin: auto;
    img {
      max-width: 350px;
    }
}

#Yerk {
  margin-bottom: 200px;
  position: absolute;
  top:450px;

  #MainMenu {
    font-family: "Anon";
    border-color: #acc0d3;
    border-width: 8px;
    border-radius: 4px;
    border-style: groove;
    max-width: 350px;
    width: 300px;
    margin-bottom: -50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 10px;
    padding: 20px;
    margin: auto;
    
    background-color: #1a34a896;
    color: #85fbff;
     text-shadow: 
     -1px -1px 0 #181616, 
     1px -1px 0 #181616, 
     -1px 1px 0 #181616, 
     1px 1px 0 #181616;


          a:visited  {
      color: #d1d1d1;
     }
            a:link  {
      color: #d1d1d1;
     }
          a:active  {
      color: #d1d1d1;
     }
          a:hover {
     color: #eccc15;
     }

    }
}

  #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;
  }
  
  body {
  background-size: auto, cover;
  background-repeat: repeat-x, no-repeat;
  background-position: top, bottom;
}

}