body { 
cursor:url(../img/s3.gif),url(../img/s3.cur),inherit;
cursor:url(../img/s3.gif),url(../img/s3.cur),pointer;
cursor:url(../img/s3.gif),url(../img/s3.cur),crosshair;
cursor:url(../img/s3.gif),url(../img/s3.cur),default;
cursor:url(../img/s3.gif),url(../img/s3.cur),e-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),grab;
cursor:url(../img/s3.gif),url(../img/s3.cur),help;
cursor:url(../img/s3.gif),url(../img/s3.cur),move;
cursor:url(../img/s3.gif),url(../img/s3.cur),n-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),ne-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),w-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),progress;
cursor:url(../img/s3.gif),url(../img/s3.cur),s-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),se-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),sw-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),text;
cursor:url(../img/s3.gif),url(../img/s3.cur),w-resize;
cursor:url(../img/s3.gif),url(../img/s3.cur),wait;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
overflow: -moz-scrollbars-vertical; 
z-index:-1200;
height: auto; /* To allow scrolling */
margin: 0;
/* scrolly mouse issues*/
pointer-events: auto;       /* must be auto to receive events */
user-select: auto;          /* allow text and drag selection */
touch-action: auto;         /* allow touch drag for scrolling */
-webkit-user-drag: auto;    /* allow dragging elements/images */
-webkit-user-select: auto;
overflow: auto;             /* ensure scrolling is possible */

}

a {
    cursor: url('../img/s3.gif'), custom; /* Use your custom cursor for links */
}

a:hover, a img:hover {
    cursor: url(../img/s3.gif), url(../img/s3.cur), custom;
}

a:active, a img:active {
    cursor: url(../img/s3.gif), url(../img/s3.cur), custom;
}

body { overflow:auto;
}

