/* 
 * cyberpunk-css by alddesign: https://github.com/alddesign/cyberpunk-css 
 * v1.0.0-alpha.3
 * 
 * Free to use - do whatever the fck you want... 
 */

/*#region fonts*/
@font-face 
{
    font-family:BlenderProBook;
    font-style:normal;
    font-weight:400;
    src:url(fonts/BlenderPro-Book.woff2) format("woff2");
}

@font-face 
{
    font-family: Oxanium;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Oxanium.woff2) format('woff2');
}

@font-face 
{
    font-family: Cyberpunk;
    src: url(fonts/Cyberpunk.otf) format('opentype');
}
/*#endregion*/

/*#region top level elements*/
:root 
{
    --root-font-size: 18px;

    --yellow: #f8ef02;
    --cyan: #00ffd2;
    --red: #f7009e;
    --blue: #007bff;
    --green: #446d44;
    --purple: purple;
    --black: #000;
    --white: #fff;
    --dark: #333;

    --fg: var(--black);
    --bg: transparent;
    --ac: var(--black);

    --yellow-cyberpunk-font: #feef00;
    --cyan-cyberpunk-font1:#46dffb;
    --cyan-cyberpunk-font2:#45aefb;

    --banner-color1: var(--purple); 
    --banner-color2: var(--red);
    --banner-color3: var(--yellow); 
    --banner-color4: var(--cyan); 
    --banner-gradient-stop: 405px;

    --input-padding-top: 0px;
    --input-padding-bot: 0.2rem;
    --input-padding-left: 1rem;
    --input-padding-right: 2rem;
    --input-font-size: 1.2rem;
    --input-width: 240px;

    --checkbox-size: 28px;
    --checkbox-inner-size: 16px;

    --radio-size: 28px;
    --radio-inner-size: 16px;
}

html
{
    font-size: var(--root-font-size);
    font-family: "BlenderProBook";
    padding: 0;
    margin: 0;
}

body
{
    background-color: var(--yellow);
    padding: 0;
    margin: 0;
}

/*#endregion*/

/*#region cyberpunk font*/
.oxanium-font
{
    font-family: Oxanium !important;
}

.cyberpunk-font,
.cyberpunk-font *,
.cyberpunk-font-og,
.cyberpunk-font-og *
{
    font-family: Cyberpunk !important;
    text-transform: uppercase !important;
    letter-spacing: -.25em;
}

.cyberpunk-font-og,
.cyberpunk-font-og *
{
    text-shadow: var(--cyan-cyberpunk-font1) 1px 1px, var(--cyan-cyberpunk-font2) 2px 2px;
    color: var(--yellow-cyberpunk-font);
}

.cyberpunk-font .c,
.cyberpunk-font-og .c
{
    font-style: normal;
    font-size: 2em;
    position: relative;
    top: -.2em;
}

.cyberpunk-font .p,
.cyberpunk-font-og .p
{
    font-style: normal;
    font-size: 2em;
    letter-spacing: -.45em;
    position: relative;
    bottom: -.25em;
    left: -.15em;
}

.cyber-att
{
    color: var(--red);
    font-size: 1.2rem;
    font-weight: bold;
    border: 3px solid var(--red);
    text-shadow: 0 0 4px var(--red);
    padding: 6px;
}

.cyber-att-2
{
    background-color: var(--red);
    color: var(--yellow);
    text-shadow: 0 0 6px var(--yellow);
    font-size: 1.2rem;
    font-weight: bold;
    border: 3px solid var(--red);
    padding: 6px;
}

/*#endregion*/

/*#region colors*/
.fg-yellow { --fg: var(--yellow); color: var(--yellow) !important; }
.bg-yellow { --bg: var(--yellow); background-color: var(--yellow); }
.ac-yellow { --ac: var(--yellow); }

.fg-cyan { --fg: var(--cyan); color: var(--cyan) !important; }
.bg-cyan { --bg: var(--cyan); background-color: var(--cyan); }
.ac-cyan { --ac: var(--cyan); }

.fg-red { --fg: var(--red); color: var(--red) !important; }
.bg-red { --bg: var(--red); background-color: var(--red); }
.ac-red { --ac: var(--red); }

