/* Glow Buddies CSS file. */
/*----------------------------*/

.bodyDefaultClass {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

/*-- Menu classes --*/
.menuContainer{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    border: 9px ridge gray;
    border-radius: 25px;
    background-color: rgb(0, 68, 204, 0.6);
    
    transform: translate(-50%,-50%);
    opacity: 0;
    
    transition: opacity 0.3s;
    
    z-index: 5;
    
    overflow: auto;
    user-select: none;
}

.settingArea{
    margin: 6px;
    border: 2px solid white;
    border-radius: 10px;
    padding: 8px;
}

.settingName{
    margin-bottom: 8px;
    
    color: white;
    text-align: center;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: underline;
}

.settingInput{
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    text-align: center;
}

.labelText{
    margin-right: 8px;
    
    color: white;
    font-size: 19px;
    font-family: sans-serif;
}

.subSetting{
    margin: 8px;
    margin-top: 12px;
    padding-bottom: 10px;
    border: 1px solid white;
    border-radius: 14px;
}

.subLabel{
    margin-top: 8px;
    margin-bottom: 4px;
    color: white;
    text-align: center;
    font-size: 19px;
    font-family: sans-serif;
}

.customColourSetting{
    display: inline-block;
    width: 95%;
    height: 30px;
    border-radius: 0%;
    background-image: linear-gradient(to right, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 5%, hsl(0, 70%, 65%) 5%, hsl(30, 70%, 65%), hsl(60, 70%, 65%), hsl(90, 70%, 65%), hsl(120, 70%, 65%), hsl(150, 70%, 65%), hsl(180, 70%, 65%), hsl(210, 70%, 65%), hsl(240, 70%, 65%), hsl(270, 70%, 65%), hsl(300, 70%, 65%), hsl(320, 70%, 65%), hsl(340, 70%, 65%) 95%, rgb(0,0,0,0) 95%, rgb(0,0,0,0) 100%);
}

.customColourSettingGlow{
    display: inline-block;
    height: 30px;
    border-radius: 0%;
    background-image: linear-gradient(to right, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 5%, hsl(0, 65%, 80%) 5%, hsl(30, 65%, 80%), hsl(60, 65%, 80%), hsl(90, 65%, 80%), hsl(120, 65%, 80%), hsl(150, 65%, 80%), hsl(180, 65%, 80%), hsl(210, 65%, 80%), hsl(240, 65%, 80%), hsl(265, 65%, 80%), hsl(300, 65%, 80%), hsl(320, 65%, 80%), hsl(340, 65%, 80%) 95%, rgb(0,0,0,0) 95%, rgb(0,0,0,0) 100%);
}

.noteText{
    margin-top: 0px;
    margin-bottom: 5px;
    color: white;
    text-align: center;
    font-size: 15px;
    font-family: sans-serif;
}

.buttonStyle{
    
}

    /*-- The FORBIDDEN styles --*/
    /*   (caution: FORBIDDEN)   */
.FORBIDDENsettingArea{
    position: relative;
    background-color: black;
    margin: 6px;
    border: 2px solid darkred;
    border-radius: 10px;
    padding: 8px;
}

.FORBIDDENsettingName{
    margin-bottom: 8px;
    
    color: red;
    text-align: center;
    font-size: 33px;
    font-family: impact;
    text-decoration: underline;
}

.FORBIDDENwall{
    position: absolute;
    top: 55px;
    left: 0px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 55px);
    border: 14px outset gray;
    background-color: lightgray;
    
    cursor: pointer;
    
    z-index: 5;
}

.FORBIDDENwallText{
    display: flex;
    box-sizing: border-box;
    padding: 12px;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    
    text-align: center;
}

.wallTextStyle{
    font-size: 23px;
    font-family: sans-serif;
}

.redX{
    color: red;
    font-size: 95px;
    font-family: sans-serif;
    font-weight: bolder;
    text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black, 0px 0px 5px black,  6px 6px 2px black;
}

@keyframes moveUp{
    0% {transform: translateY(0%)}
    100% {transform: translateY(-40%)}
}

.FORBIDDENbuttonStyle{
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 4px;
    border: 2px solid darkgray;
    border-radius: 3px;
    
    font-size: 16px;
}

.FORBIDDENclearButton{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8px;
    color: green;
    border: 4px solid darkgreen;
    border-radius: 4px;
    
    font-size: 19px;
    font-weight: bold;
}

.FORBIDDENbuttonStyle:hover, .FORBIDDENclearButton:hover {
    filter: brightness(80%);
}

.cubeBuddy{
    position: absolute;
    border-radius: 0%;
}

.snakeBuddy{
    position: absolute;
    border-radius: 50%;
    filter: drop-shadow(-10px 0px green) drop-shadow(-20px 0px green) drop-shadow(-30px 0px green) ;
}

@keyframes spiral1{
    0%  {transform: rotate(0deg)}
    100%  {transform: rotate(360deg)}
}

.bBuddy{
    position: absolute;
    border-radius: 50%;
}

.bBuddy::after{
    content: "🅱️";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 26px;
}

@keyframes dimensionalShiftX{
    0%  {transform: rotateX(0deg)}
    100%  {transform: rotateX(360deg)}
}

@keyframes dimensionalShiftY{
    0%  {transform: rotateY(0deg)}
    100%  {transform: rotateY(360deg)}
}

.indecentBuddy{
    position: absolute;
    border-radius: 50%;
}

.indecentBuddy::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 70%;
    left: 50%;
    width: 150%;
    height: 35%;
    background-color: black;
    transform: translate(-50%, -50%);
}