div {   
user-select: none;
/*padding:15px; */
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

a {
color:white;
   text-decoration:none;
   cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

div.master {
position:absolute; margin:0; padding:0; top:0; left:0; width:100%; height:100%;
overflow-y:scroll;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

div.p1 {
   position: fixed;
   background-image: url("../img/ppfox.png");
   background-repeat:no-repeat;
   background-size:100% 100%;
   /*background-color:#ff0000; */
      top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    margin:0 auto;
    padding:0%;
    overflow:auto;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
    ;
       }
   
div.p1lines {
   position: fixed;
   background-image: url("../img/ppfoxlining.png");
   background-repeat:no-repeat;
   background-size:100% 100%;
   /*background-color:#ff0000; */
   top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    margin:0 auto;
    padding:0%;
    overflow:auto;
    z-index:7000;
    pointer-events:none;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
       }
   

div.introduction {
  position: relative;
  top: 0%;
  left: 50%;
  transform: translate(-40%, 0%);
  background: transparent;
  width: 80%;
  text-align: center;
  align:center;
  z-index: -1;
  cursor: url(../img/s3.gif), url(../img/s3.cur), custom;
  scroll:auto;
  z-index:19999999;
}
/*
div.introduction {
position: center;   
background:transparent;
margin:0 auto;
top:100px;
width:70%;
text-align: center;
clear:both;
z-index:-1;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;      }   
*/
div.paw{
display:inline-block;
position:relative;
margin-top:3%;
padding:3%;
margin-left:5vw;
left:-10%;
width:99%;
z-index:2;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
pointer-events:none;
isolation:isolate;
}




div.numbers{
display:inline-block;
background-image: url("../img/n1.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:12vw;
height:12vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
pointer-events:auto;
isolation:isolate;   }

div.alfa{
display:inline-block;
background-image: url("../img/a1.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:12vw;
height:12vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
pointer-events:auto;
isolation:isolate;   }

div.words{
display:inline-block;
background-image: url("../img/w1.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:12vw;
height:12vw;
clear:both;
filter: drop-shadow(0 10px 14px red);
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
pointer-events:auto;
isolation:isolate;   }    

div.stories{
display:inline-block;
background-image: url("../img/s1.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:12vw;
height:12vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
pointer-events:auto;
isolation:isolate;   }

div.kids {
display:block;
position:relative;
background-image: url("../img/ce1.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:30vw;
height:30vw;
clear:both;
margin:0 auto;    
border:0;
z-index:2;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;
pointer-events:auto;
isolation:isolate;   
       }

div.nada{
display:inline-block;
background:transparent;
background-size:100% 100%;
width:14vw;
height:14vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}




            
 div.brighten {
-webkit-filter: brightness(90%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

div.brighten:hover{
-webkit-filter: brightness(120%);

transition: .5s ease;
}      
  
div.brighten:active{
-webkit-filter: brightness(140%);
transition: .5s ease;
}      


@font-face {
    font-family: 'legendboy';
    src: url('fonts/legendboy.eot');
    src: url('fonts/legendboy.eot?#iefix') format('eot'),
         url('fonts/legendboy.woff') format('woff'),
         url('fonts/legendboy.ttf') format('truetype'),
         url('fonts/legendboy.svg') format('svg');
    color:#343434;
    font-weight: normal;
    font-style: normal;

}

     
@font-face {
    font-family: 'jinsong';
    src: url('fonts/jinsong.eot');
    src: url('fonts/jinsong.eot?#iefix') format('eot'),
         url('fonts/jinsong.woff') format('woff'),
         url('fonts/jinsong.ttf') format('truetype'),
         url('fonts/jinsong.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'japfont';
    src: url('fonts/japfont.eot');
    src: url('fonts/japfont.eot?#iefix') format('eot'),
         url('fonts/japfont.woff') format('woff'),
         url('fonts/japfont.ttf') format('truetype'),
         url('fonts/japfont.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'korean';
    src: url('fonts/korean.eot');
    src: url('fonts/korean.eot?#iefix') format('eot'),
         url('fonts/korean.woff') format('woff'),
         url('fonts/korean.ttf') format('truetype'),
         url('fonts/korean.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'arabic';
    src: url('fonts/arabic.eot');
    src: url('fonts/arabic.eot?#iefix') format('eot'),
         url('fonts/arabic.woff') format('woff'),
         url('fonts/arabic.ttf') format('truetype'),
         url('fonts/arabic.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'thai';
    src: url('fonts/thai.eot');
    src: url('fonts/thai.eot?#iefix') format('eot'),
         url('fonts/thai.woff') format('woff'),
         url('fonts/thai.ttf') format('truetype'),
         url('fonts/thai.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hindi';
    src: url('fonts/hindi.eot');
    src: url('fonts/hindi.eot?#iefix') format('eot'),
         url('fonts/hindi.woff') format('woff'),
         url('fonts/hindi.ttf') format('truetype'),
         url('fonts/hindi.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'russian';
    src: url('fonts/russian.eot');
    src: url('fonts/russian.eot?#iefix') format('eot'),
         url('fonts/russian.woff') format('woff'),
         url('fonts/russian.ttf') format('truetype'),
         url('fonts/russian.svg') format('svg');
    font-color:#ffffff;
    font-weight: normal;
    font-style: normal;
}


 @font-face {
    font-family: 'Bilbo';
    src: url('fonts/bilbo-regular.eot');
    src: url('fonts/bilbo-regular?#iefix') format('eot'),
         url('fonts/bilbo-regular.woff') format('woff'),
         url('fonts/bilbo-regular.ttf') format('truetype'),
         url('fonts/bilbo-regular.svg') format('svg');
         
    

}


h4.roundB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #90ff8a;
	text-shadow:   0 0 20px #1bfff7, 0 0 25px #6e6ef1, 0 0 35px #4141dc, 0 0 40px #0000ff;
	letter-spacing: 5px;
	font: 'Bilbo';
	display:inline;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  	
	}

p.parable{
border-style:solid;
border-width:1px;
border-color:#ffffff;
border-radius:2vw;
background-color: rgba(1,1,1,0.5);
padding:2vw;
text-align:justify;
color:#ffffff;
font-family: 'Bilbo';
font-size:45vw;

}


p.links{

border-style:solid;
border-width:1px;
border-color:#ffffff;
border-radius:2vw;
background-color: rgba(1,1,1,0.5);
padding:2vw;
text-align:justify;
color:#ffffff;
font-family: 'Bilbo';
font-size:4vw; 
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

h2.vocab{
color:#ffffff;
font-family: 'Bilbo';
font-size:3vw;
width:100%;
text-align:center;
float:center;
text-decoration:none;
}

cursor:url(../img/s3.gif),custom;  

a{
color:white;
text-decoration:none;
/*color:#ffffff;
font-family: 'Bilbo';
font-size:4vw;
width:100%;
text-align:center;
float:center;
text-decoration:none;
text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
transition: 2s;*/
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

a:active{
/*color: #ffffff;
font-family: 'Bilbo';
font-size:4vw;
width:100%;
text-align:center;
float:center;*/
color:white;
text-decoration:none;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}


a:hover{
/*color: #ffffff;
font-family: 'Bilbo';
font-size:4vw;
width:100%;
text-align:center;
float:center;*/
color:white;
text-decoration:none;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}




h1.jinsongside {
font-family: 'jinsong';
font-size: 3vw;
color: #ffffff;
text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
letter-spacing: 5px;
font: 'jinsong';
text-align:center;    
margin-left:10vw; 
}     













h1.jinsong {
font-family: 'jinsong';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'jinsong';
}     
/*}*/


h1.jinsong2 {
font-family: 'jinsong';
	font-size: 2vw;
    color: #ffffff;
		/* text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;*/
	letter-spacing: 5px;
	font: 'jinsong';
}    

/*@media only screen and (min-width: 700px)  {*/

h1.jinsong2 {
font-family: 'jinsong';
	font-size: 2vw;
    color: #ffffff;
		/* text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33; */
	letter-spacing: 5px;
	font: 'jinsong';
}     
/*}*/
 

/*@media only screen and (min-width: 10px)  {*/
h1.jinsong22 {
font-family: 'jinsong';
	font-size: 2vw;
    color: #000000;
    color: #000000;
		/* text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;*/
	letter-spacing: 5px;
	font: 'jinsong';
}     
}

/*@media only screen and (min-width: 700px)  {*/
h1.jinsong22 {
font-family: 'jinsong';
	font-size: 2vw;
    color: #000000;
		/* text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33; */
	letter-spacing: 5px;
	font: 'jinsong';
}     
/*}*/

/*@media only screen and (min-width: 10px)  {*/
h2.Bilbo3 {
font-size: 1vw;
    color: #000000;
	letter-spacing: 5px;
	font: 'Bilbo';
	display:inline;
}     
/*}*/

/*@media only screen and (min-width: 700px)  {*/
h2.Bilbo3 {
font-size: 1vw;
    color: #000000;
	
	letter-spacing: 5px;
	font: 'Bilbo';
	display:inline;
}     
/*}*/


/*@media only screen and (min-width: 10px)  {*/
h1.japfont {
font-family: 'japfont';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'japfont';
}     
/*}*/

/*@media only screen and (min-width: 700px)  {*/
h1.japfont {
font-family: 'japfont';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'japfont';
}     
/*}*/
 
/*@media only screen and (min-width: 10px)  {*/
h1.korean {
font-family: 'korean';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'korean';
}     
/*}*/

/*@media only screen and (min-width: 700px)  {*/
h1.korean {
font-family: 'korean';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'korean';
}     
}

/*@media only screen and (min-width: 10px)  {*/
h1.arabic {
font-family: 'arabic';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'arabic';
}     
}

/*@media only screen and (min-width: 700px)  {*/
h1.arabic {
font-family: 'arabic';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'arabic';
}     
}

/*@media only screen and (min-width: 10px)  {*/
h1.thai {
font-family: 'thai';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'thai';
}     
/*}*/

/*@media only screen and (min-width/*: 700px)  {*/
h1.thai {
font-family: 'thai';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'thai';
}     
/*}*/

/*@media only screen and (min-width: 10px)  {*/
h1.hindi {
font-family: 'hindi';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'hindi';
}     
/*}*/

/*@media only screen and (min-width: 700px)  {*/
h1.hindi {
font-family: 'hindi';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'hindi';
}     
/*}*/

/*@media only screen and (min-width: 10px)  {*/
h1.russian {
font-family: 'russian';
	font-size: 5vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'russian';
}     
}

/*@media only screen and (min-width: 700px)  {*/
h1.russian {
font-family: 'russian';
	font-size: 4vw;
    color: #ffffff;
		text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'russian';
}     
/*}*/





  
  
/*@media only screen and (min-width: 10px)  {*/
div.fl3 {
position:fixed;
right:0px;
bottom:0;
height:10px;
width:10px;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/fl3.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:30vw;
height:15vw;
clear:both;
border:0;
z-index:11;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

/*@media only screen and (min-width: 700px)  {*/
div.fl3 {
position:fixed;
right:0px;
bottom:0;
height:10px;
width:10px;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/fl3.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:35vw;
height:20vw;
clear:both;
border:0;
z-index:11;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}





@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

div.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.5s;
  -moz-animation-duration:.5s;
  animation-duration:.5s;
  
  -webkit-animation-delay: .5s;
  -moz-animation-delay: .5s;
  animation-delay: .5s;
  
}


@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:1; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:1; } }

@-webkit-keyframes fadeOut { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeOut { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:0; } to { opacity:1; } }

body.fade-out {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  animation-duration:2s;
  
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
  
}

/*@media only screen and (min-width: 10px)  {*/
div.advert{
display:inline-block;
background:transparent;
margin-top:10vw;
width:100vw;
height:10vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  } 
/*}*/

/*@media only screen and (min-width: 700px)  {*/
div.advert{
display:inline-block;
background:transparent;
margin-top:10vw;
width:100vw;
height:10vw;
clear:both;
border:0;cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  } 
}

div.foxy {
position:float;
right:0px;
bottom:0;
height:10vw;
width:10vw;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/foxy.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
clear:both;
border:0;
z-index:11;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
/*-webkit-animation: foxy 2s infinite linear;

}

@-moz-keyframes foxy {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes foxy {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-360deg); }
}
@keyframes foxy {
    from {transform:rotate(0deg);}
    to {transform:rotate(-360deg);}
}
*/
}



/*@media only screen and (min-width: 10px)  {*/
div.storypic {
position:relative;
display:block;
width:50vw;
height:50vw;
clear:both;
border:0;
left:50%;
margin-top:50px;
border-radius:50%;
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
       }

div.storypic-center {
position:relative;
display:block;
width:50vw;
height:50vw;
clear:both;
border:0;
left:-50%;
margin-top:50px;
border-radius:50%;
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
       }

/*}*/

/*@media only screen and (min-width: 700px)  {*/
div.storypic {
position:relative;
display:block;
width:25vw;
height:25vw;
clear:both;
border:0;
left:50%;
margin-top:50px;
border-radius:50%;
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
       }

div.storypic-center {
position:relative;
display:block;
width:25vw;
height:25vw;
clear:both;
border:0;
left:-50%;
margin-top:50px;
border-radius:50%;
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
       }

/*}*/


img.story {
border-radius:50%;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 
0 0 60px #ff9600, /*orange;*/
0 0 62px #723cf3; /*lavender-trans-orange-to-steel-blue
 /*0 0 75px #da9d33;*/
width:100%;
height:100%;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}



h4.line-through {
text-decoration: line-through;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}


@media only screen and (min-width: 10px){
h4 {font-family: 'Bilbo';
	font-size: 5vw;
    color: #ffffff;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'Bilbo';
	display:inline;
	}
	
h4.Bilbo {font-family: 'Bilbo';
	font-size: 5vw;
    color: #ffffff;
	text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'Bilbo';
	
	}	

h4.squareB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #1bfff7;
	text-shadow:   0 0 20px #1bfff7, 0 0 25px #6e6ef1, 0 0 35px #4141dc, 0 0 40px #0000ff;
	letter-spacing: 5px;
	font: 'Bilbo';

	}		
	
h4.roundB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #90ff8a;
	text-shadow:  0 0 20px #90ff8a, 0 0 30px #53ff4a, 0 0 50px #0cff00, 0 0 70px#09c900;
	letter-spacing: 5px;
	font: 'Bilbo';
	
	}	
	
h4.squigB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #f29cff;
	text-shadow:  0 0 20px #f29cff, 0 0 30px #ea5fff, 0 0 40px #e328ff, 0 0 50px #de00ff, 0 0 75px #de00ff;
	letter-spacing: 5px;
	font: 'Bilbo';
	}		

h4.squigdd {font-family: 'Bilbo';
    font-size: 5vw;
    color: #a163ff;
    text-shadow: 
    0 0 0 #f29cff, /* No blur, solid color */
    1px 0 0 #f29cff, /* Right shadow */
    -1px 0 0 #f29cff, /* Left shadow */
    0 1px 0 #f29cff, /* Bottom shadow */
    0 -1px 0 #f29cff; /* Top shadow */    letter-spacing: 5px;
    font: 'Bilbo';
    font-weight:bold;
    } 	
}

@media only screen and (min-width: 700px)  {
h4 {font-family: 'Bilbo';
	font-size: 5vw;
    color: #ffffff;
	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'Bilbo';
		}
	h4.Bilbo {font-family: 'Bilbo';
	font-size: 5vw;
    color: #ffffff;
	text-shadow:  0 0 15px #fff, 0 0 20px #da9d33, 0 0 30px #da9d33, 0 0 40px #da9d33, 0 0 50px #da9d33, 0 0 75px #da9d33;
	letter-spacing: 5px;
	font: 'Bilbo';
		}	
h4.squareB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #1bfff7;
	text-shadow:   0 0 20px #1bfff7, 0 0 25px #6e6ef1, 0 0 35px #4141dc, 0 0 40px #0000ff;
	letter-spacing: 5px;
	font: 'Bilbo';
	}		
h4.roundB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #90ff8a;
    text-shadow:  0 0 20px #90ff8a, 0 0 30px #53ff4a, 0 0 50px #0cff00, 0 0 70px#09c900;
	letter-spacing: 5px;
	font: 'Bilbo';
	
	}	
	
h4.squigB {font-family: 'Bilbo';
	font-size: 5vw;
    color: #f29cff;
	text-shadow:  0 0 20px #f29cff, 0 0 30px #ea5fff, 0 0 40px #e328ff, 0 0 50px #de00ff, 0 0 75px #de00ff;
	letter-spacing: 5px;
	font: 'Bilbo';
	}			

h4.squigdd {font-family: 'Bilbo';
    font-size: 5vw;
    color: #a163ff;
    text-shadow: 
    0 0 0 #f29cff, /* No blur, solid color */
    1px 0 0 #f29cff, /* Right shadow */
    -1px 0 0 #f29cff, /* Left shadow */
    0 1px 0 #f29cff, /* Bottom shadow */
    0 -1px 0 #f29cff; /* Top shadow */    letter-spacing: 5px;
    font: 'Bilbo';
    font-weight:bold;
    } 

}



/* Styles for the rotating div */
.rotatingfox {
    position: fixed; /* Stays in the same place even when scrolling */
    bottom: 5vh; /* Positions it at the bottom */
    left: 5vw; /* Positions it at the left */
    width: 14vw; /* Sets the width to 12% of the viewport width */
    height: 14vw; /* Sets the height to 12% of the viewport width */
    background-image: url('../img/foxy.png'); /* Set your background image */
    background-size: cover; /* Make the background image cover the whole div */
    background-position: center; /* Center the background image */
    animation: rotate 8s linear infinite; /* Rotates the background once per second infinitely */
    point-events:none;
    z-index:9999;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

/* Keyframes for rotating the background */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    to {
        transform: rotate(-360deg); /* Rotate to 360 degrees */
    }
}

div.swirly {
display:inline-block;
position:fixed;
background-image: url("../img/bsfall.png");
background-repeat:no-repeat;
background-size:100% 100%;
padding-bottom:2%;
top:1%;
left:17.5%;     
width:65%;
height:10%;
z-index:19998;
}


@media only screen and (min-width: 10px)  {
div.mnu {
position:fixed;
right:0px;
bottom:0;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/mnufox.png") ;
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
width:35vw;
height:25vw;
clear:both;
border:0;
z-index:22;cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  }
}

@media only screen and (min-width: 700px)  {
div.mnu {
position:fixed;
right:0px;
bottom:0;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/mnufox.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:35vw;
height:25vw;
clear:both;
border:0;
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}
}

@media only screen and (min-width: 701px)  {
.scrollz{
    position:fixed;
    top:8vh;
    right:8vw;
    background-image: url('../img/foxscrolls.png'); /* Set your background image */
    background-size: cover; /* Make the background image cover the whole div */
    background-position: center; /* Center the background image */
    width:7vw;
    height:7vw;
    pointer-events:auto;
    z-index:120000;
    font-size:0.75vw;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}
}

@media only screen and (max-width: 700px)  {
.scrollz{
    position:fixed;
    top:8vh;
    right:7vw;
    background-image: url('../img/foxscrolls.png'); /* Set your background image */
    background-size: cover; /* Make the background image cover the whole div */
    background-position: center; /* Center the background image */
    width:7vw;
    height:7vw;
    pointer-events:auto;
    z-index:120000;
    font-size:0.75vw;
    margin-bottom:3vw;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}
}



.scrollz:hover {
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

/* Scale on click */
.scrollz:active {
cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}


.particle {
    position: fixed;
    width: 6vw; /* Width of particle */
    height: 6vw; /* Height of particle */
    background-image: url('../img/mushfloat.png'); /* Path to star image */
    background-size: cover; /* Cover entire div */
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s, transform 0.5s; 
    filter: drop-shadow(0 0 15px blue);
    filter: drop-shadow(0 0 7px lightblue);
    filter: drop-shadow(0 0 1px white);
    filter: drop-shadow(0 0 15px blue);
}



.rotatingfox {  
    position: fixed; /* Stays in the same place even when scrolling */
    bottom: 5vh; /* Positions it at the bottom */
    left: 5vw; /* Positions it at the left */
    width: 14vw; /* Sets the width to 12% of the viewport width */
    height: 14vw; /* Sets the height to 12% of the viewport width */
    background-image: url('../img/foxy.png'); /* Set your background image */
    background-size: cover; /* Make the background image cover the whole div */
    background-position: center; /* Center the background image */
    animation: rotate 8s linear infinite; /* Rotates the background once per second infinitely */
    pointer-events:none;
    z-index:9999;
    cursor:url(../img/s3.gif),url(../img/s3.cur),custom;  
}

.spark-container {
    position: fixed;
    bottom: 12vh;
    left: 0vw;
    width: 19vw;
    height: 80vh;
    background:transparent;
    /*background:rgba(125,125,125,0.4);*/
    overflow: visible; /* Hide particles that go outside */
    z-index:120010;
    isolation:isolate;
    pointer-events:none;
}

.sparksmall-container {
    position: fixed;
    bottom: 12vh;
    left: 0vw;
    width: 19vw;
    height: 80vh;
    background:transparent;
    /*background:rgba(125,125,125,0.4);*/
    overflow: visible; /* Hide particles that go outside */
    z-index:120010;
    isolation:isolate;
    pointer-events:none;
}



.spark {
    position: absolute;
    width:12px;
    height:12px;
    color:white;
    /*border-radius: 50%; /* Make them circular */
    filter:;
    z-index:1200000002;
    isolation:isolate;
    pointer-events:none;
        
}


.sparksmall {
    position: absolute;
    width:6px;
    height:5px;
    color:green;
    /*border-Sradius: 50%; /* Make them circular */
    filter:;
    z-index:1200000002;
    isolation:isolate; 
    pointer-events:none;    
}

.spark3 {
    position: absolute;
    width:13px;
    height:12px;
    color:lime;
    /*border-radius: 50%; /* Make them circular */
    filter: 
        
}

.invisible-div {
    position: fixed; /* Fixed positioning */
    bottom: 15h;     /* Distance from the bottom of the viewport */
    left: 0vw;       /* Distance from the left of the viewport */
    width: 19vw;     /* Width of the div */
    height: 80vh;    /* Height of the div */
    background-color: transparent; /* Make it transparent */
    overflow:visible;
}

.hidden {
    display: none; /* Hide the image initially */
}

.fade-in {
    opacity: 1;
    transition: opacity 0.2s ease-in; /* Fade in effect over 0.2 seconds */
}



* {
    cursor: url("../img/s3.gif"), custom;
    z-index:55555;
    
}



section {
    position: fixed; /* Corrected */
    left: 10vw;
    bottom: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1000vh;
    background: #ffffff;
    z-index: 999999999;
}

.shadow {
    animation: animateShadow 5s linear infinite; /* Corrected */
}


/* styles.css */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #121212; /* Dark background for better visibility */
}

.spheres-container {
    position: fixed;
    left: 18vw; /* Center the container */
    top: 40vw; /* Position for all spheres */
    transform: translateX(-50%); /* Adjust for centering */
    z-index:1200000001;
    pointer-events:none;
    translate:0vw;
}

.crystal-ball {
    position: absolute; /* Use absolute positioning for spinning effect */
    border-radius: 50%;
    background: rgba(255, 255, 255, 1.2); /* Semi-transparent outer layer */
    animation: pulse 4s ease-in-out infinite; /* Pulsing effect */
      z-index:1200000001;
      pointer-events:auto;
}

/* Large sphere */
.crystal-ball.large {
    width: 6vw; /* Initial size */
    height: 6vw; /* Initial size */
    animation: bobbingLarge 2s ease-in-out infinite alternate, rotateLarge 8s linear infinite; /* Bobbing and rotating effect */
  z-index:1200000001;
  pointer-events:auto;
}

/* Medium sphere */
.crystal-ball.medium {
    width: 4.5vw; /* Medium size */
    height: 4.5vw; /* Medi/um size */
    animation: bobbingMedium 2s ease-in-out infinite alternate, rotateMedium 6s linear infinite; /* Bobbing and rotating effect */
  z-index:1200000001;
  pointer-events:none;
}

/* Small sphere */
.crystal-ball.small {
    width: 3vw; /* Small size */
    height: 3vw; /* Small size */
    animation: bobbingSmall 1.5s ease-in-out infinite alternate, rotateSmall 4s linear infinite; /* Bobbing and rotating effect */
  z-index:1200000001;
  pointer-events:none;
}

/* Inner layer with pastel colors */
.inner-layer {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, 
        rgba(173, 216, 230, 0.5), /* Light blue */
        rgba(144, 238, 144, 0.5), /* Light green */
        rgba(255, 228, 196, 0.5), /* Light peach */
        rgba(255, 182, 193, 0.5), /* Light pink */
        rgba(255, 218, 185, 0.5) /* Light coral */
    );
    pointer-events:none;
    z-index:1200000001;
}

/* Keyframes for bobbing effects of different sizes */
@keyframes bobbingLarge {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@keyframes bobbingMedium {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); } /* Less bobbing for medium sphere */
}

@keyframes bobbingSmall {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); } /* Even less bobbing for small sphere */
}