.fg-blue { --fg: var(--blue); color: var(--blue) !important; }
.bg-blue { --bg: var(--blue); background-color: var(--blue); }
.ac-blue { --ac: var(--blue); }

.fg-green { --fg: var(--green); color: var(--green) !important; }
.bg-green { --bg: var(--green); background-color: var(--green); }
.ac-green { --ac: var(--green); }

.fg-purple { --fg: var(--purple); color: var(--purple) !important; }
.bg-purple { --bg: var(--purple); background-color: var(--purple); }
.ac-purple { --ac: var(--purple); }

.fg-black { --fg: var(--black); color: var(--black) !important; }
.bg-black { --bg: var(--black); background-color: var(--black); }
.ac-black { --ac: var(--black); }

.fg-white { --fg: var(--white); color: var(--white) !important; }
.bg-white { --bg: var(--white); background-color: var(--white); }
.ac-white { --ac: var(--white); }

.fg-dark { --fg: var(--dark); color: var(--dark) !important; }
.bg-dark { --bg: var(--dark); background-color: var(--dark); }
.ac-dark { --ac: var(--dark); }
/*#endregion*/



/*#region buttons*/
.cyber-button,
.cyber-button-small,
.cyber-button-big
{
    --button-border: 4px;
    --button-font-size: 1.4rem;
    --button-padding-v: 0.9rem;
    --button-padding-h: 2.5rem;

    --tag-font-size: 0.55rem;

    --button-cutout: 1.1rem;

    --button-shadow-primary: var(--cyan);
    --button-shadow-secondary: var(--yellow);
    --button-shimmy-distance: 5;

    --button-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
    --button-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
    --button-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
    --button-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --button-clip-5: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --button-clip-6: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
    --button-clip-7: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);

    --button-clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 80% 90%, 80% 100%, var(--button-cutout) 100%, 0 calc(100% - var(--button-cutout)));

    cursor: pointer;
    background: transparent !important;
    text-transform: uppercase;
    font-size: var(--button-font-size);
    font-weight: 700;
    letter-spacing: 2px;
    padding: var(--button-padding-v) var(--button-padding-h);
    outline: transparent;
    position: relative;
    border: 0;
    transition: background 0.2s;
    margin: 10px 10px 0px 0px!important;
    width:100%;
}

/*Overriding*/
.cyber-button-small
{
    --button-padding-v: 0.6rem;
    --button-padding-h: 1.75rem;
    --button-font-size: 1.0rem;
    --button-cutout: 0.77rem;
}

.cyber-button-big
{
    --button-padding-v: 1.1rem;
    --button-padding-h: 3.0rem;
    --button-font-size: 1.75rem;
    --button-cutout: 1.44rem;
}

.cyber-button:hover,
.cyber-button-small:hover,
.cyber-button-big:hover
{
    filter: brightness(90%);
}

.cyber-button:after,
.cyber-button-small:after,
.cyber-button-big:after,
.cyber-button:before,
.cyber-button-small:before,
.cyber-button-big:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: var(--button-clip);
    z-index: -1;
}

.cyber-button:before,
.cyber-button-small:before,
.cyber-button-big:before
{
    background: var(--button-shadow-primary);
    transform: translate(var(--button-border), 0);
}

.cyber-button:after,
.cyber-button-small:after,
.cyber-button-big:after
{
    background-color: var(--bg);
}

.cyber-button .tag,
.cyber-button-small .tag,
.cyber-button-big .tag
{
    position: absolute;
    letter-spacing: 1px;
    bottom: -5%;
    right: 6%;
    font-weight: normal;
    color: #000;
    font-size: var(--tag-font-size);
}

.cyber-button-small .tag
{
    --tag-font-size: 0.44rem;
    bottom: -8%;
}

.cyber-button-big .tag
{
    --tag-font-size: 0.66rem;
    bottom: -5%;
}

.cyber-button .glitchtext,
.cyber-button-small .glitchtext,
.cyber-button-big .glitchtext
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--button-shadow-primary);
    text-shadow: 2px 2px var(--button-shadow-primary), -2px -2px var(--button-shadow-secondary);
    clip-path: var(--button-clip);
    animation: glitch 4s infinite;
    padding: var(--button-padding-v) var(--button-padding-h);
    display: none;
}

