/* 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." */
   
   
/*https://mf2fm.com/rv/dhtmltinkerbell.php*/  

/*-------------------*/
/*    STRUCTURE      */   
/*-------------------*/
/*
html { 
  cursor: url(images/mscathandsmall1.png), auto;
  cursor: url(images/mscathandsmall1.png), pointer;  
} /*https://www.w3schools.com/cssref/pr_class_cursor.php
*/

html {

  --sprite-sheet: url("/objects/runeheadericons.png");
  --fps: 9;
  --frames: 9;
  --width: 10px;
  --height: 10px;
  --scale: 5; /* frames scaled up 4x to 256x256 */
}

img { 
  display:block; 
  margin:auto;
  width: 100%;
  height: auto;
  opacity: 1; /*should make the main background image resize based on resolution*/
}

/*hover options https://www.w3schools.com/cssref/sel_hover.php*/
a.menulinks {
    cursor: url("images/exclaimsmall64.png") 0 200, pointer;  
    /*height: 50px;*/
    line-height: 2.5;
}

a.highlight:hover, a.highlight:active {
  background-color: yellow;
  color: pink;
  /*border: 2px solid pink;
  margin: 5px;
  padding: 5px;*/
  /*border: 20px solid transparent; */
  /*border-image: url('decoration/whitelace.png') 34 round;*/
}
a.size:hover, a.size:active {
  font-size: 150%;
}

/*for home page locations*/

/*.nocursor { cursor:none; }*/

#box-shadow-div{ /* # means it's an id*/
    position: fixed;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color:blue;
    box-shadow: 0 0 10px 10px blue;
    top: 49%;
    left: 48.85%;
    opacity: .35;
    mix-blend-mode: multiply;
}


#sleeve-div{
    position: fixed;
    width: 1500px;
    height: 1500px;
    top: 49%;
    left: 48.85%;
}

#hover-div{
    position: fixed;
    width: 1500px;
    height: 1500px;
    top: 49%;
    left: 48.85%;
}

/* animations/sprites */
.heart {
   background: url('objects/runeheadericons.png') no-repeat -88px -32px;
   width: 15px;
   height: 14px;
}
.arrow1 {
   background: url('objects/runeheadericons.png') no-repeat -103px -32px;
   width: 10px;
   height: 10px;
}
.arrow2 {
   background: url('objects/runeheadericons.png') no-repeat -0px -98px;
   width: 8px;
   height: 10px;
}
.arrow3 {
   background: url('objects/runeheadericons.png') no-repeat -16px -98px;
   width: 6px;
   height: 10px;
}
.arrow4 {
   background: url('objects/runeheadericons.png') no-repeat -28px -98px;
   width: 4px;
   height: 10px;
}
.arrow5 {
   background: url('objects/runeheadericons.png') no-repeat -36px -98px;
   width: 2px;
   height: 10px;
}
.arrow6 {
   background: url('objects/runeheadericons.png') no-repeat -38px -98px;
   width: 2px;
   height: 10px;
}
.arrow7 {
   background: url('objects/runeheadericons.png') no-repeat -32px -98px;
   width: 4px;
   height: 10px;
}
.arrow8 {
   background: url('objects/runeheadericons.png') no-repeat -22px -98px;
   width: 6px;
   height: 10px;
}
.arrow9 {
   background: url('objects/runeheadericons.png') no-repeat -8px -98px;
   width: 8px;
   height: 10px;
}
.whiteuparrow {
   background: url('objects/runeheadericons.png') no-repeat -113px -32px;
   width: 9px;
   height: 10px;
}
.lrbtw {
   background: url('objects/runeheadericons.png') no-repeat -0px -32px;
   width: 88px;
   height: 20px;
}
.greenhealth {
   background: url('objects/runeheadericons.png') no-repeat -0px -0px;
   width: 128px;
   height: 16px;
}
.pinkheader {
   background: url('objects/runeheadericons.png') no-repeat -0px -16px;
   width: 128px;
   height: 16px;
}
.greenheader {
   background: url('objects/runeheadericons.png') no-repeat -0px -78px;
   width: 128px;
   height: 10px;
}
.blueheader {
   background: url('objects/runeheadericons.png') no-repeat -0px -88px;
   width: 128px;
   height: 10px;
}
.brownheader {
   background: url('objects/runeheadericons.png') no-repeat -0px -52px;
   width: 127px;
   height: 13px;
}







/*
#myimg {
  position: absolute;
  z-index: 1000;
}
*/

.disabled { /*no element will be clickable, clicks fall thru, but java doesn't work on it either*/
  pointer-events: none;
}

.lacecontainer {
  position: relative;
  border: 20px solid transparent; 
  border-image: url('decoration/whitelace.png') 34 round; /*needed to put this here, otherwise the lace made everything not in the middle!!!*/
}

.bottomleft {
  position: absolute;
  bottom: 25%;
  left: 5%;
  font-size: 20px;
  border: 20px solid transparent; /*border can be put on any element*/
  border-image: url('decoration/whitelace.png') 34 round;
}

.middleleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
}

.topcenter {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
}

.middleright {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
}

.bottomright {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 20px;
}


/*
.location {
  background-color: tomato;
  color: pink;
  border: 2px solid black;
  margin: 10px;
  padding: 10px;
}
*/

/*-------------------*/
/*    STYLE          */   
/*-------------------*/

@font-face { 
    font-family: "mieszkanie9"; 
    src: url(fonts/mieszkanie9.otf) format("opentype");
    font-style:normal;
    font-weight:normal;
}

@font-face { 
    font-family: "ARRoundGothicPJPMD"; 
    src: url(fonts/ARRoundGothicPJPMD.ttf) format("truetype");
    font-style:normal;
    font-weight:normal;
}

@font-face { 
    font-family: "KISSMKMK"; 
    src: url(fonts/KISSMKMK.ttf) format("truetype");
    font-style:normal;
    font-weight:normal;
}

@font-face { 
    font-family: "zawijasy"; 
    src: url(fonts/zawijasy.otf) format("opentype");
    font-style:normal;
    font-weight:normal;
}

@font-face { 
    font-family: "Plaq108"; 
    src: url(fonts/Plaq108.otf) format("opentype");
    font-style:normal;
    font-weight:normal;
}

/*
@font-face { 
    font-family: "mieszkanie9"; 
    src: url(fonts/mieszkanie9.otf) format("opentype");
    font-style:normal;
    font-weight:normal;
}
*/

h1{
  font-weight: normal;
  font-family: "mieszkanie9";
  font-size: 4em;
  text-align: center;
}

h2{
  font-weight: normal;
  font-family: "zawijasy";
  font-size: 2em;
  text-align: center;
}

h3{
  font-weight: normal;
  font-family: "KISSMKMK";
  font-size: 2em;
  text-align: center;
}
  
h4{
  font-weight: normal;
  font-family: "Plaq108";
  font-size: 2em;
  text-align: center;
}
  
body { 
  font-family:"ARRoundGothicPJPMD";
  cursor: none;
  /*cursor: url("images/exclaimsmall.png"), pointer;  
  cursor: none, auto;*/
}
 

.addlace {
  border: 20px solid transparent; 
  border-image: url('decoration/whitelace.png') 34 round;
}