/* Keyframes for pulsing effect with larger glow */
@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Normal size */
        box-shadow:
            0 0 30px rgba(173,216,230,1), /* Initial glow (light blue) */
            0 0 40px rgba(144,238,144,.8), /* Glow (light green) */
            0 0 50px rgba(255,228,196,.6); /* Glow (light peach) */
    }
    
   50% {
        transform: scale(1.2); /* Grow to larger size during pulse */
        box-shadow:
            0 0 60px rgba(173,216,230,.8), 
            0 0 80px rgba(144,238,144,.6),
            0 0 100px rgba(255,228,196,.4); /* Brighter glow during pulse */
   }
}

/* Rotation keyframes for large sphere */
@keyframes rotateLarge {
   from { transform: rotate(0deg) translateX(-20px) rotate(0deg); } 
   to { transform: rotate(360deg) translateX(-20px) rotate(-360deg); } 
}

/* Rotation keyframes for medium sphere */
@keyframes rotateMedium {
   from { transform: rotate(0deg) translateX(-15px) rotate(0deg); } 
   to { transform: rotate(-360deg) translateX(-15px) rotate(360deg); } 
}

/* Rotation keyframes for small sphere */
@keyframes rotateSmall {
   from { transform: rotate(0deg) translateX(-10px) rotate(0deg); } 
   to { transform: rotate(-360deg) translateX(-10px) rotate(360deg); } 
}

