/*
Cool glows - https://freefrontend.com/css-glow-effects/

*/

/* Intro */

/* Fonts */
@font-face {
    font-family: "apple-font";
    src: url("fonts/sanfranciscodisplay-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: "happy_squid";
    src: url("fonts/happy_squid.woff") format("woff");
}

@font-face {
    font-family: "oktober";
    src: url("fonts/oktober.woff") format("woff");
}

@font-face {
    font-family: "Jellyka_Estrya_Handwriting";
    src: url("fonts/Jellyka_Estrya_Handwriting.woff") format("woff");
}

/* Enter button */

/* Center divs into middle
https://www.youtube.com/watch?v=OyKXb-42-SQ */
div.enterButtonOuterCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*min-height: 90vh;*/
    /*min-height: 100%;*/
    height: 100%;
}

/* Orb */
div.enterButtonStyle {
    color: #fff; 
    text-align: center; 
    width: 300px;
    height: 300px;
    background-size: 400%;
    border-radius: 50%;
    z-index: 1;   
    animation: enterButtonGlowAnimate 4s linear infinite;

    box-shadow: 
    rgb(24 26 27) 0px 0px 50px inset, 
    rgb(204 0 204) 20px 0px 80px inset,
    rgb(0 204 204) -20px 0px 80px inset,
    rgb(204 0 204) 20px 0px 300px inset,
    rgb(0 204 204) -20px 0px 300px inset,
    rgb(24 26 27) 0px 0px 50px, 
    rgb(204 0 204) -10px 0px 80px,
    rgb(0 204 204) 10px 0px 80px;
    
}

:root {
    --orb-red: 106, 0, 255;
    --orb-green: 0, 204, 121;
    --orb-mid: 24, 26, 27;
}

/* https://www.csscodelab.com/html-glow-effect-translucent-marble/ */
@keyframes enterButtonGlowAnimate {
    0%,100% {
        box-shadow: 
        rgb(--orb-mid) 0px 0px 50px inset, /* blackish middle to outer */
        rgb(--orb-red) 20px 0px 80px inset, /* mid */
        rgb(--orb-green) -20px 0px 80px inset, /* mid */
        rgb(--orb-red) 20px 0px 300px inset, /* mid */
        rgb(--orb-green) -20px 0px 300px inset, /* mid */
        rgb(--orb-mid) 0px 0px 50px, /* ring shadow */
        rgb(--orb-red) -10px 0px 80px, /* ring outer red */
        rgb(--orb-green) 10px 0px 80px; /* ring outer green*/
    }
    30% {
        box-shadow: 
        rgb(24 26 27) 0px 0px 40px inset, /* whitish middle to outer */
        rgb(160, 0, 204) 20px 0px 180px inset, /* mid - green right*/
        rgb(0 204 204) -20px 0px 180px inset, /* mid - red left */
        rgb(130, 0, 204) 20px 0px 100px inset, /* mid - green right*/
        rgb(0, 247, 173) -20px 0px 100px inset, /* mid - red left */
        rgb(24 26 27) 0px 0px 20px, /* ring shadow */
        rgb(160, 0, 204) -10px 0px 90px, /* ring outer red */
        rgb(0 204 204) 10px 0px 90px; /* ring outer green*/
    }
    60% {
        box-shadow: 
        rgb(24 26 27) 0px 0px 80px inset, /* whitish middle to outer */
        rgb(160, 0, 204) 20px 0px 280px inset, /* mid - green right*/
        rgb(0 204 204) -20px 0px 280px inset, /* mid - red left */
        rgb(130, 0, 204) 20px 0px 150px inset, /* mid - green right*/
        rgb(0, 247, 173) -20px 0px 150px inset, /* mid - red left */
        rgb(24 26 27) 0px 0px 40px, /* ring shadow */
        rgb(160, 0, 204) -10px 0px 120px, /* ring outer red */
        rgb(0 204 204) 10px 0px 120px; /* ring outer green*/
    }
}

