/*
Author:  Leonard Garcia
All Rights Reserved
Created on : Sep 19, 2021, 11:20:51 AM
Modified on December 29, 2025.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: darkgreen;
    background-image: url("../images/WOEHome.jpg");   /* ("../images/wizBG.jpg"); */
    background-repeat: no-repeat;
    background-color: black;
}
::-webkit-scrollbar {
    width: 1.2em;
    height: 1em;
}

::-webkit-scrollbar-track {
  background-color: hsl(120 75% 50%/1);
  border-radius: 100vw;
  margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
  background: hsl(120 100% 20% / 1);
  border: 0.25em solid hsl(120 100% 20% / 1);
  border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(120 100% 10% / 1);
}

body {
  border: none !important;
  outline: none !important;
}

h1 {
    position: absolute;
    top:      15px;
    left:     290px;
}

.neon-wrapper {
  --neonColor: cyan;
  position: relative;
  display: inline-block;
  padding: 12px;
}

.neon-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--neonColor);
  border-radius: 10px;
  pointer-events: none;
  box-sizing: border-box;

  /* Neon glow */
  box-shadow:
    0 0 8px var(--neonColor),
    0 0 16px var(--neonColor),
    0 0 24px var(--neonColor),
    0 0 40px var(--neonColor);

  /* Running border effect */
  animation: neon-run 5s linear infinite;
}

@keyframes neon-run {
  0%   { clip-path: inset(0 100% 0 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 100%); }
  75%  { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

#vid {
    position: relative;
    top:     50px;
    left:    85px;
    background-color: black;
    float: left;
    margin: 0px 0px 5px 15px; /*top, right, bottom, left */
}

#wizwel {
    border: 4px;
    border-color: gold;
    border-style: ridge;
}

button {
    font-weight: 600;
    background-color:#42F551;
    padding: .2rem;
    border: 2px;
    border-style: solid;
    border-color:#FFD700;
}
.video-buttons {
    position: relative;
    top:     285px;
    left:    -173px;
    margin-top: 20px;
}

.ww {
    width:  100%;
    height: 200px;
    margin: 0px 0px 5px 5px; /*top, right, bottom, left */
}
.orbimage {
    /*-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);*/
    background-color: transparent;  
    text-align:left;
    margin-top: 20px;
    margin-bottom:0px;
    padding:0px;
    z-index: 0;
}
#endTable  {
    position: absolute;
    top:   210px;
    left:  100px;
}
#candleoff {
    cursor: url(../images/match.cur), default;  
    background-color: transparent;  
    text-align:left;
    max-width: 100%;
    height: auto;
    position: relative;
    top:  260px; 
    left: 310px;                    
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    z-index: 0;
}

#candleoff:hover:after {
    content: attr(title);
    display: block;
    position: absolute;
    bottom: -45px;
    left: 0;
    z-index: 2;
    text-align: center;
}

#candleon {
    background-color: transparent;  
    max-width: 100%;
    height: auto;
    text-align:left;
    position: relative;
    top:  260px; 
    left: 310px;                         
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    z-index: 0;
}

#advert {
    position: relative;
    top:  18rem; 
    left: 2rem;
    width: 10rem; height: 14rem;
}
/*
#g, #p, #sp, #v, #w {
    position: relative;
    top:  55px; 
    left: -250px;
};
*/
/********************** Around Town *************************************/
/**********************             ************************************/
#admedia {
    position: absolute;
    top:  200px;
    left: 550px;
}
#LA {
    cursor: url(../images/hand.cur), auto; /*IE and Edge*/
    cursor: url(../images/hand.png) 4 12, auto;  /*chrome, firefox*/
    border-radius: 25px;
    position: relative;
    left: -500px;
    top:  420px;
    margin-bottom: 5px;
}
#LA:hover {
    -moz-box-shadow: 0px 0px 3px 6px darkgreen;
        -webkit-box-shadow: 0px 0px 3px 6px darkgreen;
            box-shadow: 0px 0px 3px 6px darkgreen;
}

.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: none;*/
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 126px;
    background-color: yellowgreen;    
    color: darkred;
    font-weight: 600;
    font-family: cursive;
    text-align: center;
    border-radius: 10px;
    border-color: darkgreen;
    border-width: 10px;
    padding: 5px 0;
    position: absolute;
    top:  285px;
    z-index: 1;
    /*bottom: -250%;   */
    left: -260%;    
    margin-left: -25px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: relative;
    top: 100%;    /* was 100%  */
    left: 50%;    /* was 50% */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: yellowgreen transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
/**********************************************************************/
#footer {
        background-color:black;
        color:white;
        clear:both;
        text-align:center;
        position: absolute;
        top: 710px;
        left:  600px;
        padding:5px;
        margin-top: 10px;
}
  