/* Container for tiny specks spinning around the crystal ball */

/* Animation for spinning specks around the crystal ball (same as before) */

@keyframes spinSpecks {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}



.spheres-container {
    position: fixed;
    left: 10vw; /* Center the container */
    top: 37vw; /* Position for all spheres */
    transform: translateX(-50%); /* Adjust for centering */
    z-index:10001;
}

.crystal-ball {
    position: absolute; /* Use absolute positioning for spinning effect */
    border-radius: 50%;
    background: rgba(155, 155, 155, 1); /* Semi-transparent outer layer */
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 255, 0,3));s
    animation: pulse 4s ease-in-out infinite; /* Pulsing effect */

}

/* Large sphere with drop shadows */
.crystal-ball.large {
    width: 10vw; /* Initial size */
    height: 10vw; /* Initial size */
    animation: bobbingLarge 2s ease-in-out infinite alternate, rotateLarge 6s linear infinite; /* Bobbing and rotating effect */
    /*background-color:rgba(0.5,0.5,1,1);*/
    box-shadow:
        0 0 20px rgba(0, 0, 255, 1),   /* Blue shadow */
        0 0 10px rgba(64, 224, 208, 1), /* Turquoise shadow */
        0 0 5px rgba(255, 255, 255, 1); /* White shadow */
}