.bdduy{
    position: absolute;
    border-radius: 50%;
    
    scale: 1 0.6;
}

.notTheBees{
    position: absolute;
    border-radius: 50%;
    
    animation: shake 1s ease infinite;
}

.beeText{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 150px;
    
    text-align: center;
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
    text-shadow: 0px 0px 2px rgb(255, 255, 255, 0.7), 0px 0px 2px rgb(255, 255, 255, 0.7), 0px 0px 3px rgb(255, 255, 255, 0.7), 0px 0px 5px rgb(255, 255, 255, 0.7);
    
    user-select: none;
}

@keyframes shake {
    10%   {transform: translate(-3px,2px)}
    20%   {transform: translate(2px,-1px)}
    30%   {transform: translate(-2px,-1px)}
    40%   {transform: translate(1px,3px)}
    50%   {transform: translate(0px,0px)}
    60%   {transform: translate(-1px,-2px)}
    70%   {transform: translate(-3px,1px)}
    80%   {transform: translate(0px,-3px)}
    90%   {transform: translate(2px,0px)}
}

/*-- Glow Buddy classes --*/
.buddy{
    position: absolute;
    border: 0px dashed black;
    border-radius: 50%;
}

/*-- --*/

@keyframes travelStraight{
    0%  {transform: translateX(0px)}
    100%  {transform: translateX(1000px)}
}

@keyframes fadeIn{
    0%  {opacity: 0}
    100%  {opacity: 1}
}

@keyframes fadeOut{
    0%  {opacity: 1}
    100%  {opacity: 0}
}

@keyframes wiggle1{
    0%  {transform: translateY(0px)}
    50%  {transform: translateY(33px)}
    100%  {transform: translateY(0px)}
}

@keyframes wiggle2{
    0%  {transform: translateY(0px)}
    50%  {transform: translateY(28px)}
    100%  {transform: translateY(0px)}
}

@keyframes wiggle3{
    0%  {transform: translateY(0px)}
    50%  {transform: translateY(35px)}
    100%  {transform: translateY(0px)}
}

@keyframes squinch1{
    0%  {transform: translateX(10px)}
    50%  {transform: translateX(30px)}
    100%  {transform: translateX(10px)}
}

@keyframes squinch2{
    0%  {transform: translateX(8px)}
    50%  {transform: translateX(30px)}
    100%  {transform: translateX(8px)}
}

@keyframes squinch3{
    0%  {transform: translateX(10px)}
    50%  {transform: translateX(34px)}
    100%  {transform: translateX(10px)}
}

@keyframes pulseSmall1{
    0%  {transform: scale(1)}
    50%  {transform: scale(1.2)}
    100%  {transform: scale(1)}
}

@keyframes pulseSmall2{
    0%  {transform: scale(1)}
    47%  {transform: scale(1.2)}
    100%  {transform: scale(1)}
}

@keyframes pulseSmall3{
    0%  {transform: scale(1)}
    52%  {transform: scale(1.2)}
    100%  {transform: scale(1)}
}

@keyframes flicker1{
    0% {filter:brightness(1)}
    10% {filter:brightness(1)}
    13% {filter:brightness(0.83)}
    16% {filter:brightness(1)}
    20% {filter:brightness(1)}
    33% {filter:brightness(1)}
    36% {filter:brightness(0.84)}
    39% {filter:brightness(1)}
    45% {filter:brightness(1)}
    48% {filter:brightness(0.84)}
    51% {filter:brightness(1)}
    61% {filter:brightness(1)}
    64% {filter:brightness(0.81)}
    69% {filter:brightness(1)}
    88% {filter:brightness(1)}
    91% {filter:brightness(0.83)}
    94% {filter:brightness(1)}
    100% {filter:brightness(1)}
}

@keyframes flicker2{
    0% {filter:brightness(1)}
    10% {filter:brightness(1)}
    11% {filter:brightness(0.81)}
    16% {filter:brightness(1)}
    20% {filter:brightness(0.84)}
    33% {filter:brightness(1)}
    38% {filter:brightness(0.86)}
    41% {filter:brightness(1)}
    45% {filter:brightness(1)}
    46% {filter:brightness(0.83)}
    50% {filter:brightness(1)}
    61% {filter:brightness(1)}
    67% {filter:brightness(0.83)}
    69% {filter:brightness(1)}
    80% {filter:brightness(1)}
    82% {filter:brightness(0.84)}
    91% {filter:brightness(1)}
    100% {filter:brightness(1)}
}

@keyframes flicker3{
    0% {filter:brightness(1)}
    10% {filter:brightness(1)}
    14% {filter:brightness(0.83)}
    16% {filter:brightness(1)}
    29% {filter:brightness(0.85)}
    33% {filter:brightness(1)}
    34% {filter:brightness(0.80)}
    41% {filter:brightness(1)}
    45% {filter:brightness(1)}
    48% {filter:brightness(0.81)}
    50% {filter:brightness(1)}
    61% {filter:brightness(1)}
    68% {filter:brightness(0.83)}
    69% {filter:brightness(1)}
    80% {filter:brightness(1)}
    85% {filter:brightness(0.82)}
    91% {filter:brightness(1)}
    100% {filter:brightness(1)}
}

@keyframes rainbow{
    0%  {filter: hue-rotate(0deg)}
    100%  {filter: hue-rotate(360deg)}
}


/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/**/



/*===== GENERAL CLASSES =====*/




/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/
/*-- --*/