/* google fonts imports */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Oswald:wght@200..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Yuyu+Short&display=swap');
/* fonts configuration */
.google-sans-normal {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
}

.roboto-mono-normal {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.text-quote {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.oswald-normal {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
.text-title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: bolder;
  font-style: normal;
}

.nunito-sans-normal {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}
.nunito-sans-title {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

.yuyu-short-regular {
  font-family: "Yuyu Short", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.raleway-normal {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.inter-normal {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
/* < -- END HERE -- > */

:root {
    /* put some in tis shi */
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
}

/* all class parts for parents */
.parent-enable-flex { display: flex; }
.parent-align-center { align-items: center; }
.parent-align-left { align-items: flex-start; }
.parent-align-right { align-items: flex-end; }
.parent-justify-space { justify-content: space-between; }
.parent-justify-center { justify-content: center; }
.parent-flex-col { flex-direction: column; }
.parent-flex-colRe { flex-direction: column-reverse; }
.parent-flex-row { flex-direction: row; }
.parent-flex-rowRe { flex-direction: row-reverse; }

.parent-enable-grid { display: grid; }

/* default template for parent */
.parent-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.parent-center-col {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.parent-center-row {
    display: flex;
    align-items: center;
    flex-direction: row;
}

/* common correction classes that can be use on every elements that fits */
.have-gap { gap: 7.5px; }
.enable-layering { position: absolute; }
.round-border { border-radius: 20px; }
.give-outer-space {
    margin: 15px;
    box-sizing: border-box;
}
.give-inner-space {
    padding: 15px;
    box-sizing: border-box;
}
.viewport-full {
    height: 100vh;
    width: 100vw;
}