/* Medium sphere with drop shadows */
.crystal-ball.medium {
    width: 4.5vw; /* Medium size */
    height: 4.5vw; /* Medium size */
    animation: bobbingMedium 2s ease-in-out infinite alternate, rotateMedium 4s linear infinite; /* Bobbing and rotating effect */

    box-shadow:
        0 0 20px rgba(255, 0, 0, .51),   /* Red shadow */
        0 0 10px rgba(255, 255, 224, 1), /* Light yellow shadow */
        0 0 5px rgba(255, 255, 255, 1); /* White shadow */
}

/* Small sphere with drop shadows */
.crystal-ball.small {
    width: 3vw; /* Small size */
    height: 3vw; /* Small size */
    animation: bobbingSmall 1.5s ease-in-out infinite alternate, rotateSmall 2s linear infinite; /* Bobbing and rotating effect */

   box-shadow:
    0 0 20px rgba(255, 20, 147, 0.8),   /* Deep pink shadow */
    0 0 10px rgba(255, 182, 193, 0.6),  /* Light pink shadow */
    0 0 5px rgba(255, 255, 255, 0.3);   /* White shadow */

}

/* Inner layer with pastel colors */
.inner-layer {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg,
        rgba(173,216,230,0.5), /* Light blue */
        rgba(144,238,144,0.5), /* Light green */
        rgba(255,228,196,0.5), /* Light peach */
        rgba(255,182,193,0.5), /* Light pink */
        rgba(255,218,185,0.5) /* Light coral */
    );
}