.cyber-button:hover .glitchtext,
.cyber-button-small:hover .glitchtext,
.cyber-button-big:hover .glitchtext
{
    display: block;
}

.cyber-button .glitchtext:before,
.cyber-button-small .glitchtext:before,
.cyber-button-big .glitchtext:before
{
    content: '';
    position: absolute;
    top: calc(var(--button-border) * 1);
    right: calc(var(--button-border) * 1);
    bottom: calc(var(--button-border) * 1);
    left: calc(var(--button-border) * 1);
    clip-path: var(--button-clip);
    background-color: var(--bg);
    z-index: -1;
}

@keyframes glitch 
{
    0% {
        clip-path: var(--button-clip-1);
    }
    2%, 8% {
        clip-path: var(--button-clip-2);
        transform: translate(calc(var(--button-shimmy-distance) * -1%), 0);
    }
    6% {
        clip-path: var(--button-clip-2);
        transform: translate(calc(var(--button-shimmy-distance) * 1%), 0);
    }
    9% {
        clip-path: var(--button-clip-2);
        transform: translate(0, 0);
    }
    10% {
        clip-path: var(--button-clip-3);
        transform: translate(calc(var(--button-shimmy-distance) * 1%), 0);
    }
    13% {
        clip-path: var(--button-clip-3);
        transform: translate(0, 0);
    }
    14%, 21% {
        clip-path: var(--button-clip-4);
        transform: translate(calc(var(--button-shimmy-distance) * 1%), 0);
    }
    25% {
        clip-path: var(--button-clip-5);
        transform: translate(calc(var(--button-shimmy-distance) * 1%), 0);
    }
    30% {
        clip-path: var(--button-clip-5);
        transform: translate(calc(var(--button-shimmy-distance) * -1%), 0);
    }
    35%, 45% {
        clip-path: var(--button-clip-6);
        transform: translate(calc(var(--button-shimmy-distance) * -1%));
    }
    40% {
        clip-path: var(--button-clip-6);
        transform: translate(calc(var(--button-shimmy-distance) * 1%));
    }
    50% {
        clip-path: var(--button-clip-6);
        transform: translate(0, 0);
    }
    55% {
        clip-path: var(--button-clip-7);
        transform: translate(calc(var(--button-shimmy-distance) * 1%), 0);
    }
    60% {
        clip-path: var(--button-clip-7);
        transform: translate(0, 0);
    }
    31%, 61%, 100% {
        clip-path: var(--button-clip-4);
    }
}
/*#endregion*/

/*#region glitches*/

/*description: good for images. Effect of a dying flickering screen. Sometimes bright, sometimes dark.*/
.cyber-glitch-0
{
    animation: cyber-glitch-0 5s linear infinite;
}


@keyframes cyber-glitch-0
{
    0% {filter: blur(0) brightness(100%) contrast(100%);}
    2% {filter: blur(.05rem) brightness(120%) contrast(120%);}
    4% {filter: blur(.10rem) brightness(150%) contrast(150%);}
    6% {filter: blur(.20rem) brightness(170%) contrast(170%);}
    8% {filter: blur(0) brightness(100%) contrast(100%);}
    10% {filter: blur(0) brightness(100%) contrast(100%);}
    60% {filter: blur(0) brightness(100%) contrast(100%);}
    62% {filter: blur(.05rem) brightness(60%) contrast(100%);}
    64% {filter: blur(.10rem) brightness(40%) contrast(100%);}
    66% {filter: blur(0) brightness(100%) contrast(100%);}
    68% {filter: blur(.05rem) brightness(60%) contrast(100%);}
    70% {filter: blur(.10rem) brightness(40%) contrast(100%);}
    72% {filter: blur(0) brightness(100%) contrast(100%);}
    100% {filter: blur(0) brightness(100%) contrast(100%);}
}


/*description: good for images. nevous little shake first, then distorting/breaking effect by rotating and inverting colors.*/
.cyber-glitch-1
{
    animation: cyber-glitch-1 5s linear infinite;
}