div.enterText{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    font-size: 3em;
    letter-spacing: 0.1em;
    font-family: "apple-font", Helvetica;
    font-weight: 100;
    line-height: 300px;    
    background: -webkit-repeating-linear-gradient(top, #fff 0%, #fff 46%, #ccc 52%, #666 56%, #666);    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: overlay;

    z-index: 0;
}
div.enterText:hover {
    -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
    -moz-animation: neon2 1.5s ease-in-out infinite alternate;
    animation: neon2 1.5s ease-in-out infinite alternate;
    cursor: pointer;
}
@-webkit-keyframes neon2 {
    0%,100% {
        text-shadow: 0;  
    }
    50%
    {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #becaa9, 0 0 80px #ebebeb, 0 0 100px #228DFF, 0 0 150px #228DFF;
    }
}

  
div.introText {
    color: #ddd; /* font higher quality without gradient */
    background-color: #000;
    font-size: 0.8em;
    font-family: 'apple-font', Helvetica, Arial;  
    text-align: justify;
    position: absolute;
    top: 50%;
    left: calc(50% + 260px);
    transform: translateY(-50%);
    width: 340px;
    padding:20px;
    /*animation: introTextMove 2s;*/
}
@keyframes introTextMove {
    0% {
        top: 45%;
        opacity: 0;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}
div.introText::before {
    content: '';
    background-color: #000;
    animation: introTextGlowAnimate 4s linear infinite;
    width:100%;
    height:100%;
    position: absolute;
    opacity: 0.2;
    margin:-20px; /* same size as padding of intoText */
}
@keyframes introTextGlowAnimate {
    0%,100% {
        box-shadow: 
        rgb(--orb-mid)   0px 0px 20px , /* blackish middle to outer */
        rgb(--orb-red)   20px 0px 40px , /* mid */
        rgb(--orb-green) -20px 0px 40px , /* mid */
        rgb(--orb-red)   20px 0px 70px , /* mid */
        rgb(--orb-green) -20px 0px 70px , /* mid */
        rgb(--orb-mid)   0px 0px 20px, /* ring shadow */
        rgb(--orb-red)   -10px 0px 40px, /* ring outer red */
        rgb(--orb-green) 10px 0px 40px; /* ring outer green*/
    }
    30% {
        box-shadow: 
        rgb(24 26 27)    0px 0px 30px , /* blackish middle to outer */
        rgb(160, 0, 204) 20px 0px 40px , /* mid */
        rgb(0 204 204)   -20px 0px 40px , /* mid */
        rgb(130, 0, 204) 20px 0px 70px , /* mid */
        rgb(0, 247, 173) -20px 0px 70px , /* mid */
        rgb(24 26 27)    0px 0px 40px, /* ring shadow */
        rgb(160, 0, 204) -10px 0px 40px, /* ring outer red */
        rgb(0 204 204)   10px 0px 40px; /* ring outer green*/
    }
    60% {
        box-shadow: 
        rgb(24 26 27)    0px 0px 25px , /* blackish middle to outer */
        rgb(160, 0, 204) 20px 0px 40px , /* mid */
        rgb(0 204 204)   -20px 0px 40px , /* mid */
        rgb(130, 0, 204) 20px 0px 70px , /* mid */
        rgb(0, 247, 173) -20px 0px 70px , /* mid */
        rgb(24 26 27)    0px 0px 25px, /* ring shadow */
        rgb(160, 0, 204) -10px 0px 40px, /* ring outer red */
        rgb(0 204 204)   10px 0px 40px; /* ring outer green*/
    }
}



/* Styles */
div.title_graphics {
    color: #fff;  
    
    font-size: 4em;
    font-family: "happy_squid";
    font-weight: 100;
    
    text-align: center;  
       
    position:absolute;
    
    width: 350px;
    height: 100px; /* Needed for gradient height */
    
    background: -webkit-repeating-linear-gradient(top, #fff 0%, #fff 20%, #ddd 40%, #555 80%, #555);    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 255, 255, 0.5);
    animation: opacity_anim_entry_delayed_short 8s ease-out;
}

div.title_graphics_mirror {
    color: #fff;  
    
    font-size: 4em;
    font-family: "happy_squid";
    font-weight: 100;
    
    text-align: center;       

    width: 350px;
    height: 100px; /* Needed for gradient height */  
         
    position: absolute;
    margin-top: 51px;

    /* Change the position of transformed element */
    transform-origin: center;
    /*  Rotates around x-axis */
    transform: rotateX(180deg);
    
    background-image: linear-gradient(0deg, #777 0, transparent 80%);
    -webkit-background-clip: text;
    color: transparent;
    
    animation: opacity_anim_entry_delayed_short 8s ease-out;
}

div.title_aid {
    color: #fff;
    /*background-color: #111;*/

    font-size: 2.6em;
    font-family: 'happy_squid';      

    text-align: center;
    position: absolute;
    width: 150px;
    height: 100px;
    
    margin-left:310px;
    margin-top: 31px;
    
    background: -webkit-repeating-linear-gradient(left, #ff00b4	0%, #00ffff	50%, #00ff00 65%, #ffff00 85%, #ffff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
   
    transform: perspective(133px) rotateY(-45deg) skew(0deg, 8deg);
    animation: opacity_anim_entry_delayed_long 7s ease;
}

div.title_aid_blur {    
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5);
    mix-blend-mode: difference;
    filter: blur(3px)  saturate(10);
    animation: opacity_anim_entry_delayed_long 7s ease;
}

div.title_aid_mirror {
    color: #fff;
    /*background-color: #111;*/

    font-size: 2.6em;
    font-family: 'happy_squid';      

    text-align: center;
    position: absolute;
    width: 150px;
    height: 100px;
    
    margin-left:310px;
    margin-top: 28px;
    
    background: -webkit-repeating-linear-gradient(left, rgba(255, 00, 180, 0.1) 0%, rgba(0, 255, 255, 0.1) 50%, rgba(0, 255, 0, 0.08) 65%, rgba(255, 255, 0, 0.05) 85%, rgba(255, 255, 0, 0.05));  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
              
    transform-origin: center;
    transform: rotateX(180deg) perspective(133px) rotateY(-45deg) skew(0deg, -8deg);  
    animation: opacity_anim_entry_delayed_long 7s ease;
}

.circle_green {
    position: absolute;
    width: 0;
    height: 0;
    margin-left:100px;
    margin-top:50px;
    border-radius: 50%;
    background-color: #fff;
    /*box-shadow:*/
        /* x x
        roundness - higher is bigger glow
        size - of glow
        color
        */
        /*0 0 120px 45px #002f1e,  0 0 109px 43px #1b8152,  0 0 161px 55px #0e4362;*/
    animation: circle_green_glow 3s ease-in-out infinite alternate;
}

.circle_red {
    position: absolute;
    width: 0;
    height: 0;
    margin-left:300px;
    margin-top:50px;
    border-radius: 50%;
    background-color: #fff;
    /*box-shadow: 0 0 186px 92px #4c001c, 0 0 174px 62px #33173f, 0 0 154px 103px #36315e;*/
    animation: circle_red_glow 6s ease-in-out infinite alternate;
        
}

/*.circle_pink {
    width: 0;
    height: 0;
    margin-left:calc(50% - 10px);
    margin-top:0;
    border-radius: 50%;
    background-color: #fff;
    animation: circle_pink_glow 3s ease-in-out infinite alternate;
}

.circle_pink_small {
    width: 0;
    height: 0;
    margin-left:calc(50% - 180px);
    margin-top:0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 60px 30px #fff,  0 0 100px 60px #f0f, 0 0 140px 90px #0ff;
}*/

.title_floor_line {
    width: 400px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 100%, transparent);
    height: 1px;
    position: absolute;
    margin-top: 75px;  
    margin-left: -25px;    
    /*filter: blur(1px)*/
}

/* Title light lines */
.title_light_line_base {
    width: 150px;
    height: 1px;
    background-image: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 100%, transparent);
    position: absolute;
    margin-top: 45px;  
    margin-left: -49px;
    
    transform: rotate(90deg);
    transform-origin: center; 
}
.title_light_line_base::before {
    content: '';
    width: 100%;
    height: 3px;
    background-image: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 100%, transparent);
    position: absolute;

    transform: rotate(180deg);
    transform-origin: center;
   
    filter: blur(2px);
}

.title_light_line_1 {
    width: 180px;
    margin-top: 45px;  
    margin-left: -64px;
    transform: rotate(90deg);
    /* name duration timingFunc delay iteration direction*/
    animation: title_light_line_1_entry 2s ease-out;
}
.title_light_line_2 {
    width: 106px;
    margin-top: 45px;  
    margin-left: 49px;
    transform: rotate(90deg);
    animation: title_light_line_2_entry 3s ease-out;
}
.title_light_line_3 {
    width: 130px;
    margin-top: 58px;  
    margin-left: 64px;
    transform: rotate(45deg);
    animation: title_light_line_3_entry 3s ease-out;
}
.title_light_line_4 {
    width: 190px;
    margin-top: 5px;  
    margin-left: 99px;
    transform: rotate(90deg);
    animation: title_light_line_4_entry 2s ease-out;
}
.title_light_line_5 {
    width: 106px;
    margin-top: 45px;  
    margin-left: 185px;
    transform: rotate(90deg);
    animation: title_light_line_5_entry 4s ease-out;
}
.title_light_line_6 {
    width: 170px;
    margin-top: 14px;  
    margin-left: 194px;
    transform: rotate(0deg);
    animation: title_light_line_6_entry 4s ease-out;
}


/* Animations */
@-webkit-keyframes opacity_anim_entry {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}
@-webkit-keyframes opacity_anim_entry_delayed_short {
    0%, 5% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}
@-webkit-keyframes opacity_anim_entry_delayed_long {
    0%, 30% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes title_light_line_1_entry {
    from {
        margin-top: -30px;
        opacity: 0.0;
    }
    to {
        margin-top: 45px;
        opacity: 1.0;
    }
}
@-webkit-keyframes title_light_line_2_entry {
    from {
        margin-top: 95px;
        opacity: 0.0;
    }
    to {
        margin-top: 45px;
        opacity: 1.0;
    }
}
@-webkit-keyframes title_light_line_3_entry {
    from {
        margin-top: 88px;
        margin-left: 94px;
        opacity: 0.0;
    }
    to {
        margin-top: 58px;
        margin-left: 64px;
        opacity: 1.0;
    }
}
@-webkit-keyframes title_light_line_4_entry {
    from {
        margin-top: 115px;
        opacity: 0.0;
    }
    to {
        margin-top: 5px;
        opacity: 1.0;
    }
}
@-webkit-keyframes title_light_line_5_entry {
    from {
        margin-top: 135px;
        opacity: 0.0;
    }
    to {
        margin-top: 45px;
        opacity: 1.0;
    }
}
@-webkit-keyframes title_light_line_6_entry {
    from {
        margin-left: 284px;
        opacity: 0.0;
    }
    to {
        margin-left: 194px;
        opacity: 1.0;
    }
}

/*
Glow effect - https://codersblock.com/blog/creating-glow-effects-with-css
Animation - https://www.w3schools.com/howto/howto_css_glowing_text.asp
*/
@-webkit-keyframes circle_red_glow {
    from {
        box-shadow: 0 0 186px 80px #390418, 0 0 174px 52px #361245, 0 0 100px 80px #272249;
    }
    to {
        box-shadow: 0 0 186px 110px #371622, 0 0 174px 62px #240831, 0 0 154px 100px #29244b;
    }
}
 
@-webkit-keyframes circle_green_glow {
    from {
        box-shadow: 0 0 80px 80px #002f1e,  0 0 100px 40px #0b5030,  0 0 161px 50px #0b3954;
    }
    to {
        box-shadow: 0 0 120px 110px #011f14,  0 0 110px 70px #15633f,  0 0 161px 60px #0e547d;
    }
}

@-webkit-keyframes circle_pink_glow {
    from { 
        box-shadow: 0 0 60px 30px #fff,  0 0 100px 60px #f0f, 0 0 140px 90px #0ff;
    }
    to {
        box-shadow: 0 0 60px 30px #fff,  0 0 100px 60px #f0f, 0 0 90px 70px #0ff;
    }
}


/* Main text */
p.welcome_style {
    color: #fff;
    font-size: 0.8em;
    font-family: 'happy_squid';  
    letter-spacing: 0.1em;
    line-height: 1.8;    
    text-align: justify;
    margin: 0 auto;
    width: 500px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    animation: opacity_anim_entry 7s ease-in;
}

p.rules {
    color: #fff;
    font-size: 2.5em;
    font-family: 'oktober';  
    padding-bottom: 20px;    
    text-align: justify;
    margin: 0 auto;
    width: 500px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    animation: opacity_anim_entry 7s ease-in;
}

p.astral_sig {
    color: #fff;
    font-size: 5em;
    font-family: 'Jellyka_Estrya_Handwriting';  
    
    text-align: justify;
    margin: 0 auto;
    width: 500px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 0, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.5);
    animation: opacity_anim_entry 7s ease-in;
}




/* Sound icon */
div.sound_style {
    width: 28px;
    height: 28px;
    opacity: 0.2;
    background-image: url('SoundOn.png'); 
}
div.sound_style:hover{
    filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.5));
    /*mix-blend-mode: overlay;*/
    cursor: pointer;
    opacity: 1.0;
}
.sound_off { background-image: url('SoundOff.png'); }


