* {
  padding: 0;
  margin: 0;
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  line-height: 1.3;
  font-family: Calibre, San Francisco, SF Pro Text, -apple-system, system-ui, BlinkMacSystemFont, Roboto, Helvetica Neue, Segoe UI, Arial, sans-serif;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: rgb(230, 241, 255);
  margin: 0px 0px 10px;
  line-height: 1.1;
}
.h2, h2 {
  font-size: 2rem;
}
.h3, h3 {
  font-size: 1.75rem;
}
.container {
  padding: 0px 40px;
}

/* Background image */

.bkg-image {
  background-repeat: no-repeat;
}

.bkg-image-center {
  background-position: center;
}

.bkg-image-cover {
  background-size: cover;
}
.bkg-image-contain{
  background-size: contain;
}
.bkg-image-fixed{
  background-attachment: fixed;
}

/* z-index */

.z-index {
  z-index: 3;
}
.z-index-5{
  z-index: 5;
}
.z-index-10{
  z-index: 10;
}

/* Text */

.text-center {
  text-align: center;
}

/* Text Color  */
.txt-white {
  color: #FFF !important;
}

.txt-black {
  color: #000 !important;
}
.text-primary {
  color: rgb(100, 255, 218);
  margin: 0px 0px 20px 3px;
  font-size: 16px;
  font-weight: normal;
}

.text-secondary {
  font-size: 80px;
  line-height: 1.1;
  color: rgb(136, 146, 176);
}


/* Center */

.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.center-y{
  top: 50%;
  transform: translateY(-50%);
}
.center-x{
  left: 50%;
  transform: translateX(-50%);
}

.center-margin {
  margin: 0 auto;
}

/*Color background*/
.bg-white {
  background-color: white
}

.bg-sliver {
  background-color: #cdcdcd;
}
.bg-primary {
  background-color: #0a192f;
}
.bg-secondary {
  background-color: #242d2e;
}
.bg-highlight{
  background-color: #effcff;
}
.txt-primary {
  color: rgb(204, 214, 246)
}
.txt-secondary{
  color: #647072;
}

.layer{
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
}

/* Code style */
.tag{
  color:#2f6f9f;
}
.na {
  color: #006ee0;
}
.s {
  color: #d73038;
}
.comment{
  color: #ce9178;
}

/* Position */

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-fixed {
  position: fixed;
}

.position-absolute {
  position: absolute;
}

.position-sticky {
  position: sticky;
}
/* Font-size */

.t-size-13 {
  font-size: 13px;
}
.t-size-20 {
  font-size: 20px;
}
.t-size-2em{
  font-size: 2.3em;
}
.t-size-80 {
  font-size: 80px;
}

/* Font family*/

.font-primary {
  font-family: SF Mono, Fira Code, Fira Mono, Roboto Mono, Lucida Console, Monaco, monospace;
}


/* Position */
.top-0{
  top:0;
}
.left-0{
  left: 0;
}
.bottom-0{
  bottom: 0;
}
.right-0{
  right: 0;
}

/* Padding */

.p-6em {
  padding: 6em;
}

.pr-2em {
  padding-right: 2em;
}

.pl-2em {
  padding-left: 2em;
}

.p-5 {
  padding: 1em;
}

.p-2 {
  padding: .4em;
}

/* Display */

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none{
  display: none;
}

/* Margin */

.ml-10 {
  margin-left: 10px !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-5 {
  margin-top: 1em
}

/* border */

.btn-border-primary {
  border: 1px solid rgb(100, 255, 218);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  line-height: 1;
}

/* Flex */
.flex-direction-column{
  flex-direction: column;
}
.justify-content-center {
  justify-content: center;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-end{
  justify-content: flex-end;
}

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

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

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-wReverse{
  flex-wrap: wrap-reverse
}

/* size - width */

.w-100 {
  width: 100% !important;
}
.w-80{
  width: 80% !important;
}
.w-70{
  width: 70% !important;
}
.w-60{
  width: 60% !important;
}
.w-55 {
  width: 55% !important;
}
.w-50 {
  width: 50% !important;
}
.w-45 {
  width: 45% !important;
}
.w-40{
  width: 40% !important;
}
.w-35 {
  width: 35% !important;
}
.w-30 {
  width: 30% !important;
}
.w-25{
  width: 25% !important;
}
.w-20 {
  width: 20% !important;
}

.w-10 {
  width: 10% !important;
}

/* size - height*/

.h-100 {
  height: 100% !important;
}

.h-90 {
  height: 90% !important;
}
.h-80 {
  height: 80% !important;
}

.h-70 {
  height: 70% !important;
}

.h-60 {
  height: 60% !important;
}

.h-50 {
  height: 50% !important;
}

.h-40 {
  height: 40% !important;
}

.h-35 {
  height: 35% !important;
}

.h-30 {
  height: 30% !important;
}

.h-20 {
  height: 20% !important;
}
.h-inherit{
  height: inherit;
}

.overflow-h{
  overflow: hidden;
}


/* divieder */
.divider{
  position: relative;
  color: rgb(230, 241, 255);
  text-align: center;
  padding: 10px 0;
}

@media (max-width:900px) {
  .t-size-80 {
    font-size: 70px;
  }
}

@media (max-width:700px) {
  .t-size-80 {
    font-size: 60px;
  }
}