@keyframes cyber-glitch-1
{
    0% {transform: translate(0,0) skew(0deg); filter: invert(0);}
    1% {transform: translate(0,0) skew(-3deg); filter: invert(0);}
    2% {transform: translate(0,0) skew(3deg); filter: invert(0);}
    3% {transform: translate(0,0) skew(0deg); filter: invert(0);}
    60% {transform: translate(0,0) skew(0deg); filter: invert(0);}
    61% {transform: translate(0,0) skew(-3deg); filter: invert(0.2);}
    62% {transform: translate(0,0) skew(0deg); filter: invert(0.2);}
    63% {transform: translate(0,0) skew(3deg); filter: invert(0.8);}
    64% {transform: translate(0,0) skew(0deg); filter: invert(0.2);}
    65% {transform: translate(0,0) skew(0deg); filter: invert(0);}
}

/*description: good for text and containers with text. squeeze effect by removing top an bottom of the element, shake left to right, apply glitchy text-shadow, back to normal*/
.cyber-glitch-2
{
    animation: cyber-glitch-2 4s linear infinite;
}

@keyframes cyber-glitch-2 
{
    0% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;}
    2% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;}
    4% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(-1rem); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;}
    6% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(1rem); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;}
    8% {clip-path: polygon(0 40%, 0 100%, 100% 100%, 100% 40%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;}
    12% {clip-path: polygon(0 10%, 0 40%, 100% 40%, 100% 10%); transform: translateX(0); text-shadow: var(--cyan) 1px 1px, var(--yellow) -1px -1px;}
    14% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;}
    100% {clip-path: var(--og-clip-path); transform: translateX(0); text-shadow: none;}
}

/*description: good for text, especially underlines. Steady blinking*/
.cyber-glitch-3
{
    animation: cyber-glitch-3 1s linear infinite;
}

@keyframes cyber-glitch-3 
{
    0% {visibility: visible;}
    49% {visibility: visible;}
    50% {visibility: hidden;}
    100% {visibility: hidden;}
}

/*description: good for text, especially underlines. Blinking with different pauses in between.*/
.cyber-glitch-4
{
    animation: cyber-glitch-4 5s linear infinite;
}

@keyframes cyber-glitch-4 
{
    0% {visibility: visible;}
    1% {visibility: hidden;}
    2% {visibility: hidden;}
    3% {visibility: visible;}

    20% {visibility: visible;}
    21% {visibility: hidden;}
    24% {visibility: hidden;}
    25% {visibility: visible;}

    40% {visibility: visible;}
    41% {visibility: hidden;}
    42% {visibility: hidden;}
    43% {visibility: visible;}

    44% {visibility: visible;}
    45% {visibility: hidden;}
    46% {visibility: hidden;}
    47% {visibility: visible;}

    60% {visibility: visible;}
    61% {visibility: hidden;}
    64% {visibility: hidden;}
    65% {visibility: visible;}

    70% {visibility: visible;}
    71% {visibility: hidden;}
    72% {visibility: hidden;}
    73% {visibility: visible;}
    
    100% {visibility: visible;}
}
/*#endregion*/

/*#region tiles*/
.cyber-tile,
.cyber-tile-small,
.cyber-tile-big
{
    --tile-width: 360px;
    --tile-padding: 4px;
    --tile-edges: 20px;
    --label-margins: calc(var(--tile-edges) - var(--tile-padding));
    --og-clip-path: polygon(0 0, 0 calc(100% - var(--tile-edges)), var(--tile-edges) 100%, 100% 100%, 100% var(--tile-edges), calc(100% - var(--tile-edges)) 0);
    /*width: var(--tile-width);*/
    min-height: 60px;
    clip-path: var(--og-clip-path);
    /*padding: var(--tile-padding);*/
    padding: 20px;;
    padding-bottom: var(--tile-edges);
    text-align: left;
}

.cyber-tile img,
.cyber-tile-small img,
.cyber-tile-big img
{
    width: 100%;
    height: auto;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% var(--tile-edges), calc(100% - var(--tile-edges)) 0);
}

.cyber-tile label,
.cyber-tile-small label,
.cyber-tile-big label
{
    display: block;
    margin: var(--label-margins) var(--label-margins) 0 var(--label-margins);
}

