/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25-Sep-2023, 21:26:36
    Author     : adrianlines
*/

.soundeditor {
    display:none;
    position:fixed;
    left:0vw;
    top:0vh;
    width:60%;
    height:50vh;
    box-shadow:0 5px 5px black; 
    border:2px solid grey;
    padding:1%;
    background-color:grey;
    z-index:15;
}

.closesound{
    position:absolute;
    top:-5px;
    right:0;
}

.character {
    position:absolute;
    right:2vw;
    bottom:2vh;
    animation: fadeInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.5s; /* don't forget to set a duration! */
}

.charImg {
    height:33vh;
    filter: drop-shadow(0px 10px 10px black);
}

.lsscreen {
    position:relative;
    width:100%;
    height:100%;  
    background-image:radial-gradient(rgb(80,80,100),rgb(200,200,255));
    border:4px solid grey;
    
}

.lstitle {
    position:absolute;
    top:5vh;
    left:0;
    width:100%;
    text-align:center;
    font-weight:bold;
    font-size:1.5em;
}

.lstext {
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    padding:5%;
}

.lsconsole {
    position:absolute;
    top:10vh;
    left:0px;
    width:100%;
    background-color:black;
    opacity:0.4;
    color:white;
    padding:5px;
    text-align:center;
}


.lstitle:hover {
    text-shadow:0 0 5px red;
    color:rgba(100,0,0,1);
}

.lscontain {
    position:absolute;
    top:40%;
    right:5%;
    width:80%;
    height:5%;
}

.handle {
    position:absolute;
    top:50px;
    right:50px;
    width:300px;
    height:100px;
    opacity:0.7;
}

.handle:hover{opacity:1;}

.up {
    position:absolute;
    top:10px;
    right:250px;
    font-size:2em;
    opacity:0.2;
}

.up:hover {opacity:0.6;}

.uphigh {
    position:absolute;
    top:10px;
    right:200px;
    font-size:2em;
    opacity:0.2;
}

.uphigh:hover {opacity:0.6;}

.down {
    position:absolute;
    top:106px;
    right:250px;
    font-size:2em;
    opacity:0.2;
}

.down:hover {opacity:0.6;}

.downlow {
    position:absolute;
    top:106px;
    right:200px;
    font-size:2em;
    opacity:0.2;
}

.downlow:hover {opacity:0.6;}

