/*!*  *!*/
/*!*  *!*/
/*!* THEME COLORS & GENERAL LAYOUT *!*/
/*!* Heading font: Montserrat, sans-serif uppercase, h1 w/4px letter space*!*/
/*!* General text font: *!*/
/*!* Link font: comfortaa w/3px spacing & uppercase *!*/

/*!**/
/*Lightest Pink: FFE5EC*/
/*Lighter Pink: FFC2D1*/
/*Light Pink: FFB3C6*/
/*Pink: FF8FAB*/
/*Dark Pink: FB6F92*/
/*Purple: 7F2CCB*/
/*Grey/Blue: 414361*/
/*Dark Grey/Blue: 2A2D43*/
/*Dark Brown Grey: 2F2F2F*/
/**!*/
@font-face {
    font-family: 'Comfortaa';
    src: url('src/fonts/Comfortaa-Regular.ttf') format('truetype');
}
@font-face {
   font-family: 'JetBrainsMono';
   src: url('src/fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
@font-face {
   font-family: 'JetBrainsXLight';
   src: url('src/fonts/JetBrainsMono-ExtraLight.ttf') format('truetype');
}
:root {
    --white: white;
    --grey: #6c6c6c;
    --darkgrey: #222222FF;
    --bg1: #0d2d37;
    --bg2: rgb(28, 26, 41);
    --cyan: rgba(0, 249, 255, 0.98);
    --sonicPink: #ff0099;
    --brightcyan: #00ffff;
    --mint: #00ffb2;
    --darknav: #111820;
    --lighterdarknav: #0e1a1f;
    --yellow: #ffe53e;

    --glow1: #93f8ff;
    --glow2: #2eacb0;
    --glow3: #0698a5;
    --glowbg: #0d2d37;
    --glowtext: #00ffff;
    --glowtextbright: #a1ffff;
    --glowtextdark: #212f2f;
    --glowborder: #00ffff55;
    --background: var(--bg2);
}

* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   overscroll-behavior: none;
}

body {
    background-color: var(--background);
    color: white;
}
/*mimicking / extending bootstrap's format, going a bit smaller*/
.fs-7 {
    font-size: 14px !important;
}
.fs-8 {
    font-size: 13px !important;
}
.fs-8 {
    font-size: 12px !important;
}

/*BLUE*/
  .b-blue, .b-blue:before {
    background: rgba(5,118,255,1);
    background: -moz-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(5,118,255,1)), color-stop(100%, rgba(36,248,255,1)));
    background: -webkit-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    background: linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=1 );
  }
/*END GRADIENTS*/
/*BASE BUTTON*/
.button {
    color: var(--background);
    display: inline-block;
    position: relative;
    border-radius: 3px;
    text-decoration: none;
    padding: .5em;
    margin: .5em;
    font-weight: bold;
    transition: all .5s;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.button:hover {
    text-shadow: 0px 0px 0px rgba(255, 255, 255, .75);
}
.button:hover:after {
    left: 100%;
    top: 100%;
    bottom: 100%;
    right: 100%;
}
.button:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    border-radius: 5px;
    transition: all .5s;
}
.button:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    right: 2px;
    z-index: -1;
    border-radius: 5px;
    transition: all .5s;
}
.button:after {
  background: var(--background);
}