.cyber-tile img ~ label ,
.cyber-tile-small img ~ label,
.cyber-tile-big img ~ label
{
    margin-top: 0;
}

/*Overriding the values*/
.cyber-tile-small
{
    --tile-width: 240px;
    --tile-edges: 14px;
}

/*Overriding the values*/
.cyber-tile-big
{
    --tile-width: 480px;
    --tile-edges: 26px;
}

/*#endregion*/

/*#region code*/
.code,
code,
.code-block
{
    background-color: var(--dark);
    color: var(--cyan);
    padding: .3rem .4rem .2rem .4rem;
    font-family: Oxanium !important;
    font-size: .75rem;
}

.code-block
{
    clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
    display: block;
    padding: .5rem .6rem .4rem .6rem;
}
.code-block::before
{
    content: attr(data-title);
    display: block;
    color: var(--yellow);
    text-shadow: var(--cyan) 1px 1px;
}
/*#endregion*/

/*#region tables*/
table.cyber-table
{
    padding: 0 !important;
    border: none !important;
    display: inline-block;
    border-collapse: collapse;
}

table.cyber-table th,
table.cyber-table td
{
    border: 1px solid;
    padding: .2rem .5rem;
}

table.cyber-table thead th
{
    border-bottom-width: 2px ;
}

table.cyber-table::before,
table.cyber-table::after
{
    content: ' ';
    width: 100%;
    display: block;
    background-color: var(--ac);
    position: relative;
    height: 6px;
}

table.cyber-table::before,
table.cyber-table.cyber-style-0::before
{
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 80% 0, calc(80% - 6px) 100%, 30% 100%, calc(30% - 6px) 0, 6px 0);
}

table.cyber-table::after,
table.cyber-table.cyber-style-0::after
{
    clip-path: polygon(60% 0, calc(60% + 6px) 100%, 100% 100%, 100% 0);
}

table.cyber-table.cyber-style-1::before
{
    clip-path: polygon(0 100%, 6px 0, 10% 0, 10% 100%, 80% 100%, 
                       calc(80% + 6px) 0, 95% 0, 95% 100%, calc(95% + 6px) 100%, calc(95% + 6px) 0, calc(95% + 2 * 6px) 0, calc(95% + 2 * 6px) 100%,
                       calc(95% + 3 * 6px) 100%, calc(95% + 3 * 6px) 0, 100%  0, 100% 100%);
}

table.cyber-table.cyber-style-1::after
{
    clip-path: polygon(100% 0, 100% 100%, calc(100% - 6px) 100%, calc(100% - 6px) 0,
                       calc(100% - 2 * 6px) 0, calc(100% - 2 * 6px) 100%, 90% 100%, 90% 0, 75% 0, 75% 100%, 60% 100%, calc(60% - 6px) 0);
}

table.cyber-table.cyber-style-2::before
{
 
    clip-path: polygon(0 100%, 6px 0, calc(2 * 6px) 100%, calc(3 * 6px) 0, calc(4 * 6px + 10%) 0,calc(4 * 6px + 10%) 50%,
                        35% 50%, 35% 100%, 70% 100%, 70% 50%, 80% 50%, 80% 100%);
}

table.cyber-table.cyber-style-2::after
{
 
    clip-path: polygon(0 0, 0 50%, 10% 50%, 10% 0, 30% 0, 30% 100%, 40% 100%, 40% 0,
                        70% 0, 70% 50%, 80% 50%, 80% 100%, 90% 100%, calc(100% - 6px) 100%, 100% 0);
}

/*#endregion*/

/*#region headings*/
.cyber-h
{
    display: block;
    width: 60%;
}

.cyber-h::after
{
    content: ' ';
    width: 100%;
    height: 6px;
    display: block;
    background-color: var(--ac);
    clip-path: polygon(0 0, 0 100%, 10% 100%, calc(10% + 4px) 2px, 100% 2px, 100% 0);
}

h1.cyber-h
{
    font-size: 3.0rem;
    margin: 2.0rem 0;
    width: 100%;
}

h2.cyber-h
{
    font-size: 2.5rem;
    margin: 1.6rem 0;
    width: 90%;
}

