@font-face { font-family: "Input-Mono"; src: url("../fonts/InputMono-Light.ttf");}
@font-face { font-family: "Iosevka"; src: url("../fonts/iosevka-sparkle-regular.ttf");}
body, html { margin: 0; padding: 0; background-color: #282a36; font-family: "Input-Mono";}

/*================*/
/*================*/
/* CSS for MOBILE */
/*================*/
/*================*/

/************************/
/* CSS for TEXT EDITOR. */
/************************/

.text-editor {
	display: grid;
	width: 100%;
	
	grid-template-columns: 10% 90%;
}

.text-editor .line-numbers {
	font-size: 70%;
}

.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.no-link { text-decoration: none; }
.underline { text-decoration: underline; }
.text-xs-bigger { font-size: 13px; }
.text-sm { font-size: 14px; }
.text-sm-big { font-size: 14.5px; }
.text-sm-bigger { font-size: 15px; }
.text-base { font-size: 16px; }
.text-base-bigger { font-size: 16.8px; }
.text-normal { font-style: normal; }
.weight-bold { font-weight: bold; }
.weight-normal { font-weight: normal; }
.large-line-height { line-height: 1.65; }
.medium-line-height { line-height: 1.5; }
.inline-block { display: inline-block; }
.block { display: block; }
.hidden { display: none; }
.grid { display: grid; }
.fixed { position: fixed; }
.valign-top { vertical-align: top; }
.valign-middle { vertical-align: middle; }
.m-0 { margin: 0; }
.mt-2\.5px { margin-top: 2.5px; }
.mt-4\.5px { margin-top: 4.5px; }
.mt-6px { margin-top: 6px; }
.mt-8px { margin-top: 8px; }
.mt-20px { margin-top: 20px; }
.mt-22px { margin-top: 22px; }
.mt-25px { margin-top: 25px; }
.mt-34px { margin-top: 34px; }
.mt-38px { margin-top: 38px; }
.mt-48px { margin-top: 48px; }
.mt-54px { margin-top: 54px; }
.mt-60px { margin-top: 60px; }
.mt-80px { margin-top: 80px; }
.mt-180px { margin-top: 180px; }
.mt-170px { margin-top: 170px; }
.ml-0 { margin-left: 0; }
.ml-36px { margin-left: 36px; }
.ml-full { margin-left: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-0\.75pcnt { margin-top: 0.75%; margin-bottom: 0.75%; }
.my-1pcnt { margin-top: 1%; margin-bottom: 1%; }
.mb-0 { margin-bottom: 0; }
.p-0 { padding: 0; }
.p-1pcnt { padding: 1%; }
.p-1\.5pcnt { padding: 1.5%; }
.p-3\.5pcnt { padding: 3.5%; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-5\.83px { padding-top: 5.83px; padding-bottom: 5.83px; }
.pt-60px { padding-top: 60px; }
.py-1\.5pcnt { padding-top: 1.5%; padding-bottom: 1.5%; }
.py-2pcnt { padding-top: 2%; padding-bottom: 2%; }
.py-5pcnt { padding-top: 5%; padding-bottom: 5%; }
.py-6pcnt { padding-top: 6%; padding-bottom: 6%; }
.t-0 { top: 0; }
.l-0 { left: 0; }
.w-full { width: 100%; }
.w-1\/2 { width: 50%; }
.w-2\/3 { width: 66.6%; }
.w-1\/4 { width: 25%; }
.w-0\.92\/4 { width: 23%; }
.w-1\.05\/4 { width: 26.25%; }
.w-2\/5 { width: 40%; }
.w-2\.25\/5 { width: 45%; }
.w-3\/5 { width: 60%; }
.w-1\.2\/10 { width: 12%; }
.w-3\.5\/10 { width: 35%; }
.w-4\.5\/10 { width: 45%; }
.w-5\/10 { width: 50%; }
.w-9\/10 { width: 90%; }
.w-7\/10 { width: 70%; }
.w-9\.5\/10 { width: 95%; }
.h-full { height: 100%; }
.border-none { border: none; }
.border-radius-2px { border-radius: 2px; }
.border-radius-3px { border-radius: 3px; }
.cursor-pointer { cursor: pointer; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.transition-all-0\.2s { transition: all 0.2s; }

@media only screen and (min-width: 768px) {
    .md\:text-center { text-align: center; }
    .md\:uppercase { text-transform: uppercase; }
    .md\:no-link { text-decoration: none; }
    .md\:underline { text-decoration: underline; }
    .md\:text-xs-bigger { font-size: 13px; }
    .md\:text-sm { font-size: 14px; }
    .md\:text-sm-big { font-size: 14.5px; }
    .md\:text-sm-bigger { font-size: 15px; }
    .md\:text-base { font-size: 16px; }
    .md\:text-base-bigger { font-size: 16.8px; }
    .md\:text-normal { font-style: normal; }
    .md\:weight-bold { font-weight: bold; }
    .md\:weight-normal { font-weight: normal; }
    .md\:large-line-height { line-height: 1.6; }
    .md\:medium-line-height { line-height: 1.5; }
    .md\:inline-block { display: inline-block; }
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:grid { display: grid; }
    .md\:fixed { position: fixed; }
    .md\:valign-top { vertical-align: top; }
    .md\:valign-middle { vertical-align: middle; }
    .md\:m-0 { margin: 0; }
    .md\:mt-2\.5px { margin-top: 2.5px; }
    .md\:mt-4\.5px { margin-top: 4.5px; }
    .md\:mt-6px { margin-top: 6px; }
    .md\:mt-8px { margin-top: 8px; }
    .md\:mt-20px { margin-top: 20px; }
    .md\:mt-22px { margin-top: 22px; }
    .md\:mt-25px { margin-top: 25px; }
    .md\:mt-34px { margin-top: 34px; }
    .md\:mt-38px { margin-top: 38px; }
    .md\:mt-48px { margin-top: 48px; }
    .md\:mt-54px { margin-top: 54px; }
    .md\:mt-60px { margin-top: 60px; }
    .md\:mt-80px { margin-top: 80px; }
    .md\:mt-180px { margin-top: 180px; }
    .md\:mt-170px { margin-top: 170px; }
    .md\:ml-0 { margin-left: 0; }
    .md\:ml-36px { margin-left: 36px; }
    .md\:ml-full { margin-left: 100%; }
    .md\:mx-auto { margin-left: auto; margin-right: auto; }
    .md\:my-0 { margin-top: 0; margin-bottom: 0; }
    .md\:my-0\.75pcnt { margin-top: 0.75%; margin-bottom: 0.75%; }
    .md\:my-1pcnt { margin-top: 1%; margin-bottom: 1%; }
    .md\:mb-0 { margin-bottom: 0; }
    .md\:p-0 { padding: 0; }
    .md\:p-1pcnt { padding: 1%; }
    .md\:p-1\.5pcnt { padding: 1.5%; }
    .md\:p-3\.5pcnt { padding: 3.5%; }
    .md\:px-0 { padding-left: 0; padding-right: 0; }
    .md\:py-5\.83px { padding-top: 5.83px; padding-bottom: 5.83px; }
    .md\:pt-60px { padding-top: 60px; }
    .md\:py-1\.5pcnt { padding-top: 1.5%; padding-bottom: 1.5%; }
    .md\:py-2pcnt { padding-top: 2%; padding-bottom: 2%; }
    .md\:py-5pcnt { padding-top: 5%; padding-bottom: 5%; }
    .md\:py-6pcnt { padding-top: 6%; padding-bottom: 6%; }
    .md\:t-0 { top: 0; }
    .md\:l-0 { left: 0; }
    .md\:w-full { width: 100%; }
    .md\:w-1\/2 { width: 50%; }
    .md\:w-2\/3 { width: 66.6%; }
    .md\:w-1\/4 { width: 25%; }
    .md\:w-0\.92\/4 { width: 23%; }
    .md\:w-1\.05\/4 { width: 26.25%; }
    .md\:w-2\/5 { width: 40%; }
    .md\:w-2\.25\/5 { width: 45%; }
    .md\:w-3\/5 { width: 60%; }
    .md\:w-1\.2\/10 { width: 12%; }
    .md\:w-3\.5\/10 { width: 35%; }
    .md\:w-4\.5\/10 { width: 45%; }
    .md\:w-5\/10 { width: 50%; }
    .md\:w-7\/10 { width: 80%; }
    .md\:w-9\/10 { width: 90%; }
    .md\:w-9\.5\/10 { width: 95%; }
    .md\:h-full { height: 100%; }
    .md\:border-none { border: none; }
    .md\:border-radius-2px { border-radius: 2px; }
    .md\:border-radius-3px { border-radius: 3px; }
    .md\:cursor-pointer { cursor: pointer; }
    .md\:z-1 { z-index: 1; }
    .md\:z-2 { z-index: 2; }
    .md\:transition-all-0\.2s { transition: all 0.2s; }
}

@media only screen and (min-width: 1024px) {
    .lg\:text-center { text-align: center; }
    .lg\:uppercase { text-transform: uppercase; }
    .lg\:no-link { text-decoration: none; }
    .lg\:underline { text-decoration: underline; }
    .lg\:text-xs-bigger { font-size: 13px; }
    .lg\:text-sm { font-size: 14px; }
    .lg\:text-sm-big { font-size: 14.5px; }
    .lg\:text-sm-bigger { font-size: 15px; }
    .lg\:text-base { font-size: 16px; }
    .lg\:text-base-bigger { font-size: 16.8px; }
    .lg\:text-normal { font-style: normal; }
    .lg\:weight-bold { font-weight: bold; }
    .lg\:weight-normal { font-weight: normal; }
    .lg\:large-line-height { line-height: 1.6; }
    .lg\:medium-line-height { line-height: 1.5; }
    .lg\:inline-block { display: inline-block; }
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:grid { display: grid; }
    .lg\:fixed { position: fixed; }
    .lg\:valign-top { vertical-align: top; }
    .lg\:valign-middle { vertical-align: middle; }
    .lg\:m-0 { margin: 0; }
    .lg\:mt-2\.5px { margin-top: 2.5px; }
    .lg\:mt-4\.5px { margin-top: 4.5px; }
    .lg\:mt-6px { margin-top: 6px; }
    .lg\:mt-8px { margin-top: 8px; }
    .lg\:mt-20px { margin-top: 20px; }
    .lg\:mt-22px { margin-top: 22px; }
    .lg\:mt-25px { margin-top: 25px; }
    .lg\:mt-34px { margin-top: 34px; }
    .lg\:mt-38px { margin-top: 38px; }
    .lg\:mt-48px { margin-top: 48px; }
    .lg\:mt-54px { margin-top: 54px; }
    .lg\:mt-60px { margin-top: 60px; }
    .lg\:mt-80px { margin-top: 80px; }
    .lg\:mt-180px { margin-top: 180px; }
    .lg\:mt-170px { margin-top: 170px; }
    .lg\:ml-0 { margin-left: 0; }
    .lg\:ml-36px { margin-left: 36px; }
    .lg\:ml-full { margin-left: 100%; }
    .lg\:mx-auto { margin-left: auto; margin-right: auto; }
    .lg\:my-0 { margin-top: 0; margin-bottom: 0; }
    .lg\:my-0\.75pcnt { margin-top: 0.75%; margin-bottom: 0.75%; }
    .lg\:my-1pcnt { margin-top: 1%; margin-bottom: 1%; }
    .lg\:mb-0 { margin-bottom: 0; }
    .lg\:p-0 { padding: 0; }
    .lg\:p-1pcnt { padding: 1%; }
    .lg\:p-1\.5pcnt { padding: 1.5%; }
    .lg\:p-3\.5pcnt { padding: 3.5%; }
    .lg\:px-0 { padding-left: 0; padding-right: 0; }
    .lg\:py-5\.83px { padding-top: 5.83px; padding-bottom: 5.83px; }
    .lg\:pt-60px { padding-top: 60px; }
    .lg\:py-1\.5pcnt { padding-top: 1.5%; padding-bottom: 1.5%; }
    .lg\:py-2pcnt { padding-top: 2%; padding-bottom: 2%; }
    .lg\:py-5pcnt { padding-top: 5%; padding-bottom: 5%; }
    .lg\:py-6pcnt { padding-top: 6%; padding-bottom: 6%; }
    .lg\:t-0 { top: 0; }
    .lg\:l-0 { left: 0; }
    .lg\:w-full { width: 100%; }
    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-2\/3 { width: 66.6%; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-0\.92\/4 { width: 23%; }
    .lg\:w-1\.05\/4 { width: 26.25%; }
    .lg\:w-2\/5 { width: 40%; }
    .lg\:w-2\.25\/5 { width: 45%; }
    .lg\:w-3\/5 { width: 60%; }
    .lg\:w-1\.2\/10 { width: 12%; }
    .lg\:w-3\.5\/10 { width: 35%; }
    .lg\:w-4\.5\/10 { width: 45%; }
    .lg\:w-5\/10 { width: 50%; }
    .lg\:w-7\/10 { width: 70%; }
    .lg\:w-9\/10 { width: 90%; }
    .lg\:w-9\.5\/10 { width: 95%; }
    .lg\:h-full { height: 100%; }
    .lg\:border-none { border: none; }
    .lg\:border-radius-2px { border-radius: 2px; }
    .lg\:border-radius-3px { border-radius: 3px; }
    .lg\:cursor-pointer { cursor: pointer; }
    .lg\:z-1 { z-index: 1; }
    .lg\:z-2 { z-index: 2; }
    .lg\:transition-all-0\.2s { transition: all 0.2s; }
}

@media only screen and (min-width: 1280px) {
    .xl\:text-center { text-align: center; }
    .xl\:uppercase { text-transform: uppercase; }
    .xl\:no-link { text-decoration: none; }
    .xl\:underline { text-decoration: underline; }
    .xl\:text-xs-bigger { font-size: 13px; }
    .xl\:text-sm { font-size: 14px; }
    .xl\:text-sm-big { font-size: 14.5px; }
    .xl\:text-sm-bigger { font-size: 15px; }
    .xl\:text-base { font-size: 16px; }
    .xl\:text-base-bigger { font-size: 16.8px; }
    .xl\:text-normal { font-style: normal; }
    .xl\:weight-bold { font-weight: bold; }
    .xl\:weight-normal { font-weight: normal; }
    .xl\:large-line-height { line-height: 1.6; }
    .xl\:medium-line-height { line-height: 1.5; }
    .xl\:inline-block { display: inline-block; }
    .xl\:block { display: block; }
    .xl\:hidden { display: none; }
    .xl\:grid { display: grid; }
    .xl\:fixed { position: fixed; }
    .xl\:valign-top { vertical-align: top; }
    .xl\:valign-middle { vertical-align: middle; }
    .xl\:m-0 { margin: 0; }
    .xl\:mt-2\.5px { margin-top: 2.5px; }
    .xl\:mt-4\.5px { margin-top: 4.5px; }
    .xl\:mt-6px { margin-top: 6px; }
    .xl\:mt-8px { margin-top: 8px; }
    .xl\:mt-20px { margin-top: 20px; }
    .xl\:mt-22px { margin-top: 22px; }
    .xl\:mt-25px { margin-top: 25px; }
    .xl\:mt-34px { margin-top: 34px; }
    .xl\:mt-38px { margin-top: 38px; }
    .xl\:mt-48px { margin-top: 48px; }
    .xl\:mt-54px { margin-top: 54px; }
    .xl\:mt-60px { margin-top: 60px; }
    .xl\:mt-80px { margin-top: 80px; }
    .xl\:mt-180px { margin-top: 180px; }
    .xl\:mt-170px { margin-top: 170px; }
    .xl\:ml-0 { margin-left: 0; }
    .xl\:ml-36px { margin-left: 36px; }
    .xl\:ml-full { margin-left: 100%; }
    .xl\:mx-auto { margin-left: auto; margin-right: auto; }
    .xl\:my-0 { margin-top: 0; margin-bottom: 0; }
    .xl\:my-0\.75pcnt { margin-top: 0.75%; margin-bottom: 0.75%; }
    .xl\:my-1pcnt { margin-top: 1%; margin-bottom: 1%; }
    .xl\:mb-0 { margin-bottom: 0; }
    .xl\:p-0 { padding: 0; }
    .xl\:p-1pcnt { padding: 1%; }
    .xl\:p-1\.5pcnt { padding: 1.5%; }
    .xl\:p-3\.5pcnt { padding: 3.5%; }
    .xl\:px-0 { padding-left: 0; padding-right: 0; }
    .xl\:py-5\.83px { padding-top: 5.83px; padding-bottom: 5.83px; }
    .xl\:pt-60px { padding-top: 60px; }
    .xl\:py-1\.5pcnt { padding-top: 1.5%; padding-bottom: 1.5%; }
    .xl\:py-2pcnt { padding-top: 2%; padding-bottom: 2%; }
    .xl\:py-5pcnt { padding-top: 5%; padding-bottom: 5%; }
    .xl\:py-6pcnt { padding-top: 6%; padding-bottom: 6%; }
    .xl\:t-0 { top: 0; }
    .xl\:l-0 { left: 0; }
    .xl\:w-full { width: 100%; }
    .xl\:w-1\/2 { width: 50%; }
    .xl\:w-2\/3 { width: 66.6%; }
    .xl\:w-1\/4 { width: 25%; }
    .xl\:w-0\.92\/4 { width: 23%; }
    .xl\:w-1\.05\/4 { width: 26.25%; }
    .xl\:w-2\/5 { width: 40%; }
    .xl\:w-2\.25\/5 { width: 45%; }
    .xl\:w-3\/5 { width: 60%; }
    .xl\:w-1\.2\/10 { width: 12%; }
    .xl\:w-3\.5\/10 { width: 35%; }
    .xl\:w-4\.5\/10 { width: 45%; }
    .xl\:w-5\/10 { width: 50%; }
    .xl\:w-7\/10 { width: 70%; }
    .xl\:w-9\/10 { width: 90%; }
    .xl\:w-9\.5\/10 { width: 95%; }
    .xl\:h-full { height: 100%; }
    .xl\:border-none { border: none; }
    .xl\:border-radius-2px { border-radius: 2px; }
    .xl\:border-radius-3px { border-radius: 3px; }
    .xl\:cursor-pointer { cursor: pointer; }
    .xl\:z-1 { z-index: 1; }
    .xl\:z-2 { z-index: 2; }
    .xl\:transition-all-0\.2s { transition: all 0.2s; }
}

@media only screen and (min-width: 1536px) {
    .\32 xl\:text-center { text-align: center; }
    .\32 xl\:uppercase { text-transform: uppercase; }
    .\32 xl\:no-link { text-decoration: none; }
    .\32 xl\:underline { text-decoration: underline; }
    .\32 xl\:text-xs-bigger { font-size: 13px; }
    .\32 xl\:text-sm { font-size: 14px; }
    .\32 xl\:text-sm-big { font-size: 14.5px; }
    .\32 xl\:text-sm-bigger { font-size: 15px; }
    .\32 xl\:text-base { font-size: 16px; }
    .\32 xl\:text-base-bigger { font-size: 16.8px; }
    .\32 xl\:text-normal { font-style: normal; }
    .\32 xl\:weight-bold { font-weight: bold; }
    .\32 xl\:weight-normal { font-weight: normal; }
    .\32 xl\:large-line-height { line-height: 1.6; }
    .\32 xl\:medium-line-height { line-height: 1.5; }
    .\32 xl\:inline-block { display: inline-block; }
    .\32 xl\:block { display: block; }
    .\32 xl\:hidden { display: none; }
    .\32 xl\:grid { display: grid; }
    .\32 xl\:fixed { position: fixed; }
    .\32 xl\:valign-top { vertical-align: top; }
    .\32 xl\:valign-middle { vertical-align: middle; }
    .\32 xl\:m-0 { margin: 0; }
    .\32 xl\:mt-2\.5px { margin-top: 2.5px; }
    .\32 xl\:mt-4\.5px { margin-top: 4.5px; }
    .\32 xl\:mt-6px { margin-top: 6px; }
    .\32 xl\:mt-8px { margin-top: 8px; }
    .\32 xl\:mt-20px { margin-top: 20px; }
    .\32 xl\:mt-22px { margin-top: 22px; }
    .\32 xl\:mt-25px { margin-top: 25px; }
    .\32 xl\:mt-34px { margin-top: 34px; }
    .\32 xl\:mt-38px { margin-top: 38px; }
    .\32 xl\:mt-48px { margin-top: 48px; }
    .\32 xl\:mt-54px { margin-top: 54px; }
    .\32 xl\:mt-60px { margin-top: 60px; }
    .\32 xl\:mt-80px { margin-top: 80px; }
    .\32 xl\:mt-170px { margin-top: 170px; }
    .\32 xl\:mt-180px { margin-top: 180px; }
    .\32 xl\:ml-0 { margin-left: 0; }
    .\32 xl\:ml-36px { margin-left: 36px; }
    .\32 xl\:ml-full { margin-left: 100%; }
    .\32 xl\:mx-auto { margin-left: auto; margin-right: auto; }
    .\32 xl\:my-0 { margin-top: 0; margin-bottom: 0; }
    .\32 xl\:my-0\.75pcnt { margin-top: 0.75%; margin-bottom: 0.75%; }
    .\32 xl\:my-1pcnt { margin-top: 1%; margin-bottom: 1%; }
    .\32 xl\:mb-0 { margin-bottom: 0; }
    .\32 xl\:p-0 { padding: 0; }
    .\32 xl\:p-1pcnt { padding: 1%; }
    .\32 xl\:p-1\.5pcnt { padding: 1.5%; }
    .\32 xl\:p-3\.5pcnt { padding: 3.5%; }
    .\32 xl\:px-0 { padding-left: 0; padding-right: 0; }
    .\32 xl\:py-5\.83px { padding-top: 5.83px; padding-bottom: 5.83px; }
    .\32 xl\:pt-60px { padding-top: 60px; }
    .\32 xl\:py-1\.5pcnt { padding-top: 1.5%; padding-bottom: 1.5%; }
    .\32 xl\:py-2pcnt { padding-top: 2%; padding-bottom: 2%; }
    .\32 xl\:py-5pcnt { padding-top: 5%; padding-bottom: 5%; }
    .\32 xl\:py-6pcnt { padding-top: 6%; padding-bottom: 6%; }
    .\32 xl\:t-0 { top: 0; }
    .\32 xl\:l-0 { left: 0; }
    .\32 xl\:w-full { width: 100%; }
    .\32 xl\:w-1\/2 { width: 50%; }
    .\32 xl\:w-2\/3 { width: 66.6%; }
    .\32 xl\:w-1\/4 { width: 25%; }
    .\32 xl\:w-0\.92\/4 { width: 23%; }
    .\32 xl\:w-1\.05\/4 { width: 26.25%; }
    .\32 xl\:w-2\/5 { width: 40%; }
    .\32 xl\:w-2\.25\/5 { width: 45%; }
    .\32 xl\:w-3\/5 { width: 60%; }
    .\32 xl\:w-1\.2\/10 { width: 12%; }
    .\32 xl\:w-3\.5\/10 { width: 35%; }
    .\32 xl\:w-4\.5\/10 { width: 45%; }
    .\32 xl\:w-5\/10 { width: 50%; }
    .\32 xl\:w-7\/10 { width: 70%; }
    .\32 xl\:w-9\/10 { width: 90%; }
    .\32 xl\:w-9\.5\/10 { width: 95%; }
    .\32 xl\:h-full { height: 100%; }
    .\32 xl\:border-none { border: none; }
    .\32 xl\:border-radius-2px { border-radius: 2px; }
    .\32 xl\:border-radius-3px { border-radius: 3px; }
    .\32 xl\:cursor-pointer { cursor: pointer; }
    .\32 xl\:z-1 { z-index: 1; }
    .\32 xl\:z-2 { z-index: 2; }
    .\32 xl\:transition-all-0\.2s { transition: all 0.2s; }
}

.text-lavender { color: #bd93f9; }
.text-pink { color: #ff79c6; }
.text-orange { color: #ffb86c; }
.bg-yellow-1 { background-color: yellow; }
.text-yellow-2 { color: #f1fa8c; }
.text-light-blue { color: #2196f3; }
.text-light-light-blue { color: #81D4FA; }
.bg-bluish-black { background-color: #282a36; }
.text-green { color: #50fa7b; }
.text-light-green { color: #7CB342; }
.text-cyan { color: #8be9fd; }
.text-dark-pink { color: #6272a4; }
.text-red { color: #ff5555; }
.text-dark-gray-2 { color: #44475a; }
.bg-dark-gray-2 { background-color: #44475a; }
.text-light-gray-1 { color: #fafafa; }
.bg-light-gray-1 { background-color: #fafafa; }
.text-light-gray-2 { color: #f8f8f2; }
.bg-light-gray-2 { background-color: #f8f8f2; }
.text-light-gray-3 { color: #edf0f5; }
.bg-light-gray-3 { background-color: #edf0f5; }
.text-black { color: black !important; }
.text-white { color: white; }
.bg-white { background-color: white !important; }

.light-mode-border { border: 1px solid #6c7680 !important; }
.light-red { color: #FF7043; }
.bg-color { color: #282a36;}

.navbar-box-shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/*******************/
/* CSS for NAVBAR. */
/*******************/

.mobile-navbar { grid-template-columns: 31% 62%; }

.mobile-navbar .half:nth-of-type(1) {
	display: grid; grid-template-columns: repeat(1, 83.8%);
	justify-content: start;
}
.mobile-navbar .half:nth-of-type(2) {
	display: grid; grid-template-columns: repeat(2, 41.9%);
	column-gap: 3%; justify-content: end;
}

.mobile-navbar .half div p, .mobile-navbar .half a p, .mobile-navbar .half button p {
	display: inline-block;
	width: 50%;
	margin: 0;
	padding: 6% 0%;
	
	text-align: center;
	vertical-align: middle;

        text-transform: uppercase;
}

.mobile-navbar .half div img, .mobile-navbar .half a img, .mobile-navbar .half button img {
	display: inline-block;
	width: 16%;
	margin: 0;
	padding: 0 0 3% 0;
	
	vertical-align: middle;
}

.mobile-navbar-menu .close {
	margin: 5% 0% 20% 65%;
}

/*=================*/
/*=================*/
/* CSS for TABLETS */
/*=================*/
/*=================*/

@media only screen and (min-width: 768px) {

	.mobile-navbar { grid-template-columns: 32.3% 64.7%; }
	.mobile-navbar .half:nth-of-type(1) { grid-template-columns: repeat(1, 54.17%);	}
	.mobile-navbar .half:nth-of-type(2) {
		grid-template-columns: repeat(2, 27.04%);
		column-gap: 1.5%;
	}
	.mobile-navbar .half div img, .mobile-navbar .half a img {
		width: 13%;
		padding: 0 0 1% 0;
	}

        .mobile-navbar-menu .close { margin: 1.5% 0% 15% 75%; }
        .mobile-navbar-menu .close img { width: 7%; }

	.text-editor { grid-template-columns: 6% 94%; }
}

/*=========================*/
/*=========================*/
/* CSS for DESKTOP SCREENS */
/*=========================*/
/*=========================*/

@media only screen and (min-width: 1024px) {

	.desktop-navbar {
                grid-template-columns: 12.48% 12.48% 12.48% 17% 12.48% 12.48% 12.48%;
                column-gap: 1%;
                padding: 1%;
	}

	.text-editor { grid-template-columns: 4% 96%; }
	.text-editor .line-numbers { font-size: 75%; }
}

@media only screen and (min-width: 1250px) {
	/*.desktop-navbar { column-gap: 1.5%; padding: 1.5%; } */
	.text-editor { grid-template-columns: 3.2% 96.8%; }
}

@media only screen and (min-width: 1400px) {
	/*.desktop-navbar { column-gap: 1.3%; padding: 1.3%; }*/
	.desktop-navbar {
                grid-template-columns: 12.662% 12.662% 12.662% 18.93% 12.662% 12.662% 12.662%;
                column-gap: 0.65%;
                padding: 0.65%;
	}
	.text-editor { grid-template-columns: 2.8% 97.2%; }
}

@media only screen and (min-width: 1536px) {
	.desktop-navbar {
                grid-template-columns: 9.74% 9.74% 9.74% 36.34% 9.74% 9.74% 9.74%;
                column-gap: 0.65%;
                padding: 0.65%;
	}
	.text-editor { grid-template-columns: 2.5% 97.5%; }
}

@media only screen and (min-width: 1700px) {
	.text-editor { grid-template-columns: 2.2% 97.8%; }
}