﻿html { cursor:url(../img/s.gif),url(../img/s.cur),inherit;}
body {
padding:0px;
margin:0px;
overflow:auto;
cursor:url(../img/s.gif),url(../img/s.cur),auto;
cursor:url(../img/s.gif),url(../img/s.cur),pointer;
cursor:url(../img/s.gif),url(../img/s.cur),crosshair;
cursor:url(../img/s.gif),url(../img/s.cur),default;
cursor:url(../img/s.gif),url(../img/s.cur),e-resize;
cursor:url(../img/s.gif),url(../img/s.cur),grab;
cursor:url(../img/s.gif),url(../img/s.cur),help;
cursor:url(../img/s.gif),url(../img/s.cur),move;
cursor:url(../img/s.gif),url(../img/s.cur),n-resize;
cursor:url(../img/s.gif),url(../img/s.cur),ne-resize;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),progress;
cursor:url(../img/s.gif),url(../img/s.cur),s-resize;
cursor:url(../img/s.gif),url(../img/s.cur),se-resize;
cursor:url(../img/s.gif),url(../img/s.cur),sw-resize;
cursor:url(../img/s.gif),url(../img/s.cur),text;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),wait;
cursor:url(../img/s.gif),url(../img/s.cur),not-allowed;
cursor:url(../img/s.gif),url(../img/s.cur),no-drop;
cursor:url(../img/s.gif),url(../img/s.cur),none;    
overflow-y: hidden;
overflow-x: hidden;  
}
div { cursor:url(../img/s.gif),url(../img/s.cur),inherit;
cursor:url(../img/s.gif),url(../img/s.cur),pointer;
cursor:url(../img/s.gif),url(../img/s.cur),crosshair;
cursor:url(../img/s.gif),url(../img/s.cur),default;
cursor:url(../img/s.gif),url(../img/s.cur),e-resize;
cursor:url(../img/s.gif),url(../img/s.cur),grab;
cursor:url(../img/s.gif),url(../img/s.cur),help;
cursor:url(../img/s.gif),url(../img/s.cur),move;
cursor:url(../img/s.gif),url(../img/s.cur),n-resize;
cursor:url(../img/s.gif),url(../img/s.cur),ne-resize;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),progress;
cursor:url(../img/s.gif),url(../img/s.cur),s-resize;
cursor:url(../img/s.gif),url(../img/s.cur),se-resize;
cursor:url(../img/s.gif),url(../img/s.cur),sw-resize;
cursor:url(../img/s.gif),url(../img/s.cur),text;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),wait;
cursor:url(../img/s.gif),url(../img/s.cur),not-allowed;
cursor:url(../img/s.gif),url(../img/s.cur),no-drop;
cursor:url(../img/s.gif),url(../img/s.cur),none;    
}
}
a {    outline: 0;
}



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


div.master {
position:absolute; margin:0; padding:0; top:0; left:0; width:100%; height:100%;
background:transparent;
text-align:Center;
}


@-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:2s;
  -moz-animation-duration:2s;
  animation-duration:2s;
  
  -webkit-animation-delay: .75s;
  -moz-animation-delay: .75s;
  animation-delay: .75s;
  
}

@-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: .75s;
  -moz-animation-delay: .75s;
  animation-delay: .75s;
  
}

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



h1.jinsong2 {
font-family: 'jinsong';
	color: #6e6ef1;
	text-shadow:  0 0 20px #6e6ef1, 0 0 35px #4141dc, 0 0 40px #0000ff;
	letter-spacing: 5px;
	font: 'jinsong';
}     


@media only screen and (min-width: 10px)  {
div.logo {
position:fixed;
top:8vw;
width:100vw;
height:30vw;
font-family: 'jinsong';
	color: #ffffff;
	text-shadow:  0 0 20px #1bfff7, 0 0 25px #6e6ef1, 0 0 35px #4141dc, 0 0 40px #0000ff;
	letter-spacing: 5px;
	font: 'jinsong';
	font-size:14vw;
	text-align:center;
}
}