/* Keyframes for bobbing effects of different sizes */
@keyframes bobbingLarge {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@keyframes bobbingMedium {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); } 
}

@keyframes bobbingSmall {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); } 
}

/* Keyframes for pulsing effect with larger glow */
@keyframes pulse {
   ...
}

/* Rotation keyframes for large sphere */
/* Keep these as previously defined */
/* Keyframes for specks and other animations remain unchanged */

/* Container for tiny specks spinning around the crystal ball */
.specks {
   position: absolute;
   top: -10%; 
   left: -10%; 
   width: calc(100% + 20px); 
   height: calc(100% + 20px);
}

.speck {
   position: absolute;
   width:22px; 
   height:2s2px;
   border-radius:50%; 
   z-index:9999999;
   background-color:white;
   pointer-events:none;
   box-shadow:0 0 10px blue;
}

/* I don't think any specs were used, LOL */


/*SUBMENU from Mushrooms for instructor notes*/
//* Menu copies teacherLink styles following it here */
/* Style for the link shift on click */
@media only screen and (max-width: 700px)  {
.menuLink {
    font:legendboy;
    font-size:3vw;
    font-color:darkgrey;
    text-shadow: 2px 0px black,  /* Right */
               -2px 0px black,  /* Left */
                0px 2px black,  /* Bottom */
                0px -2px black; /* Top */
    transform: translate(-2px, 2px);
    pointer-events:auto;
    z-index:1200000002;
    isolation:isolate;
}

.menuLink:hover {
    font:legendboy;
    font-size:3vw;
    font-color:lightgrey;
    text-shadow: 
    2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Right */
    -2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Left */
    0px 2px rgba(100, 32.9, 59.3, 0.6),  /* Bottom */
    0px -2px rgba(100, 32.9, 59.3, 0.6); /* Top */
    transform: translate(-2px, 2px);
    pointer-events:auto;
    z-index:1200000002;
    isolation:isolate;
}

.menuLink:active {
    font:legendboy;
    font-size:3vw;
    font-color:white;
    text-shadow:
    2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Right */
    -2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Left */
    0px 2px rgba(100, 32.9, 59.3, 0.6),  /* Bottom */
    0px -2px rgba(100, 32.9, 59.3, 0.6); /* Top */
    transform: translate(-2px, 2px);
    pointer-events:auto;
    z-index:1200000002;
    isolation:isolate;
}
}
@media only screen and (min-width: 701px)  {
.menuLink {
    font:legendboy;
    font-size:3vw;
    font-color:darkgrey;
    text-shadow: 2px 0px black,  /* Right */
               -2px 0px black,  /* Left */
                0px 2px black,  /* Bottom */
                0px -2px black; /* Top */
    transform: translate(-2px, 2px);
}

.menuLink:hover {
    font:legendboy;
    font-size:3vw;
    font-color:lightgrey;
    text-shadow: 
    2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Right */
    -2px 0px rgba(100, 32.9, 59.3, 0.6),  /* Left */
    0px 2px rgba(100, 32.9, 59.3, 0.6),  /* Bottom */
    0px -2px rgba(100, 32.9, 59.3, 0.6); /* Top */
    transform: translate(-2px, 2px);
    pointer-events:auto;
    z-index:1200000002;
    isolation:isolate;
}

.menuLink:active {
    font:legendboy;
    font-size:3vw;
    font-color:white;
    text-shadow:
    4px 0px rgba(100, 32.9, 59.3, 0.6),  /* Right */
    -4px 0px rgba(100, 32.9, 59.3, 0.6),  /* Left */
    0px 4px rgba(100, 32.9, 59.3, 0.6),  /* Bottom */
    0px -4px rgba(100, 32.9, 59.3, 0.6); /* Top */
    transform: translate(-2px, 2px);
    pointer-events:auto;
    z-index:1200000002;
    isolation:isolate;
}

}