h3.cyber-h
{
    font-size: 2rem;
    margin: 1.4rem 0;
    width: 80%;
}

h4.cyber-h
{
    font-size: 1.5rem;
    margin: 1.2rem 0;
    width: 70%;
}

h5.cyber-h
{
    font-size: 1.0rem;
    margin: 1.0rem 0;
    width: 60%;
}

h6.cyber-h
{
    font-size: 1.0rem;
    margin: 1.0rem 0;
    font-weight: 400;
    width: 60%;
}
/*#endregion*/

/*#region banners*/
.cyber-banner,
.cyber-banner-short
{
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
    overflow: hidden;
    clip-path: polygon(0 0, 0 100%, calc(100% - 20px) 100%, 100% calc(100% - 20px), 100% 0);
    
    /*default: --purple --red --yellow --cyan*/
    background: linear-gradient(90deg, var(--banner-color1), var(--banner-color2), var(--banner-color3), var(--banner-color4) var(--banner-gradient-stop));
}

.cyber-banner-short
{
    --banner-gradient-stop: 220px;
}

.cyber-banner.bg-yellow,
.cyber-banner-short.bg-yellow
{
    --banner-color1: var(--cyan);
    --banner-color2: var(--purple);
    --banner-color3: var(--red);
    --banner-color4: var(--yellow);
}

.cyber-banner.bg-purple,
.cyber-banner-short.bg-purple
{
    --banner-color1: var(--red);
    --banner-color2: var(--yellow);
    --banner-color3: var(--cyan);
    --banner-color4: var(--purple);
}

.cyber-banner.bg-red,
.cyber-banner-short.bg-red
{
    --banner-color1: var(--yellow);
    --banner-color2: var(--cyan);
    --banner-color3: var(--purple);
    --banner-color4: var(--red);
}


.cyber-banner::before,
.cyber-banner-short::before
{
    content: " ";
    height: inherit;
    display: block;
    float: left;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
Note: Inline svg shit doesnt work sometimes. Make sure to optimize it with https://jakearchibald.github.io/svgomg/ (import and download)
*/
.cyber-banner::before
{
    width: 405px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="405" height="50"><path d="M0 0v50h20L45 0zM47 0 22 50h28L75 0zM79 0 54 50h26l25-50zM111 0 86 50h24l25-50zM143 0l-25 50h22l25-50zM175 0l-25 50h20l25-50zM207 0l-25 50h18l25-50zM239 0l-25 50h16l25-50zM271 0l-25 50h14l25-50zM303 0l-25 50h12l25-50zM335 0l-25 50h10l25-50zM367 0l-25 50h8l25-50zM399 0l-25 50h6l25-50z"/></svg>');
}

.cyber-banner-short::before
{
    width: 220px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="50"><path d="m0 0-10 50h20L35 0zM37 0 12 50h18L55 0zM59 0 34 50h16L75 0zM81 0 56 50h14L95 0zM103 0 78 50h12l25-50zM125 0l-25 50h10l25-50zM147 0l-25 50h8l25-50zM169 0l-25 50h6l25-50zM191 0l-25 50h4l25-50zM213 0l-25 50h2l25-50z"/></svg>')
}
/*#endregion*/

/*#region inputs*/
.cyber-input,
.cyber-input-long,
.cyber-input-full,
.cyber-select,
.cyber-select-long,
.cyber-select-full
{
    font-size: var(--input-font-size);
}

.cyber-select,
.cyber-select-long,
.cyber-select-full
{
    background-color: transparent !important;
}

.cyber-input input,
.cyber-input-long input,
.cyber-input-full input,
.cyber-select select,
.cyber-select-long select,
.cyber-select-full select
{
    width: var(--input-width);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    background-color: transparent;
    padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bot) var(--input-padding-left);
    border: none;
    text-decoration: none;
    outline: none;
}

.cyber-input-long input,
.cyber-select-long select
{
    --input-width: 320px;
}

.cyber-input-full input,
.cyber-select-full select
{
    --input-width: 100%;
}


.cyber-select select,
.cyber-select-long select,
.cyber-select-full select
{
    width: calc(var(--input-width) + var(--input-padding-left) + var(--input-padding-right));
    font-family: BlenderProBook;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
}