/* 
CSS overrides for the nanogallery 
*/

/* Album titles */
.nanogallery_gallerytheme_custom_graphics_aid_albums .nGY2GThumbnailAlbumTitle {
    color: #ccc;
    text-shadow: none;
    font-size: 0.8em;    
    font-family: 'apple-font', Helvetica, Arial;  
    /*letter-spacing: 0.1em;*/
    margin-bottom: 5px;
          
    background: -webkit-linear-gradient(#ddd, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

/* Album - counter of imgs */
.nGY2 .nGY2GThumbnailIconText {
    color: #fff;
    text-shadow: none;
    font-size: 0.7em;    
    font-family: Helvetica, Arial;  
    letter-spacing: 0.2em;
          
    background: -webkit-linear-gradient(#aaa, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

/* Thumbnail labels */
.nanogallery_gallerytheme_custom_graphics_aid_albums .nGY2GThumbnailImageTitle {   
    color: #fff;
    text-shadow: none;
    font-size: 1em;    
    font-family: 'apple-font', Helvetica, Arial;  
    text-transform: uppercase;
    /*font-weight: bold;*/
    margin-bottom: 2px;
    
    background: -webkit-linear-gradient(#eee, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Back button, when inside an album*/
.nanogallery_gallerytheme_custom_graphics_aid_albums .nGY2Breadcrumb .oneItem {
    color: #fff;
    text-shadow: none;
    font-size: 1em;    
    font-family: Helvetica, Arial;  
    text-transform: uppercase;
    font-weight: bold;    
    background: -webkit-linear-gradient(#eee, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nGY2Icon-left-open:before {
    content: '\1F3E0  HOME  \25c0';
    color: #fff;
    text-shadow: none;
    font-size: 1em;    
    font-family: Helvetica, Arial;  
    letter-spacing: 0.2em;
          
    background: -webkit-linear-gradient(#aaa, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}