/*/
 * ================================
 * Copyright by Aelyn <https://aelysia.net> and Cerine <https://caelestis.nu>
 *
 * This site is an ongoing work in progress, and its governing codes may
 * change as development continues. You're welcome to study, discuss, and
 * analyze this work, but copying, repurposing, or misrepresenting it as
 * your own is strictly prohibited.
 * ================================
/*/









/*/
 * ================================
 >>> FONTS
 * ================================
/*/

@font-face {
  font-family: "Arima";
  src: url("/assets/fonts/Arima-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averia Serif Libre";
  src: url("/assets/fonts/AveriaSerifLibre-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Black And White Picture";
  src: url("/assets/fonts/BlackAndWhitePicture-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bromello";
  src: url("/assets/fonts/bromello.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat Brush";
  src: url("/assets/fonts/CaveatBrush-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cupcakes";
  src: url("/assets/fonts/cupcakes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dawning of a New Day";
  src: url("/assets/fonts/DawningofaNewDay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("/assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Husna";
  src: url("/assets/fonts/Husna.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Just Darling Hearts";
  src: url("/assets/fonts/JustDarlingHearts.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Italic-VariableFont_wght.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Libre Caslon Text";
  src: url("/assets/fonts/LibreCaslonText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/assets/fonts/MaterialSymbolsOutlined.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Mayonaise";
  src: url("/assets/fonts/Mayonaise-Condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pangolin";
  src: url("/assets/fonts/Pangolin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Paprika";
  src: url("/assets/fonts/Paprika-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display SC";
  src: url("/assets/fonts/PlayfairDisplaySC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretty Neat";
  src: url("/assets/fonts/Prettyneat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quando";
  src: url("/assets/fonts/Quando-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Salsa";
  src: url("/assets/fonts/Salsa-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tournedos Lite";
  src: url("/assets/fonts/tournedoslite.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Trujilo";
  src: url("/assets/fonts/Trujilo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/*/
 * ================================
 >>> SYMBOLS
 * ================================
/*/

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}


/*/
 * ================================
 >>> GLOBALS
 * ================================
/*/

#lumina {
  background: #fefefe;
  font: normal 0.8em 'Fira Sans', sans-serif;
  line-height: 20px;
  color: #444;

  display: none;

  padding: 10px;

  z-index: 1000;

  text-shadow: none;
  text-align: justify;

  position: fixed;

  border: 0;
  border-radius: 5px;

  max-width: 350px;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  transform: translateY(4px);
}

#lumina.lumina-visible {
  opacity: 1;
  transform: translateY(0);
}

#lumina::after {
  content: "";

  position: absolute;

  left: var(--arrow-position);
  bottom: -8px;

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fefefe;
}

html {
  scroll-behavior: smooth;
}

li {
    list-style-type: circle;
}

ul li {
    list-style-type: circle;
}

menu li {
    list-style-type: none;
    display: inline-block;
}


/*/
 * ================================
 >>> FORMS
 * ================================
/*/

select optgroup {
    font-weight: normal;
    font-style: normal;
}

input[type=submit] {
    width: 200px;
    float: none;
    background-color: initial;
    background-image: linear-gradient(-180deg, #00d775, #00bd68);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    color: #fff;
    white-space: nowrap;
    z-index: 9;
    border: 0;
}

input:hover[type=submit] {
    background: #00bd68;
    box-shadow: 0 2px 10px #00bd68;
}

input[type=reset] {
    width: 200px;
    float: none;
    background-color: initial;
    background-image: linear-gradient(-180deg, #fe7b2f, #e73005);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    color: #fff;
    white-space: nowrap;
    z-index: 9;
    border: 0;
}

input:hover[type=reset] {
    background: #e73005;
    box-shadow: 0 2px 10px #e73005;
}

input[type=checkbox],
input[type=radio] {
    width: 20px;
    float: none;
}

div#qTip {
    background: #fefefe;
    font: normal 0.8em 'Fira Sans', sans-serif;
    line-height: 20px;
    color: #444;
    display: none;
    padding: 10px;
    z-index: 1000;
    text-shadow: none;
    text-align: justify;
    position: absolute;
    border: 0;
    border-radius: 5px;
    max-width: 350px;
}


/*/
 * ================================
 >>> CLASS
 * ================================
/*/

.form-inline {
    text-transform: none;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: 300px;
    margin: 3px;
}

.form-inline-2 {
    text-transform: none;
    text-align: left;
    display: block;
    vertical-align: top;
    overflow: hidden;
    width: 600px;
    margin: 3px auto;
}


.panel-text {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.req {
    color: #ff0000;
}

.pw {
    margin-bottom: 5px;
}

.form-btn {
    margin: 0 auto;
    text-align: center;
}

.showCredit,
.form-check {
    display: none;
}

.codesBlock {
    margin: 0 auto;
    text-align: center;
}

.list {
    padding: 3px 10px;
    margin: 5px auto;
    text-align: left;
    width: 350px;
    display: block;
}

.countries {
    margin: 10px auto;
    text-align: center;
    display: block;
}

.count {
    float: right;
    text-align: right;
}

.center-content {
    width: 90%;
    margin: 0 auto;

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;

    box-sizing: border-box;

}

.center-content img {
    max-width: 100%;
    height: auto;
}




/*/
 * ================================
 >>> ALERTS
 * ================================
/*/

.alert .inner {
    display: block;
    padding: 6px;
    margin: 6px;
    border-radius: 3px;
    border: 1px solid rgb(180, 180, 180);
    background-color: rgb(212, 212, 212);
    text-shadow: none;
}

.alert.error .inner {
    border: 1px solid rgb(238, 211, 215);
    background-color: rgb(242, 222, 222);
    color: rgb(185, 74, 72);
    text-shadow: none;
}

.alert.error .inner b {
    color: rgb(185, 74, 72);
    text-shadow: none;
}

.alert.success .inner {
    border: 1px solid rgb(214, 233, 198);
    background-color: rgb(223, 240, 216);
    color: rgb(70, 136, 71);
    text-shadow: none;
}

.alert.success .inner b {
    color: rgb(70, 136, 71);
    text-shadow: none;
}