/*1st*/
.stab {
    position:absolute;
    top:-70px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.stab:hover{opacity:0.6;}

/*2nd*/
.melt {
    position:absolute;
    top:-20px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.melt:hover{opacity:0.6;}

/*3rd*/
.spin{
    position:absolute;
    top:30px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.spin:hover{opacity:0.6;}

/*4th*/
.lock{
    position:absolute;
    top:80px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.lock:hover{opacity:0.6;}


/*5th*/
.drag{
    position:absolute;
    top:130px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.drag:hover{opacity:0.6;}

/*6th*/
.force{
    position:absolute;
    top:180px;
    right:0px;
    font-size:2em;
    opacity:0.2;
}
.force:hover{opacity:0.6;}

.forceeffect{
    position:absolute;
    top:165px;
    right:30px;
    opacity:0.8;
    width:0px;
    height:100px;
    text-align:right;
}

.blaster {
    position:absolute;
    top:-100px;
    right:50px;
    width:150px;
    opacity:0.7;
}

.blaster:hover {
    opacity:1;
}

.fire {
    position:absolute;
    top:-110px;
    right:174px;
    width:600px;
    display:none;
}

.clash {
    position:absolute;
    top:0;
    right:0;
    display:none;
}

.melting {
    position:absolute;
    top:0;
    right:0;
    display:none;    
}

.blade {
    position:absolute;
    top:76px;
    right:340px;
    width:0px;
    height:24px;
}

.bladeglow {
    position:absolute;
    top:76px;
    right:340px;
    width:0px;
    height:24px;    
}

.crack {
    position:absolute;
    top:72px;
    right:440px;
    width:20px;
    height:30px;   
    box-shadow: 0 0 10px 1px white, 0 0 30px 1px white, inset 0 0 10px white;
    background-color:rgba(255,255,255,0.7);
    border-radius:8px;
    display:none;
}


.darth {
    text-align:left;
    position:absolute;
    bottom:-2vh;
    left:0px;
    width:62vw;
    max-height:90%;
    animation: fadeInLeft; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.5s; /* don't forget to set a duration! */
}
.obi {
    text-align:right;
    position:absolute;
    bottom:-2vh;
    right:0px;
    width:51vw;
    max-height:90%;
    animation: fadeInRight; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 1.5s; /* don't forget to set a duration! */
}

.effect {color:blue;}
.effect:hover {color:white;}

.saberpng {
    position:absolute;
    left:100%;
    top:0;
    width:100%;
    z-index:1;
}

.saberbox {
    height:12vh;
    position:fixed;
    top:0;
    right:0;
    width:100%;
    padding-left:70%;
/*    background-image: linear-gradient(to right,white,black);*/
}

.saber {
  position: relative;
  width: 6px;
  height: 180px;
  background-color: white;
  border-radius: 6px/10px;
  box-shadow: 0px 0px 10px,
              0px 0px 2px inset;
  
  transform: scale(1.2) translate(0,-2vh) rotate(90deg);
  animation: glow 1.5s linear infinite;
}

.saber:before{
  content: "";
  position: absolute;
  left: -1px;
  top: 175px;
  width: 8px;
  height: 12px;
  background-image: linear-gradient(to right,
                                    transparent 1px,
                                    rgba(255, 255, 255, 0.4) 1px,
                                    rgba(255, 255, 255, 0.8) 3px,
                                    rgba(255, 255, 255, 0.3) 4px,
                                    rgba(  0,   0,   0, 0.2) 7px,
                                    transparent 7px),
                    linear-gradient(to bottom,
                                    orange 3px, black 3px, black 4px,
                                    transparent 4px, transparent 8px,
                                    black 8px, black 9px, orange 9px,
                                    orange 11px, black 11px, black 12px),
                    linear-gradient(to left,
                                    transparent 1px, orange 1px,
                                    orange 7px, transparent 7px);
  box-shadow: 1px 25px 0px 0px #555,
              2px 25px 0px 0px silver,
              2px 25px 0px 1px #222;
  
}

.saber:after{
  position: absolute;
  top: 187px;
  left: -1px;
  width: 8px;
  height: 60px;
  background-image:
                    linear-gradient(to right,
                                    rgba(255, 255, 255, 0) 0px,
                                    rgba(255, 255, 255, 0.7) 2px,
                                    rgba(255, 255, 255, 0.2) 3px,
                                    rgba(  0,   0,   0, 0.5) 8px),
                    linear-gradient(to bottom, grey 5px, black  5px,
                                    grey 6px, grey 7px, black  7px,
                                    grey 8px, grey 9px, black  9px,
                                    grey 10px, grey 11px, black 11px,
                                    grey 12px, grey 16px,
                                    black 16px, black 17px,
                                    orange 17px, orange 20px,
                                    black 20px, black 21px, transparent 21px,
                                    transparent 57px, black 57px, orange 58px),
                    linear-gradient(to right,
                                    silver 1px, black 1px, black 2px,
                                    transparent 3px, transparent 3px,
                                    silver 3px, silver 5px, black 5px, grey 6px,
                                    transparent 6px, transparent 7px,
                                    silver 7px, silver 8px),
                    linear-gradient(to bottom,
                                    grey 0px, grey 60px);
  content: "";
}

@keyframes glow {
  from {
    color: red; 
    box-shadow: 0 0 9px red; 
  }
  50% {
    color: pink; 
    box-shadow: 0 0 30px red; 
  }
  to {
    color: red; 
    box-shadow: 0 0 9px red; 
  }
}