@media only screen and (min-width: 10px) {
    .bonsai {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 40vw; /* Set your desired width */
        height: 25vw; /* Set your desired height */
        background-image: url("../img/bonsai.png");
        background-repeat: no-repeat;
        background-size: cover; /* Adjust size to cover the div */
        z-index: 1030;
        animation: scale-bend 2s ease-in-out infinite; /* Apply scaling animation */
    }
}

@media only screen and (min-width: 700px) {
    .bonsai {
        position: fixed;
        right: 0;
        bottom: 0;
        width: 40vw; /* Set your desired width */
        height: 25vw; /* Set your desired height */
        background-image: url("../img/bonsai.png");
        background-repeat: no-repeat;
        background-size: cover; /* Adjust size to cover the div */
        z-index: 1030;
        animation: scale-bend 7.5s ease-in-out infinite; /* Apply scaling animation */
    }
}

/* Keyframes for scaling effect */
@keyframes scale-bend {
    0%, 100% {
        transform: scaleY(1); /* Original size */
    }
    50% {
        transform: scaleY(1.04235); /* Scale up by 0.5% */
    }
}












.bottom-content {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            z-index: 1044;
                pointer-events: auto; 
        }

        /* Text glow effects */
        .bottom-text {
            font-family:jinsong;
            color:white;
            font-size: 6vw;
            text-shadow:
                0px 0px 1vw turquoise,   /* White glow */
                0px 0px 3vw turquoise,  /* Turquoise glow */
                0px 0px 6vw royalblue;  /* Royal blue glow */
            transition: all 0.3s ease;
            z-index: 1044;
               pointer-events: auto; 
        }

        /* Image settings */
        .parrot-img {
            width: auto;
            height: 100%;
            cursor: pointer;
            margin: 0 1vw;
            transition: all 0.3s ease;
            z-index: 1044;
            cursor:url(../img/s.gif),url(../img/s.cur),inherit;
cursor:url(../img/s.gif),url(../img/s.cur),pointer;
cursor:url(../img/s.gif),url(../img/s.cur),crosshair;
cursor:url(../img/s.gif),url(../img/s.cur),default;
cursor:url(../img/s.gif),url(../img/s.cur),e-resize;
cursor:url(../img/s.gif),url(../img/s.cur),grab;
cursor:url(../img/s.gif),url(../img/s.cur),help;
cursor:url(../img/s.gif),url(../img/s.cur),move;
cursor:url(../img/s.gif),url(../img/s.cur),n-resize;
cursor:url(../img/s.gif),url(../img/s.cur),ne-resize;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),progress;
cursor:url(../img/s.gif),url(../img/s.cur),s-resize;
cursor:url(../img/s.gif),url(../img/s.cur),se-resize;
cursor:url(../img/s.gif),url(../img/s.cur),sw-resize;
cursor:url(../img/s.gif),url(../img/s.cur),text;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),wait;
cursor:url(../img/s.gif),url(../img/s.cur),not-allowed;
cursor:url(../img/s.gif),url(../img/s.cur),no-drop;
cursor:url(../img/s.gif),url(../img/s.cur),none;  
   pointer-events: auto; 
        }

        