.menulinks {
  position: relative; /* to establish stacking context */
  z-index: 1200000001;
  pointer-events: auto;
  isolation: isolate; /* prevents z-index inheritance */
}

@media only screen and (min-width: 700px)  {
#targetWords{
    font-family:legendboy;
    opacity:0;
    position: fixed; 
    padding:2vw;
    color: white;
    font-size:1vw;
    text-align:right;
    line-height:1.5;
        transition: opacity 0.5s;
        z-index:120000;
}
}

@media only screen and (max-width: 700px)  {
#targetWords{
    font-family:legendboy;
    opacity:0;
    position: fixed; 
    padding:2vw;
    color: white;
    font-size:1vw;
    text-align:right;
    line-height:1.5;
        transition: opacity 0.5s;
        z-index:120000;
}
}

#teachernotes{ 
position: relative; /* or fixed if you want it to remain in place during scroll */
 /* Position it vertically in the center of the page */
text-align: justify; /* Optional: Justify the text */
text-align:justify;
width:90vw;
}

/* Style for the link shift on click */
@media only screen and (max-width: 700px)  {
#teacherLink {
    top:-80%;
    font:legendboy;
    font-size:3vw;
     color:white;
    text-shadow: 2px 0px black,  /* Right */
               -2px 0px black,  /* Left */
                0px 2px black,  /* Bottom */
                0px -2px black; /* Top */
    transform: translate(-2px, 2px);
}

#teacherLink:hover {
    font:legendboy;
    font-size:3vw;
    color:white;
    text-shadow: 2px 0px red,  /* Right */
               -2px 0px red,  /* Left */
                0px 2px red,  /* Bottom */
                0px -2px red; /* Top */
    transform: translate(-2px, 2px);
}

#teacherLink:active {
    top:15vh;
    font:legendboy;
    font-size:3vw;
     color:white;
    text-shadow: 2px 0px red,  /* Right */
               -2px 0px red,  /* Left */
                0px 2px red,  /* Bottom */
                0px -2px red; /* Top */
    transform: translate(-2px, 2px);
}
}

@media only screen and (min-width: 701px)  {
#teacherLink {
    font:legendboy;
    top:15vh;
    font-size:2vw;
    color:white;
    text-shadow: 2px 0px black,  /* Right */
               -2px 0px black,  /* Left */
                0px 2px black,  /* Bottom */
                0px -2px black; /* Top */
    transform: translate(-2px, 2px);
}

#teacherLink:hover {
    font:legendboy;
    font-size:2vw;
    color:white;
    text-shadow: 2px 0px red,  /* Right */
               -2px 0px red,  /* Left */
                0px 2px red,  /* Bottom */
                0px -2px red; /* Top */
    transform: translate(-2px, 2px);
}

#teacherLink:active {
    font:legendboy;
    font-size:2vw;
    color:white;
    text-shadow: 2px 0px red,  /* Right */
               -2px 0px red,  /* Left */
                0px 2px red,  /* Bottom */
                0px -2px red; /* Top */
    transform: translate(-2px, 2px);
}
}

@media only screen and (min-width: 700px)  {
#targetDiv{
    font-family:legendboy;
    opacity:0;
    position: fixed; 
    right: 3vw; 
    top: 12vw; 
    width:25vw;
    height:10vw;
    padding:2vw;
    color: white;
    font-size:1vw;
    text-align:right;
    line-height:1.5;
        transition: opacity 0.5s;
        z-index:120000;
}
}