.cyber-select select option,
.cyber-select-long select option,
.cyber-select-full select option
{
    font-family: "Courier New";
    font-size: .85rem;
}

.cyber-input::before,
.cyber-input-long::before,
.cyber-input-full::before,
.cyber-select::before,
.cyber-select-long::before,
.cyber-select-full::before
{
    content: 'X';
    color: transparent;
    position: absolute;
    display: block;
    width: var(--input-width);
    padding: var(--input-padding-top) var(--input-padding-right) var(--input-padding-bot) var(--input-padding-left);
    clip-path: polygon(0 calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 8px), calc(100% - 20px) calc(100% - 8px), calc(100% - 20px - 8px) calc(100% - 2px), 11px calc(100% - 2px), 0 calc(100% - 13px));
    background-color: var(--ac);
}

.cyber-select::before,
.cyber-select-long::before,
.cyber-select-full::before
{ 
    clip-path: polygon(0 calc(100% - 12px), 0 100%, calc(100% - 30px) 100%, calc(100% - 30px) 110%, calc(100% - 20px) 110%, calc(100% - 20px) calc(100% - 8px), calc(100% - 30px) calc(100% - 18px), calc(100% - 10px) calc(100% - 18px), calc(100% - 20px) calc(100% - 8px), calc(100% - 20px) 110%, calc(100% - 30px) 110%, calc(100% - 30px) calc(100% - 2px), 10px calc(100% - 2px));
    z-index: -1;
}

.cyber-check,
.cyber-radio
{
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--black);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}

.cyber-check::before,
.cyber-radio::before
{
    content: "";
    width: var(--checkbox-inner-size);
    height: var(--checkbox-inner-size);
    background-color: var(--ac);
    position: relative;
    top: calc((var(--checkbox-size) - var(--checkbox-inner-size)) / 2 - 2px);
    left: calc((var(--checkbox-size) - var(--checkbox-inner-size)) / 2 - 2px);
    display: block;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: 120ms transform ease-in-out;
    transition: 120ms transform ease-in-out;

}

.cyber-check:checked:before,
.cyber-radio:checked:before
{
    -webkit-transform: scale(1);
    transform: scale(1);
}

.cyber-radio
{
    border-radius: 50%;
}

.cyber-radio::before
{
    border-radius: 50%;
}

label
{
    vertical-align: middle;
}

/*#endregion*/

/*#region lists*/
.cyber-ul,
.cyber-ul-1,
.cyber-ul-2
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.cyber-ul li,
.cyber-ul-1 li,
.cyber-ul-2 li
{
    margin-bottom: .25rem;
}

.cyber-ul-1,
.cyber-ul-2
{
    padding-left: 1.5rem;
}


.cyber-ul li::before,
.cyber-ul-1 li::before,
.cyber-ul-2 li::before
{
    content: " ";
    width: 1rem;
    height: 1rem;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m50 0 50 50-80 50z"/></svg>');
    -webkit-mask-position: top left;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 1rem 1rem;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m50 0 50 50-80 50z"/></svg>');
    mask-position: top left;
    mask-repeat: no-repeat;
    mask-size: 1rem 1rem;
    background-color: var(--ac);
    display: inline-block;
    margin-right: .5rem;
    vertical-align: middle;
}

.cyber-ul-1 li::before
{
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path fill="none" stroke="black" stroke-width="10" d="m50 8 40 40-62 40z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path fill="none" stroke="black" stroke-width="10" d="m50 8 40 40-62 40z"/></svg>');
}

.cyber-ul-2 li::before
{
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path fill="none" stroke="black" stroke-width="5" d="m50 4 44 44-70 46z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path fill="none" stroke="black" stroke-width="5" d="m50 4 44 44-70 46z"/></svg>');
}
/*#endregion*/

/*#region a*/
.cyber-a
{
    color: var(--blue);
}
.cyber-a:hover
{
    text-shadow: var(--cyan) 0px 0px 1px;
}
/*#endregion*/

@media screen and (max-width: 768px)
{
    :root
    {
        --root-font-size: 14px;
    }

    .cyber-tile
    {
        max-width: 100%;
    }

    .cyber-tile-big
    {
        max-width: 100%;
    }
}