/************************* for tablet ********************************/
/************************    850 & 450      ********************************/
@media only screen and (max-width : 1024px) and (min-width: 540px) {
    body {
        color: darkgreen;
        background-image: url("../images/wizBG.jpg");
        background-repeat: no-repeat;
        background-color: black;
    }
        
    h1{
        font-size: 4em;
    }    
    #headline {
        font-size: 3rem;
        margin-left: -15rem;
    }
    #vid {
        position: relative;
        top:   50px;
        left:  40px;
        clear: both;
        background-color: black;
    }
    #wizwel {
        border: 4px;
        border-color: gold;
        border-style: ridge;
    }
    .ww {
        width:  100%;
        height: 200px;
        margin: 0px 0px 5px 5px; /*top, right, bottom, left */
    }
    
    .video-buttons {
        display: inline-block;
        position: relative;
        top:     260px;
        left:    -220px;
        margin-top: 20px;
    }
    .orbimage {
        /*-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);*/
        background-color: transparent;  
        text-align:left;
        position: relative;
        top:  55px; 
        left: -310px;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }
    #endTable  {
        display: none;
        position: absolute;
        top:   210px;
        left:  60px;
    }
    #candleoff {
        background-color: transparent;  
        text-align:left;
        max-width: 100%;
        height: auto;
        position: relative;
        top:  280px; 
        left: 50px;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }

    #candleoff:hover:after {
            content: attr(title);
            display: block;
            position: absolute;
            bottom: -45px;
            left: 0;
            z-index: 2;
            text-align: center;
    }
    #candleon {
        background-color: transparent;  
        max-width: 100%;
        height: auto;
        text-align:left;
        position: relative;
        top:  300px; 
        left: 173px;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }
    
    #admedia {
        position: absolute;
        top:  240px;
        left: 150px;
    }
    
    .verbs {
        position: absolute;
        top:  240px;
        left: 150px;     
    }
    
    #LA {
        cursor: url(../images/hand.cur), auto; /*IE and Edge*/
        cursor: url(../images/hand.png) 4 12, auto;  /*chrome, firefox*/
        border-radius: 25px;
        position: relative;
        left: -100px;
        top:  420px;
        margin-bottom: 5px;
    }
    #LA:hover {
        -moz-box-shadow: 0px 0px 3px 6px darkgreen;
            -webkit-box-shadow: 0px 0px 3px 6px darkgreen;
                box-shadow: 0px 0px 3px 6px darkgreen;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        /*border-bottom: none;*/
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 126px;
        background-color: yellowgreen;    
        color: darkred;
        font-weight: 600;
        font-family: cursive;
        text-align: center;
        border-radius: 10px;
        border-color: darkgreen;
        border-width: 10px;
        padding: 5px 0;
        position: absolute;
        top:  285px;
        z-index: 1;
        /*bottom: -250%;   */
        left: -260%;    
        margin-left: -25px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: relative;
        top: 100%;    /* was 100%  */
        left: 50%;    /* was 50% */
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: yellowgreen transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    #footer {
        position:absolute;
        top:  750px;
        left: 450px;
        margin-top: 50px;
    }    
}
/******************************************************************************/
/* FOR SMARTPHONE ***********************SMARTPHONE*********************/
/*********************************************************************
**********************************************************************/
@media only screen and (max-width : 449px) and (min-width: 280px) {
    body {
        color: darkgreen;
        background-image: url("../images/WOECellHome.jpg"); /*  ("../images/wizBG.jpg"); */
        background-repeat: no-repeat;
        background-color: black;
        width: 400px;
    }
    h1{
        font-size: 1em;
    }  
    .image-text {
        font-size: 57px !important;
    }
    
    #vid {
        position: relative;
        top:   85px;
        left:  55px;
        clear: both;
        background-color: black;
    }
    #wizwel {
        border: 4px;
        border-color: gold;
        border-style: ridge;
    }
    button {
        margin-left: .1rem;
    }
    .video-buttons {
        display: inline-block;
        position: relative;
        top:     70px;
        left:    70px;
        margin-top: 20px;
    }
    
    .ww {
        width:  100%;
        height: 200px;
        margin: 0px 0px 5px 5px; /*top, right, bottom, left */
    }
        
    .orbimage {
        /*-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);*/
        background-color: transparent;  
        text-align:left;
        
        position: absolute;
        top:  300px; 
        left: 10px;
        
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }
    #endTable  {
        display: none;
        position: absolute;
        top:   210px;
        left:  100px;
    }
    #candleoff {
        background-color: transparent;  
        text-align:left;
        max-width: 100%;
        height: auto;
        position: relative;
        top:   82px; 
        left:  165px;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }

    #candleoff:hover:after {
            content: attr(title);
            display: block;
            position: absolute;
            bottom: -45px;
            left: 0;
            z-index: 2;
            text-align: center;
    }
    #candleon {
        background-color: transparent;  
        max-width: 100%;
        height: auto;
        text-align:left;
        position: relative;
        top:  82px; 
        left: 165px;
        margin-top:0px;
        margin-bottom:0px;
        padding:0px;
        z-index: 0;
    }
    #g, #p, #sp, #v, #w {
        position: absolute;
        
    };
    
    /***************************************/
    #admedia {
        position: absolute;
        top:  265px;
        left: 550px;
    }
    #LA {
        cursor: url(../images/hand.cur), auto; /*IE and Edge*/
        cursor: url(../images/hand.png) 4 12, auto;  /*chrome, firefox*/
        border-radius: 25px;
        position: relative;
        left: -500px;
        top:  480px;
        margin-bottom: 5px;
    }
    #LA:hover {
        -moz-box-shadow: 0px 0px 3px 6px darkgreen;
            -webkit-box-shadow: 0px 0px 3px 6px darkgreen;
                box-shadow: 0px 0px 3px 6px darkgreen;
    }

    .tooltip {
        position: relative;
        display: inline-block;
        /*border-bottom: none;*/
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 126px;
        background-color: yellowgreen;    
        color: darkred;
        font-weight: 600;
        font-family: cursive;
        text-align: center;
        border-radius: 10px;
        border-color: darkgreen;
        border-width: 10px;
        padding: 5px 0;
        position: absolute;
        top:  285px;
        z-index: 1;
        left: -260%;    
        margin-left: -25px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: relative;
        top: 100%;    /* was 100%  */
        left: 50%;    /* was 50% */
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: yellowgreen transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    #footer {
        position:absolute;
        top: 750px;
        left: 140px;
        margin-top: 50px;
    }    
}