/*-------------------FONTS----------------------*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playwrite+VN:wght@100..400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
/*-------------------FONTS 2----------------------*/
.ff_notojp {
  font-family: 'Noto Sans JP';
}
.ff_roboto {
  font-family: 'Roboto';
}
.ff_playwrite {
  font-family: 'Playwrite VN';
}
.ff_expgot{
  font-family: 'Special Gothic Expanded One';
}
.ff_yuji {
  font-family: 'Yuji Boku';
}
.ff_anton {
  font-family: 'Anton';
}
.ff_pixelify {
  font-family: 'Pixelify Sans';
}
.ff_tiny5 {
  font-family: 'Tiny5';
}
.ff_ntsymbols{
  font-family: 'Noto Sans Symbols 2';
}
.ff_jers10{
  font-family: 'Jersey 10';
}

.ff_bmplex{
  font-family: 'IBM Plex Sans JP';
}

.ff_serif{
  font-family: sans-serif;
}

.ff_micro5 {
  font-family: 'Micro 5';
}

.ff_notoemoji {
  font-family: 'Noto Color Emoji';
}


/*-------------------FONTS 2----------------------*/



/*COLORS*/

.cl_zzred {color: #ff0000;}

.cl_zzblack {color: #000000;}

.cl_zzorange {color: #ff7b00;}

.cl_zzyellow {color: #fcc145;}


.cl_zzbluehard {color: #00657f;}

.cl_zzbluemid {color: #a3a8ff;}

.cl_zzbluesoft {color: #d1d1ff;}

.cl_zzwhite {
   color: #ffffff; /* softblue */
}

/*COLORS*/

/*BACKGROUNDS*/
.bg_zzred {
    background-color: #ff0000; /* red */
}

.bg_zzblack {
    background-color: #000000; /* black */
}

.bg_zzyellow {
    background-color: #fcc145; /* yellow */
}

.bg_zzorange {
    background-color: #ff7b00; /* orange */
}

.bg_zzbluehard {
    background-color: #00657f; /* hardblue - corrected based on typical hex format */
}

.bg_zzbluemid {
    background-color: #a3a8ff; /* midblue */
}

.bg_zzbluesoft {
    background-color: #d1d1ff; /* softblue */
}

.bg_zzwhite {
    background-color: #ffffff; /* softblue */
}
/*BACKGROUNDS*/

/*-------------------BACKGROUND DIVISIONS----------------------*/
.sandwichx{  background: linear-gradient(
    155deg,           /* diagonal angle */
    rgb(0, 0, 0) 50%,        /* white color on one half */
    rgba(0, 0, 0, 0)  50%  /* transparent on the other half */
  );}

    .bg_rangebar {
    background: linear-gradient(to right, green, yellow, red);
  }
/*-------------------BACKGROUND DIVISIONS----------------------*/

/*-------------------SPACING----------------------*/
.gap_10 {gap: 10px;}
.gap_30 {gap: 30px;}
/*-------------------SPACING----------------------*/

/*-------------------FONTS SIZES----------------------*/
.f_10 {font-size: 10px;}
.f_20 {font-size: 20px;}
.f_30 {font-size: 30px;}
.f_40 {font-size: 40px;}
.f_50 {font-size: 50px;}
.f_60 {font-size: 60px;}
.f_90 {font-size: 90px;}
.f_150 {font-size: 150px;}
.f_200 {font-size: 200px;}
/*-------------------FONTS SIZES----------------------*/

/*-------------------BUTTON CSS----------------------*/
/*BUTTON CSS*/
/*a:hover { background-color: rgba(100, 100, 100, 0.8); }*/
.clickable:hover {background-color: rgba(100, 100, 100, 0.8); color: white; }
.clickablegreen:hover {background-color: rgb(50, 150, 50); color: white; }
.clickablered:hover {background-color: rgb(150, 50, 50); color: white; }

button:hover { background-color: rgba(100, 100, 100, 0.8); color: white; }
button:active { background-color: rgba(0, 0, 0, 0.8); }
button {user-select: none;}
/*-------------------BUTTON CSS----------------------*/


/*-------------------COLOR TEXT----------------------*/
.cl_white {color: white;}

.cl_gray{color: rgb(125, 125, 125);}
.cl_grey{color: rgb(125, 125, 125);}

.cl_red {color:rgb(255, 0, 0);}
.cl_green {color: rgb(0, 255, 0);}
.cl_greenlt {color: rgb(152, 255, 152);}

.cl_blue {color: rgb(0, 0, 255);}
.cl_bluelt {color: rgb(109, 131, 255);}
.cl_yellow {color: rgb(255, 255, 0);}

.cl_cyan {color: rgb(0, 255,  255);}
.cl_pink {color: rgb(255, 0,  255);}


.cl_black{color: rgb(0, 0, 0)}
/*-------------------COLOR TEXT----------------------*/


/*-------------------COLOR BACKGROUND----------------------*/
.underblue {  background-color : rgb(37, 73, 190); }

.bg_blue {background-color: rgb(9, 80, 223)}

.bg_blue_selectedp {background-color: rgb(0, 66, 198)}
.bg_blue_selected {background-color: rgb(0, 53, 159)}

.bg_trans{background-color: rgba(255, 255, 255,0)}
    
.bg_white{background-color: rgb(255, 255, 255)}
.bg_white_50{background-color: rgba(255, 255, 255, 0.05)}

.bg_blackish{background-color: rgb(50, 50, 50)}

.bg_lesswhite{background-color: rgb(200, 200, 200)}
.bg_gray{background-color: rgb(125, 125, 125)}
.bg_grey{background-color: rgb(125, 125, 125)}


.bg_red {background-color: rgb(255, 0, 0)}

.bg_green {background-color: rgb(20, 222, 20)}

.bg_green_0{background-color: rgb(50, 150, 50)} .bg_green_1 {background-color: rgb(50, 250, 50)}  .touchedgreen {background-color: rgb(50, 250, 50)}

.bg_blue_trans{background-color: rgba(0, 56, 241, 0.2);}

.bg_payblue {background-color: rgb(24, 128, 255)}
.bg_payviolet {background-color: rgb(106, 56, 255)}


.bg_blue_0{background-color: rgb(1, 17, 71);}
.bg_blue_1{background-color: rgb(2, 35, 145);} .bg_blue_2{background-color: rgb(64, 64, 252)} .bg_blue_3{background-color: rgb(147, 136, 242)}
.bg_blue_4{background-color: rgb(0, 0, 230)}
.bg_yellow{background-color: rgb(251, 251, 9)}
.bg_pink{background-color: rgb(150, 50, 150)}
.bg_cyan{background-color: rgb(50, 150, 150)}

.bg_black{background-color: rgb(0, 0, 0)}
/*-------------------COLOR BACKGROUND----------------------*/


/*-------------------BACKGROUND GRADIENTS----------------------*/
.grad_blue {background-image: linear-gradient(rgb(2, 35, 145), rgb(0, 0, 0));}
/*.grad_bluepink {background-image: linear-gradient(rgb(2, 35, 145), rgb(238, 0, 255));}*/ /*make it horizontal*/
.gradH_bluepink {background-image: linear-gradient(to right, rgb(2, 35, 145), rgb(238, 0, 255));}
/*-------------------BACKGROUND GRADIENTS----------------------*/



/*-------------------OPACITY----------------------*/
/*with interactions*/ .op_0 {opacity: 0;}   /*no interactions*/  .hide {visibility: hidden; }
.op_10 {opacity: 0.1;}
.op_20 {opacity: 0.2;}
.op_30 {opacity: 0.3;}
.op_40 {opacity: 0.3;}
.op_40 {opacity: 0.4;}
.op_60 {opacity: 0.7;}
.op_70 {opacity: 0.7;}
.op_80 {opacity: 0.8;}
.op_90 {opacity: 0.9;}
.op_100 {opacity: 1;}



/*-------------------OPACITY----------------------*/

/*-------------------NO'S----------------------*/
.nobord {border: none;}
.noresize {resize: none;}
.nooutline { outline: none; }
.nobg {  background-color: transparent;}
.noover {overflow: hidden;}
.noselect { user-select: none; }
.nointeract {pointer-events: none;}
.nodisplay { display: none; }
.display {display: block;}
.nodeco {text-decoration: none;}
/*-------------------NO'S----------------------*/

/*-------------------SIZES---------------------*/
/*------------*/
.h_2 {height: 2px;}
.h_5 {height: 5px;}
.h_10 {height: 10px;}
.h_15 {height:15px; }
.h_20 {height:20px; }
.h_25 {height:25px; }
.h_30 {height:30px; }
.h_40 {height: 40px;}
.h_50 {height: 50px;}
.h_60 {height:60px; }
.h_70 {height:70px; }
.h_100 {height: 100px;}
.h_150 {height:150px;}
.h_200 {height:200px;}
.h_300 {height: 300px;}
.h_400 {height: 400px;}
.h_500 {height: 500px;}
.h_800 {height: 800px;}
.h_900 {height: 900px;}
.h_1000 {height: 1000px;}
.h_1500 {height:1500px;}
.h_2000 {height: 2000px;}
.h_4000 {height: 4000px;}
.h_100p {height: 100%;}
.h_auto {height: auto;}
.h_50vh {height:50vh;}
.h_85vh {height:85vh;}
.h_90vh {height:90vh;}
.h_95vh {height:95vh;}

.h_100vh {height:100vh;}
/*------------*/

/*------------*/
.w_10 {width: 10px;}
.w_20 {width: 20px;}
.w_25 {width: 25px;}
.w_40 {width: 40px;}
.w_50 {width: 50px;}
.w_800 {width: 800px;}
.h_400vh {height: 400vh;}
.w_100 {width: 100px;}
.w_150 {width: 150px;}
.w_200 {width: 200px;}
.w_250 {width: 250px;}
.w_300 {width: 300px;}
.w_400 {width: 400px;}
.w_500 {width: 500px;}
.w_700 {width: 700px;}
.w_1500 {width: 1500px;}
.w_1700 {width: 1700px;}
.w_2000 {width: 2000px;}
.w_2500 {width: 2500px;}
.w_4000 {width: 4000px;}
.w_100p {width: 100%;}
/*------------*/
/*-------------------SIZES---------------------*/


/*-------------------PADDING---------------------*/
.padTB_20 {padding-top: 20px; padding-bottom: 20px;}
.padTB_40 {padding-top: 40px; padding-bottom: 40px;}
.padB_40 {padding-bottom: 40px;}
.padLR_20 {padding-left: 20px; padding-right: 20px;}
.padL_20 {padding-left: 20px; }
.padLR_40 {padding-left: 40px; padding-right: 40px;}
/*-------------------PADDING---------------------*/


/*-------------------MARGINS---------------------*/
.marg0 { margin: 0px; }
.marg5 { margin: 5px; }
.marg10 { margin: 10px;}
.marg20 { margin: 20px; }
.margtop { margin-top: 50px; }
.mar_0 {margin: 0;}
.mar_5 {margin: 5px;}
.mar_10 {margin: 10px;}
.mar_20 {margin: 20px;}
.mar_40 {margin: 40px;}
.mar_80 {margin: 80px;}
.mar_120 {margin: 120px;}
.mar_200 {margin: 200px;}
.marbot_10 {margin: 0 0 10px;}
.marB_10 {margin: 0 0 10px;}
.marbot_20 {margin: 0 0 20px;}
.marbot_40 {margin: 0 0 40px;}


.martop_10 {margin-top: 10px;}
.martop_20 {margin-top: 20px;}
.martop_50 {margin-top: 50px;}
.marbot_50 {margin-bottom: 50px;}
.martop_120 {margin-top: 120px;}
.martop_180 {margin-top: 180px;}
.marbot_120 {margin-bottom: 120px;}
.marLR50 {margin-right: 50px;  margin-left: 50px; }
.marR20 {margin-right: 20px; }
.marR100 {margin-right: 100px; }
.marLR_20 {margin-right: 20px;  margin-left: 20px; }
.marTB20 {margin-top: 20px;  margin-bottom: 20px; }
.marTB40 {margin-top: 40px;  margin-bottom: 40px; }
.marT20 {margin-top: 20px;   }
.marright_50 {margin-right: 50px;}
.marleft_50 {margin-left: 50px;}
.marbot_200 {margin-bottom: 200px;}
.mar_y_20 {margin: 20px 0 20px 0;}
.mar_x_10 {margin: 0 10px 0 10px;}
.mar_x_12 {margin: 0 12px 0 12px;}
.mar_x_20 {margin: 0 20px 0 20px;}
/*-------------------MARGINS---------------------*/


/*-------------------POSITIONS---------------------*/
/*Z AXIS */
.abs { position: absolute;}
.ztop {z-index: 9999;}
.z100 {z-index:100;}
.z99 {z-index:99;}
.z98 {z-index:98;}
/*Z AXIS */

/*Y AXIS */
.mvup_10 {transform: translateY(-10px);}
.mvup_20 {transform: translateY(-20px);}
.mvup_40 {transform: translateY(-20px);}
.mvup_60 {transform: translateY(-60px);}
.mvup_80 {transform: translateY(-80px);}
.mvup_120 {transform: translateY(120px);}
.mvdwn_10 {transform: translateY(10px);}
.mvdwn_20 {transform: translateY(20px);}
.mvdwn_40 {transform: translateY(40px);}
.mvdwn_60 {transform: translateY(60px);}
.mvdwn_80 {transform: translateY(80px);}
.mvdwn_120 {transform: translateY(120px);}

.top0 {top: 0;}
.bottom {bottom: 0;}
.b_20 {bottom: 20;}
.t_20 {top: 20;}
.maketop {vertical-align: top;}
.notopmar {margin-top: 0;}
.nobotmar {margin-bottom: 0;}
/*Y AXIS */

/*X AXIS */
.mvlft_10 {transform: translateX(-10px);}
.mvlft_20 {transform: translateX(-20px);}
.mvlft_40 {transform: translateX(-20px);}
.mvlft_60 {transform: translateX(-60px);}
.mvlft_80 {transform: translateX(-80px);}
.mvlft_120 {transform: translateX(-120px);}

.mvrgt_10 {transform: translateX(10px);}
.mvrgt_20 {transform: translateX(20px);}
.mvrgt_40 {transform: translateX(20px);}
.mvrgt_60 {transform: translateX(60px);}
.mvrgt_80 {transform: translateX(80px);}
.mvrgt_110 {transform: translateX(110px);}
.mvrgt_120 {transform: translateX(120px);}

.right0 {right: 0;}
.r_20 {right: 20;}
.l_20 {left: 20;}
.left0 {left: 0;}


.makespace {justify-content: space-between;}

/*X AXIS */

.remain {position: fixed;}
.rel { position: relative;}



/*-------------------BORDERS----------------------*/
.bordglow {      
  box-shadow: 0 0 2px 2px rgba(0, 174, 255, 0.8),
              0 0 7px 4px rgba(0, 174, 255, 0.6),
              0 0 12px 2px rgba(0, 174, 255, 0.4);}

.textglow {      
  text-shadow: 0 0 2px rgba(0, 174, 255, 0.8),
                0 0 7px rgba(0, 174, 255, 0.6),
                0 0 12px rgba(0, 174, 255, 0.4);
}


/*-------------------BORDERS----------------------*/




/*-------------------POSITIONS---------------------*/
.inblock {display: inline-block;}
.snug { padding: 10px 5px 10px 10px; display: inline-block;}
.column {display: table-column}
.centerh {align-items: center;}
.centerh {align-items: center;}
.centerw {justify-content: center;}

.center_txt {text-align: center;}
.righttxt {text-align: right;}

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;}
.coverH{
  height: 100%;
  object-fit: cover;
}

.minh {min-height: 100%; }
.h50per {height: 50%;}
.noapp {appearance: none;}

.pad10 {padding: 5px 10px 5px 10px;}
.pad50 {padding: 5px 50px 5px 50px;}
.rad7{border-radius: 7px;  }
.rad10{border-radius: 10px; }
.rad20{border-radius: 20px !important; }
.rad60{border-radius: 60px; }
.nobord {border: none;}
.nooutline {outline: none;}
.yseparate {margin-top: 5px; margin-bottom: 5px;}
.xseparate {margin-left: 5px; margin-right: 5px;}
.xseparatemore {margin-left: 10px; margin-right: 10px;}
.xleftseparate {margin-left: 20px; margin-right: 0px;}

/*00000000000000000000000000000000000000000000000000000000000000000000000*/
/*FIX DIV*/



/*FIX FONTS*/
/*00000000000000000000000000000000000000000000000000000000000000000000000*/

.smallerfont {font-size: 0.6em;}

/*00000000000000000000000000000000000000000000000000000000000000000000000*/
/*FIX FONTS*/


/*FIX SIZE*/
.w_1000 {width:1000px; }
.w_900 {width:900px; }
.mxw_900 {max-width:900px; }
.mxh_800 {max-height:800px; }
.w_1200 {width:1200px; }
.w_1600 {width:1600px; }
.w_800 {width:800px; }
.w_600 {width:600px; }
.w_300 {width:300px; }
.w150 {width:150px; }
.w_150 {width:150px; }
.w_10 {width:10px; }
.w_100 {width:100px; }
.w70 {width:70px; }
.w_50 {width: 50px;}
.w_50p {width: 50%;}
.w_20 {width: 20px;}
.w_20p {width: 20%;}
.ratio {aspect-ratio: 1 / 1;}
.ratioh {aspect-ratio: 2 / 1;}
.w40 {width:40px; }
.w_auto {width: auto;}
.w_sides {   
  left: -5%;
}
o


/*FIX SIZE*/


/*ADAPTING*/
.autoflex {flex: 1 1 auto;}
.contain {object-fit: contain;}
.box {width: fit-content;}

/* TEXT */
.fsize80 {
    font-size: 80px;
}

.fsize70 {
    font-size: 70px;
}

.fsize60 {
    font-size: 60px;
}

.fsize50 {
    font-size: 50px;
}

.fsize40 {
    font-size: 40px;
}

.fsize30 {
    font-size: 30px;
}

.fsize20 {
    font-size: 20px;
}

.fsize10 {
    font-size: 10px;
}

.fsize15 {
    font-size: 15px;
}

.white {
    color: white;
}


.snug { display: inline-block;}

.bold {font-weight: bold;}
.align { text-align: center;}

/*00000000000000000000000000000000000000000000000000000000000000000000000*/
/*FIX TEXT*/


/*FIX VISION*/
/*00000000000000000000000000000000000000000000000000000000000000000000000*/
.op_20 {opacity: 0.2;}
.op_30 {opacity: 0.3;}
.op_40 {opacity: 0.4;}
.op_50 {opacity: 0.5;}
.op_70 {opacity: 0.7;}
.op_90 {opacity: 0.9;}
.op_100 {opacity: 1;}
.zoom50 { zoom: 50%; }
/*00000000000000000000000000000000000000000000000000000000000000000000000*/
/*FIX VISION*/





/*FIX MOUSE*/
/*00000000000000000000000000000000000000000000000000000000000000000000000*/
.pointer {cursor: pointer; }
/*00000000000000000000000000000000000000000000000000000000000000000000000*/

/*FIX MOUSE*/

/*FIX POSITION*/
/*00000000000000000000000000000000000000000000000000000000000000000000000*/

.brd_box {box-sizing: border-box;}

.noselect { user-select: none; }
.center {
    justify-content: center; align-items: center;  display:flex;
}

.flexend {
  justify-content: flex_end; 
}

.flexstart {
  align-items: flex-start;
}


.flex {display: flex; }
.block {display: block;}
.inline {display: inline;}
.grid {display: grid;}


.column {flex-direction: column;  }
.row {flex-direction: row;  }

.scale12 { transform: scale(1.2)}
.scale4 { transform: scale(4)}

.origin_center {transform-origin: center;}

.nooverx {overflow-x: hidden; }
.noovery {overflow-y: hidden; }

.overy {overflow-y: auto; }

.wfit { width : fit-content;}
.hfit { height: fit-content;}

.w_100p { width : 100%;}

.marcenter {margin-left: auto; margin-right: auto;}

/*00000000000000000000000000000000000000000000000000000000000000000000000*/
/*FIX POSITION*/


/*FIX COLORS*/


.undersoftblue {background-color: rgb(66, 130, 203)}
.undergreenop80{background-color: rgba(0, 100, 0, 0.8)}
.undergreenop50{background-color: rgba(0, 100, 0, 0.5)}
.underwhiteop50{background-color: rgba(255, 255, 255, 0.5)}
.underwhite{background-color: rgb(255, 255, 255)}
.undergreen{background-color: rgb(0, 200, 0)}
.undergreendark{background-color: rgb(0, 138, 0)}
.underviolet { background-color : rgb(255, 0, 238); }

/*background-color : rgb(37, 73, 190);*/
.underblack {  background-color : rgb(0, 0, 0);  }
.underblue {  background-color : rgb(37, 73, 190);  }
.underbluetrans {  background-color : rgba(37, 73, 190, 0.5);  }

.underred {  background-color : rgb(190, 37, 37);  }
.underyellow {background-color: rgb(246, 255, 0);}


.blue {  color : rgb(37, 73, 190); }
.white {color:white;}
.grey {color:rgb(100, 100, 100);}
.black {color:rgb(0, 0, 0);}

.bordwhite{border: 3px solid rgb(255, 255, 255);}
.bordgreen{border: 3px solid rgb(0, 200, 0);}
.bordgreendark{border: 3px solid rgb(0, 104, 12);}
.bordblue{border: 3px solid rgb(37, 73, 190);}
.bordbluedark{border: 3px solid rgb(26, 45, 108)}
/*FIX COLORS*/






/*COLORS CSS*/
/*html{ background-color: rgb(0, 0, 0); }*/
html {transition: background-color 1s ease;}
body {transition: background-color 1s ease;}
div {transition: background-color 0.2s ease;}
nav {transition: color 1s ease;}
p {transition: color 2s ease;}
hr {transition: background-color 0.5s ease;}



    .cl_red_0 {color: rgb(150, 50, 50)}  .cl_red_max {color:rgb(255, 0, 0);}
    .cl_green {color: rgb(0, 184, 0);} .cl_green_1{color: rgb(50, 250, 50);}
    .cl_blue_0 {color: rgb(2, 35, 145);} .cl_blue_max {color: rgb(0, 0, 255);}  /* Change text color to blue */
    
    .cl_payblue {color: rgb(24, 128, 255)}
    .cl_payviolet {color: rgb(106, 56, 255)}

    .cl_yellow{color: rgb(150, 150, 50)}
    .cl_pink{color: rgb(150, 50, 150)}
    .cl_cyan{color: rgb(50, 150, 150)}

    .cl_black{color: rgb(0, 0, 0)}
    
    .cl_gray{color: rgb(125, 125, 125);}
    .cl_grey{color: rgb(125, 125, 125);}

    .cl_white_50{color: rgba(255, 255, 255, 0.5);}
    .cl_white {color: white;}

    .brd_white {border-color: white;}

    .brd_1 {border: 1px solid;}
    .brd_2 {border: 2px solid;}
    .brd_3 {border: 3px solid;}

    .bordblue_3{border: 3px solid rgb(37, 73, 190);}
    .bordblue_10{border: 10px solid rgb(37, 73, 190);}
    .bordblue_20{border: 20px solid rgb(11, 32, 100);}



    .brd_2_tb_white {
      border-top: 2px solid white; /* Border on top */
      border-bottom: 2px solid white; /* Border on bottom */
    }

    .brd_txt_white {
      text-shadow: 
      1px 1px 0 white, /* Right and down */
      -1px 1px 0 white, /* Left and down */
      1px -1px 0 white, /* Right and up */
      -1px -1px 0 white; /* Left and up */
    }

.Xshdwtxt {
  text-shadow: none;
}


.shdwtxt{
  text-shadow:
    -1px -1px 0 #000,
     0px -1px 0 #000,
     1px -1px 0 #000,
    -1px  0px 0 #000,
     1px  0px 0 #000,
    -1px  1px 0 #000,
     0px  1px 0 #000,
     1px  1px 0 #000;
}


    .shdwtxt_1_NB {
      text-shadow: 
      1px 1px 0 rgb(0, 0, 0), /* Right and down */
      -1px 1px 0 rgb(0, 0, 0), /* Left and down */
      1px -1px 0 rgb(0, 0, 0), /* Right and up */
      -1px -1px 0 rgb(0, 0, 0); /* Left and up */
    }

    .shdwtxt_2_NB {
      text-shadow: 
      2px 1px 0 rgb(0, 0, 0), /* Right and down */
      -2px 1px 0 rgb(0, 0, 0), /* Left and down */
      2px -1px 0 rgb(0, 0, 0), /* Right and up */
      -2px -1px 0 rgb(0, 0, 0); /* Left and up */
    }

    .shadowtxt_4 {
      text-shadow: 
      4px 2px 2px rgb(0, 0, 0), /* Right and down */
      -4px 2px 2px rgb(0, 0, 0), /* Left and down */
      4px -2px 2px rgb(0, 0, 0), /* Right and up */
      -4px -2px 2px rgb(0, 0, 0); /* Left and up */
    }

    .shadowtxt_10 {
      text-shadow: 
      10px 10px 50px rgb(0, 0, 0), /* Right and down */
      -10px 10px 50px rgb(0, 0, 0), /* Left and down */
      10px -10px 50px rgb(0, 0, 0), /* Right and up */
      -10px -10px 50px rgb(0, 0, 0); /* Left and up */
    }


    .vhr {
      width: 1px;           /* Width of the line */
      height: 100px;        /* Height of the line */
      background-color: gray; /* Color of the line */
      margin: 0 auto;       /* Centering the line */
    }

    .hr_gray {        border: 0; /* Removes default border styles */
      border-top: 1px solid gray; /* Adds a gray top border */}
    .brd_grey {border-top: 1px solid gray; }
    
    .brd_1_blue {border: 1px solid rgb(2, 35, 145);}

    .brd_1_white {border: 1px solid white;}

    .brd_1op_white {border: 1px solid rgba(255, 255, 255, 0.468);}
    
    
    .brd_2_white {border: 2px solid white;}
    
    .brd_3_white {border: 3px solid white;}

    .brd_3_black {border: 3px solid black;}
    .brd_6_black {border: 6px solid black;}


    .brd_4_white {border: 4px solid white;}

    .brd_1_black {border: 1px solid rgb(0, 0, 0);}

    .brd_1_lightwhite {border: 1px solid rgba(255, 255, 255, 0.225);}
    .brd_5_white {border: 5px solid white;}
    .brd_5_black {border: 5px solid black;}
    .brd_5_red {border: 5px solid rgb(255, 0, 0);}


    .brd_5_trans {border: 10px solid rgba(255, 0, 0, 0);}
    .brd_5_blue {border: 10px solid rgb(0, 217, 255);}

    .brd_1_nearblack {border: 1px solid rgb(20, 20, 20);}
    .brd_2_white {border: 2px solid white;}

    .flt_bwc {filter: grayscale(100%) contrast(500%);}

    .blur_05 {filter: blur(0.5px);}
    .blur_1 {filter: blur(1px);}
    .blur_10 {filter: blur(10px);}
    .blur_50 {filter: blur(50px);}

    .backblur_10 {backdrop-filter: blur(10px);   }
    .backblur_40 {backdrop-filter: blur(40px);   }




.l_m10 { left: -10px;}
.l_m20 { left: -20px;}
.l_m50 { left: -50px;}

.l_10 { left: 10px;}
.l_20 { left: 20px;}
.l_50 { left: 50px;}


.scal_30 {transform: scale(0.33);}
.scale {transform: scale(1.1);}
.scal_150 {transform: scale(1.5);}
.scal_200 {transform: scale(2);}

.zm_30{ zoom: 0.33;}
.zm_50{ zoom: 0.5;}
.zm_70{ zoom: 0.7;}
.zm_80{ zoom: 0.8;}
.zm_120{ zoom: 1.2;}
.zm_140{ zoom: 1.4;}
.zm_200{ zoom: 2;}
.zm_300{ zoom: 3;}
.zm_400{ zoom: 4;}

/*STYLING CSS*/
.f_bold {font-weight: bold;}
.f_normal {font-weight: normal; }


.radtop_20 {
  border-top-left-radius: 20px; /* Adjust the value as needed */
  border-top-right-radius: 20px; /* Adjust the value as needed */
}
.rad_50 {border-radius: 50px;}
.rad_40 {border-radius: 40px;}
.rad_30 {border-radius: 30px;}
.rad_20 {border-radius: 20px;}
.rad_10 {border-radius: 10px;}
.rad_5 {border-radius: 5px;}


.pad_0 {padding: 0px;}
.pad_10 {padding: 10px;}
.pad_20 {padding: 20px;}
.pad_40 {padding: 40px;}
.pad_50 {padding: 50px;}
.pad_100 {padding: 100px;}

.pad_10_b {padding: 0 0 10 0px;}
.pad_20_tbl {padding: 20 20 0 20px;}
.pad_20_trb {padding: 20 20 20 0px;}
.padl_20 {padding: 20px;}
.padl_60 {padding: 0 0 0 60px;}
/*VISIBILITY CSS*/

.hide {visibility: hidden; }

/*POSITION*/



.botright {bottom: 10px; right: 10px; }


.centertxt {text-align: center;}
.centery {align-items: center;}
.centerx {justify-content: center;}
.centera {margin-left: auto; margin-right: auto;}
.centertrans {transform: translate(-50%, -50%);}
.centertransx {transform: translate(50%, -150%);}
.centerb {margin-bottom: auto; margin-top: auto;}

.flex {display: flex;}
.row {flex-direction: row;}
.column {flex-direction: column;}


.top_10p {top: 10%;}
.top_20p {top: 20%;}

.top_40p {top: 40%;}
.top_50p {top: 50%;}

.top_0 { top: 0px; }
.left_0 { left: 0px; }

.top_20 { top: 20px; }
.left_20 { left:  20px; }
.left_40 { left:  20px; }
.top_150 { top: 150px; }
.top_200 { top: 200px; }
.left_200 { left:  200px; }
.top_400 { top: 400px; }
.top_600 { top: 600px; }


.mar_0 {margin: 0;}
.mar_5 {margin: 5px;}
.mar_10 {margin: 10px;}
.mar_20 {margin: 20px;}
.mar_40 {margin: 40px;}
.mar_80 {margin: 80px;}
.mar_120 {margin: 120px;}
.mar_200 {margin: 200px;}


.marbot_10 {margin: 0 0 10px;}


.marbot_20 {margin: 0 0 20px;}


.martop_10 {margin-top: 10px;}
.martop_20 {margin-top: 20px;}
.martop_50 {margin-top: 50px;}
.marbot_50 {margin-bottom: 50px;}

.martop_120 {margin-top: 120px;}
.martop_180 {margin-top: 180px;}
.martop_250 {margin-top: 250px;}
.marT_10 {margin-top: 10px; }
.martop_450 {margin-top: 450px;}



.marbot_120 {margin-bottom: 120px;}

.marLR50 {margin-right: 50px;  margin-left: 50px; }
.marR_10 {margin-right: 20px; }
.marR20 {margin-right: 20px; }
.marR100 {margin-right: 100px; }
.marLR20 {margin-right: 20px;  margin-left: 20px; }
.marL_10 {margin-left: 10px; }
.marL_20 {margin-left: 20px; }
.marL_40 {margin-left: 40px; }

.marTB_20 {margin-top: 20px;  margin-bottom: 20px; }
.marB_20 {margin-bottom: 20px; }
.marB_40 {margin-bottom: 40px; }
.marB_60 {margin-bottom: 60px; }

.marTB_40 {margin-top: 40px;  margin-bottom: 40px; }

.marT20 {margin-top: 20px;   }


.marright_50 {margin-right: 50px;}
.marleft_50 {margin-left: 50px;}


.marbot_200 {margin-bottom: 200px;}

.mar_y_20 {margin: 20px 0 20px 0;}

.mar_x_10 {margin: 0 10px 0 10px;}
.mar_x_12 {margin: 0 12px 0 12px;}
.mar_x_20 {margin: 0 20px 0 20px;}




.inblock {display: inline-block;}


.undersoftblue {background-color: rgb(66, 130, 203)}



.blue {  color : rgb(37, 73, 190); }

.white {color:white;}
.grey {color:rgb(100, 100, 100);}
.black {color:rgb(0, 0, 0);}

.bordwhite{border: 3px solid rgb(255, 255, 255);}
.bordgreen{border: 3px solid rgb(0, 200, 0);}
.bordgreendark{border: 3px solid rgb(0, 104, 12);}
.bordblue{border: 3px solid rgb(37, 73, 190);}
.bordbluedark{border: 3px solid rgb(26, 45, 108)}


/*TACTICAL*/ 
.txt_bg {
  color: transparent; /* Makes the text itself transparent */
  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* Gradient background */
  -webkit-background-clip: text; /* Ensures the background is clipped to the text */
  background-clip: text; /* Standard for modern browsers */
  font-size: 2em; /* Adjust text size */
  font-weight: bold; /* Makes text bold for better visibility */
  display: inline-block; /* Ensures the effect wraps only around the text */
}




.scrollwhite {scrollbar-color: white transparent;}
.scrollthin { scrollbar-width: thin;}



.clip_5 {clip-path: inset(5px round 50%);}
.inv {filter: invert(1);}
.limit {flex-wrap: wrap;}
.max_w_100 {max-width: 100px;}
.max_w_300 {max-width: 300px;}
.nobord {border: none;}
.noresize {resize: none;}
.nooutline { outline: none; }
.nobg {  background-color: transparent;}
.noover {overflow: hidden;}
.noselect { user-select: none; }
.nointeract {pointer-events: none;}
.nodisplay { display: none; }
.nodeco {text-decoration: none;}

.fit {object-fit: cover;}


.text_write {
                 /* Set the fixed width of the element */
  word-wrap: break-word;       /* Allow words to break if they exceed the container */
  white-space: normal;         /* Allow text to wrap naturally, keeping word boundaries */
  word-break: normal;          /* Don't break words at any random position */
}


/*TACTICAL*/ 
/*00000000000000000000000000000000000000000000000000000000000000000000000*/
    


.pointer {cursor: pointer;}

.op_half {opacity: 0.5 !important;}






  /*ANIMATE.CSS*/

/*ANIMATE.CSS*/






@keyframes slideUpFadeIn {
    0% {
      transform: translateY(250px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  

  .anim_up05 {
    animation: slideUpFadeIn 0.5s ease-in-out forwards;
  }


  .anim_up1 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 1s forwards;  /* the second 1s is a delay */
  }

  .anim_up2 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 2s forwards;  /* the second 1s is a delay */
  }

  .anim_up3 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 3s forwards;  /* the second 1s is a delay */
  }

  .anim_up4 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 4s forwards;  /* the second 1s is a delay */
  }

  
  .anim_up5 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 5s forwards;  /* the second 1s is a delay */
  }

  .anim_up10 {
    opacity: 0; 
    animation: slideUpFadeIn 1s ease-in-out 10s forwards;  /* the second 1s is a delay */
  }






  /*ANIMATE.CSS*/

  @keyframes disappear {cmd
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .anim_disappear1 {
    opacity: 100;
    animation: disappear 1s ease-in-out forwards;
  }
  
  .anim_disappear2 {
    opacity: 100;
    animation: disappear 2s ease-in-out forwards;
  }


@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.anim_appear1 {
  opacity: 0;
  animation: appear 1s ease-in-out forwards;
}


@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.anim_webappear1 {
  opacity: 0;
  -webkit-animation: appear 1s ease-in-out forwards;
  animation: appear 1s ease-in-out forwards;
}

.anim_appear2 {
  opacity: 0;
  animation: appear 2s ease-in-out forwards;
}

.anim_appear3 {
  opacity: 0;
  animation: appear 2s ease-in-out 1s forwards;
}



.anim_appear5 {
  opacity: 0;
  animation: appear 2s ease-in-out forwards 5s;
}


@keyframes waveGradient {
  0% {
    background-position:  10% 15%;
  }
  25% {
    background-position:  10% 15%;
  }
  50% {
    background-position: 10% 30%;
  }
  75% {
    background-position: 10% 15%;
  }
  100% {
    background-position: 10% 15%;
  }
}

.anim_wavegradient { 
  background-size: 100% 100%; /* Larger size for smoother motion */
  animation: waveGradient 10s ease-in-out infinite; /* Softer motion */
  z-index: 0; /* Ensure proper stacking order */
  position: relative;
}



@keyframes anim_scaledown {
  0% {
    transform: scale(1.2);
 
  }
  
  100% {
    transform: scale(1);
  }
}


.anim_scaledown {
  animation: 0.5s anim_scaledown ease-in-out forwards;
}




@keyframes anim_scaleup {
  0% {
    transform: scale(1);
 
  }
  
  100% {
    transform: scale(1.2);
  }
}



.anim_scaleup {
  animation: 0.5s anim_scaleup ease-in-out forwards;
}


.transhack{
  filter: saturate(100%);
}



.sat_more{
  filter: saturate(160%);
}

.bri_0 {
  filter: brightness(0);
}

.bri_10 {
  filter: brightness(0.1);
}

.bri_25 {
  filter: brightness(0.25);
}


.bri_125 {
  filter: brightness(1.25);
}


.transi_all {transition: all 1s ease-in-out; }

.txt_sha_black {
  text-shadow: 
    10px 10px 10px rgb(0, 0, 0);

  
}

.trans {  transform: translate(5px, 5px) scale(1.1); }



.overgreen {
  transition: all 0.3s ease-in-out;
  text-shadow: 
  2px 2px 0 rgb(51, 255, 0), 
  -2px -2px 0 rgb(255, 255, 255); 

  transform: translate(5px, 5px) scale(1.1); /* Slight scaling effect */
  color: rgb(51, 255, 0); /* Change text color to blue */
}



.overblack{
  transition: all 0.3s ease-in-out;
  text-shadow: 
  0px 0px 0 rgb(28, 120, 240), 
  -2px -2px 0 rgb(0, 0, 0); 



}

.overwhite{
  transition: all 0.3s ease-in-out;
  text-shadow: 
  0px 0px 0 rgb(28, 120, 240), 
  -2px -2px 0 rgb(255, 255, 255); 



}

.overblue{
  transition: all 0.3s ease-in-out;
  text-shadow: 
  2px 2px 0 rgb(28, 120, 240), 
  -2px -2px 0 rgb(255, 255, 255); 



}

/*00000000000000000000000000000000000000000000000000000000000000000000000*/