/* Hover effect to resize text and glow */
        .bottom-container:active .bottom-text {
            font-size: 6vw;
            color:#43ffbb;
            text-shadow:
                0px 0px 1vw turqouise,   /* Increase white glow */
                0px 0px 3vw blue,  /* Increase turquoise glow */
                0px 0px 4vw royalblue;  /* Increase royal blue glow */
cursor:url(../img/s.gif),url(../img/s.cur),inherit;
cursor:url(../img/s.gif),url(../img/s.cur),pointer;
cursor:url(../img/s.gif),url(../img/s.cur),crosshair;
cursor:url(../img/s.gif),url(../img/s.cur),default;
cursor:url(../img/s.gif),url(../img/s.cur),e-resize;
cursor:url(../img/s.gif),url(../img/s.cur),grab;
cursor:url(../img/s.gif),url(../img/s.cur),help;
cursor:url(../img/s.gif),url(../img/s.cur),move;
cursor:url(../img/s.gif),url(../img/s.cur),n-resize;
cursor:url(../img/s.gif),url(../img/s.cur),ne-resize;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),progress;
cursor:url(../img/s.gif),url(../img/s.cur),s-resize;
cursor:url(../img/s.gif),url(../img/s.cur),se-resize;
cursor:url(../img/s.gif),url(../img/s.cur),sw-resize;
cursor:url(../img/s.gif),url(../img/s.cur),text;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),wait;
cursor:url(../img/s.gif),url(../img/s.cur),not-allowed;
cursor:url(../img/s.gif),url(../img/s.cur),no-drop;
cursor:url(../img/s.gif),url(../img/s.cur),none;  
   pointer-events: auto; 
        }

        /* Hover effect to resize text and glow */
        .bottom-container:hover .bottom-text {
            font-size: 6vw;
            color:#43ffbb;
            text-shadow:
                0px 0px 2vw turqouise,   /* Increase white glow */
                0px 0px 3vw blue,  /* Increase turquoise glow */
                0px 0px 4vw royalblue;  /* Increase royal blue glow */
cursor:url(../img/s.gif),url(../img/s.cur),inherit;
cursor:url(../img/s.gif),url(../img/s.cur),pointer;
cursor:url(../img/s.gif),url(../img/s.cur),crosshair;
cursor:url(../img/s.gif),url(../img/s.cur),default;
cursor:url(../img/s.gif),url(../img/s.cur),e-resize;
cursor:url(../img/s.gif),url(../img/s.cur),grab;
cursor:url(../img/s.gif),url(../img/s.cur),help;
cursor:url(../img/s.gif),url(../img/s.cur),move;
cursor:url(../img/s.gif),url(../img/s.cur),n-resize;
cursor:url(../img/s.gif),url(../img/s.cur),ne-resize;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),progress;
cursor:url(../img/s.gif),url(../img/s.cur),s-resize;
cursor:url(../img/s.gif),url(../img/s.cur),se-resize;
cursor:url(../img/s.gif),url(../img/s.cur),sw-resize;
cursor:url(../img/s.gif),url(../img/s.cur),text;
cursor:url(../img/s.gif),url(../img/s.cur),w-resize;
cursor:url(../img/s.gif),url(../img/s.cur),wait;
cursor:url(../img/s.gif),url(../img/s.cur),not-allowed;
cursor:url(../img/s.gif),url(../img/s.cur),no-drop;
cursor:url(../img/s.gif),url(../img/s.cur),none;  
   pointer-events: auto;
          }

        .bottom-container:hover .parrot-img {
            transform: scale(1.1); /* Slightly enlarge the image */
               pointer-events: auto; 
                      }

.overlay0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full viewport width */
    height: 100%; /* Full viewport height */
    background: url('../img/ratman.png') no-repeat center center; /* Background image */
    background-size: 100% 100%; /* Ensure the image covers the whole overlay */
    pointer-events: auto; /* Prevent interaction with elements beneath */
    z-index: 1024; /* Make sure the overlay is on top */
     }


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: url('../img/loomstars2.gif') no-repeat center center; /* Background image */
    background-size: contain; /* Ensure the image covers the whole overlay */
    pointer-events: none; /* Prevent interaction with elements beneath */
    z-index: 1026; /* Make sure the overlay is on top */
    }

.overlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: url('../img/loomstarsblue.gif') no-repeat center center; /* Background image */
    background-size: contain; /* Ensure the image covers the whole overlay */
    pointer-events: none; /* Prevent interaction with elements beneath */
    z-index: 1025; /* Make sure the overlay is on top */
    }

    .bottom-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vw; /* Adjust height as needed */
    display: flex;
    align-items: flex-end; /* Align children to the bottom */
    justify-content: center; /* Center children horizontally */
    z-index: 1044; /* Ensure it is above other elements */
}


@media only screen and (min-width: 10px)  {
div.blackcat {
position:fixed;
left:0px;
bottom:-5vh;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/blackcat.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:15vw;
height:10vw;
clear:both;
border:0;
z-index:1030;}
}

@media only screen and (min-width: 700px)  {
div.blackcat {
position:fixed;
left: 0px;
bottom:-5vh;
margin-bottom:0;
margin-right:0;
display:block;
background-image: url("../img/blackcat.png") ;
background-repeat:no-repeat;
background-size:100% 100%;
width:15vw;
height:10vw;
clear:both;
border:0;
z-index:1030;
}
}