@media only screen and (max-width: 700px)  {
#targetDiv{
    font-family:legendboy;
    opacity:0;
    position: fixed; 
    right: 3vw; 
    top: 12vw; 
    width:25vw;
    height:10vw;
    padding:2vw;
    color: white;
    font-size:1vw;
    text-align:right;
    line-height:1.5;
        transition: opacity 0.5s;
        z-index:120000;
}
}

#teachernotes{ 
position: relative; /* or fixed if you want it to remain in place during scroll */
 /* Position it vertically in the center of the page */
text-align: justify; /* Optional: Justify the text */
text-align:justify;
width:90vw;
}

.toppe{
    position:fixed;
    top:10px;
}

//* Base styling for the link */
.scrolly {
    display: inline-block;
    text-decoration: none;
}

/* Brighten effect on hover */
.scrolly.brighten:hover {
    filter: brightness(150%);  /* Brighten effect (150%) */
    transition: filter 0.3s ease;  /* Smooth transition for the hover effect */
}

/* Active state for when the link is clicked (active) */
.scrolly.brighten:active {
    filter: brightness(200%);  /* Brighten effect (200%) */
    transition: filter 0.1s ease;  /* Smooth transition for the active effect */
}

#teachernotes{ 
font-family:legendboy;
position: flex; /* or fixed if you want it to remain in place during scroll */
 /* Position it vertically in the center of the page */
left:10%;
right:5%;
width:auto;
margin:0;
padding:10vw;
padding-left:3vw;
padding-top:0vw;
text-align:justify;
line-height:1.9;
letter-spacing:2px;
color:white;
background-color:rgba(166,166,166,0);
border-radius:4vw;
word-wrap: break-word;   /* Prevents long words from overflowing */
overflow-wrap: break-word;  /* Ensures long words break and stay inside the div */
max-width: 90vw;     /* Ensures content fits within the width of 70vw */
}



ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 20px;

}

ul li::before {
  content: ''; /* No text content */
  background-image: url('../img/parrotul.png'); /* Your custom image */
  background-size: 20px 20px; /* Resize the image to 20px by 20px */
  background-repeat: no-repeat; /* Prevent repeating the image */
  display: inline-block; /* Ensure the image is treated as an inline element */
  width: 20px; /* Set the width of the image */
  height: 20px; /* Set the height of the image */
  margin-right: 11px; /* Add space between the bullet and the text */
}


/* Shared styles */
.leftmenu {
  position: fixed;
  left: 1.5vw;
  top: -6vh;
  width: 27vw;
  height: 44vw;
  background-color: rgba(128, 0, 128, 0.7);
  overflow: hidden;
  pointer-events: auto;
  font-family: 'jinsong';
  font-size: 5vw;
  color: yellow;
  text-shadow: 0 0 2px #FFD700;
  text-align: center;
  padding-top: 4vw;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 1;
  opacity: 0;
  transform: translateY(-100%);
  animation: fadeIn 5s ease forwards, slideDown 2.5s ease forwards;
  border-top: none;
  border-bottom-left-radius: 2vw;
  border-bottom-right-radius: 2vw;
  box-shadow:
    inset 0 0 0 2px rgba(255, 0, 255, 0.55),
    inset 0 0 0 4px rgba(222, 49, 99, 1),
    0 0 0 2px rgba(255, 165, 0, 0.55),
    0 0 6px rgba(255, 165, 0, 0.55),
    0 0 10px rgba(255, 165, 0, 0.55);
  display: inline-block;
  margin: 0 auto;
}

.leftmenu * {
  pointer-events: auto;
}

.leftmenu a {
  display: inline-flex;
  box-sizing: border-box;
  font-family: 'jinsong';
  color: #d4a755;
  text-decoration: none;
  cursor: url(../img/s3.gif), url(../img/s3.cur), custom;
  isolation: isolate;
  padding: 1vw;
  text-shadow: 0 0 4px pink, 0 0 6px pink, 0 0 8px red, 0 0 8px blue, 0 0 10px blue;
  letter-spacing: normal;
  text-align: right;
  position: relative;
  z-index: 1200000004;
  margin:-2vw;
  padding-right:4vw;
  padding-left:2vw;
  padding-top:2vw;
}

/* Clickable area expansion */
.leftmenu a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0vw;
  right:16vw;
  z-index: -1;
}

.leftmenu a:hover,
.leftmenu a:active {
  color: #ffac36;
  text-shadow:
    -1px -1px 0 #f143ff,
     0px -1px 0 #f143ff,
     1px -1px 0 #f143ff,
    -1px  0px 0 #f143ff,
     1px  0px 0 #f143ff,
    -1px  1px 0 #f143ff,
     0px  1px 0 #f143ff,
     1px  1px 0 #f143ff,
     1px 1px 3px #f143ff,
     0 0 4px pink,
     0 0 5px red,
     0 0 6px blue,
     0 0 8px blue;
}

/* Optional: No longer needed since we're using block layout
.leftmenu a::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
*/

/* Media queries remain for future scaling but use shared .leftmenu now */
@media only screen and (min-width: 701px),
       only screen and (max-width: 700px) {
  .leftmenu {
    /* Already defined above, you can keep this block if you plan overrides later */
  }
}


@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Slide-down animation */
@keyframes slideDown {
  to {
    transform: translateY(0%);
  }
}

  * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  *::-webkit-scrollbar {
    width: 0px !important; /* Chrome, Safari, Opera */
    height: 0px !important;
    background: transparent !important;
  }

  html, body {
    overflow: auto !important; /* Allow overflow */
  }

canvas#mousecanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
}