/*
** Réalisation : Samuel KRAWCZYK - KRZK
** https://www.krzk.fr
*/

@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Righteous&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --KRZK001: 0.0625rem;
    --KRZK002: 0.125rem;
    --KRZK003: 0.1875rem;
    --KRZK004: 0.25rem;
    --KRZK005: 0.3125rem;
    --KRZK006: 0.375rem;
    --KRZK007: 0.4375rem;
    --KRZK008: 0.5rem;
    --KRZK009: 0.5625rem;
    --KRZK010: 0.625rem;
    --KRZK011: 0.6875rem;
    --KRZK012: 0.75rem;
    --KRZK013: 0.8125rem;
    --KRZK014: 0.875rem;
    --KRZK015: 0.9375rem;
    --KRZK016: 1rem;
    --KRZK017: 1.0625rem;
    --KRZK018: 1.125rem;
    --KRZK019: 1.1875rem;
    --KRZK020: 1.25rem;
    --KRZK021: 1.3125rem;
    --KRZK022: 1.375rem;
    --KRZK023: 1.4375rem;
    --KRZK024: 1.5rem;
    --KRZK025: 1.5625rem;
    --KRZK026: 1.625rem;
    --KRZK027: 1.6875rem;
    --KRZK028: 1.75rem;
    --KRZK029: 1.8125rem;
    --KRZK030: 1.875rem;
    --KRZK031: 1.9375rem;
    --KRZK032: 2rem;
    --KRZK033: 2.0625rem;
    --KRZK034: 2.125rem;
    --KRZK035: 2.1875rem;
    --KRZK036: 2.25rem;
    --KRZK037: 2.3125rem;
    --KRZK038: 2.375rem;
    --KRZK039: 2.4375rem;
    --KRZK040: 2.5rem;
    --KRZK041: 2.5625rem;
    --KRZK042: 2.625rem;
    --KRZK043: 2.6875rem;
    --KRZK044: 2.75rem;
    --KRZK045: 2.8125rem;
    --KRZK046: 2.875rem;
    --KRZK047: 2.9375rem;
    --KRZK048: 3rem;
    --KRZK049: 3.0625rem;
    --KRZK050: 3.125rem;
    --KRZK051: 3.1875rem;
    --KRZK052: 3.25rem;
    --KRZK053: 3.3125rem;
    --KRZK054: 3.375rem;
    --KRZK055: 3.4375rem;
    --KRZK056: 3.5rem;
    --KRZK057: 3.5625rem;
    --KRZK058: 3.625rem;
    --KRZK059: 3.6875rem;
    --KRZK060: 3.75rem;
    --KRZK061: 3.8125rem;
    --KRZK062: 3.875rem;
    --KRZK063: 3.9375rem;
    --KRZK064: 4rem;
    --KRZK065: 4.0625rem;
    --KRZK066: 4.125rem;
    --KRZK067: 4.1875rem;
    --KRZK068: 4.25rem;
    --KRZK069: 4.3125rem;
    --KRZK070: 4.375rem;
    --KRZK071: 4.4375rem;
    --KRZK072: 4.5rem;
    --KRZK073: 4.5625rem;
    --KRZK074: 4.625rem;
    --KRZK075: 4.6875rem;
    --KRZK076: 4.75rem;
    --KRZK077: 4.8125rem;
    --KRZK078: 4.875rem;
    --KRZK079: 4.9375rem;
    --KRZK080: 5rem;
    --KRZK081: 5.0625rem;
    --KRZK082: 5.125rem;
    --KRZK083: 5.1875rem;
    --KRZK084: 5.25rem;
    --KRZK085: 5.3125rem;
    --KRZK086: 5.375rem;
    --KRZK087: 5.4375rem;
    --KRZK088: 5.5rem;
    --KRZK089: 5.5625rem;
    --KRZK090: 5.625rem;
    --KRZK091: 5.6875rem;
    --KRZK092: 5.75rem;
    --KRZK093: 5.8125rem;
    --KRZK094: 5.875rem;
    --KRZK095: 5.9375rem;
    --KRZK096: 6rem;
    --KRZK097: 6.0625rem;
    --KRZK098: 6.125rem;
    --KRZK099: 6.1875rem;
    --KRZK100: 6.25rem;
}

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

html {
  font-size: 16px;
}
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #627384;
  font-size: var(--KRZK040);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Mozilla Headline", sans-serif;
}
h1 {
  text-align: center;
  font-size: var(--KRZK100);
}
h2 {
  font-size: var(--KRZK075);
}
h3 {
  font-size: var(--KRZK050);
}

button {
  border: none;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

strong {
  font-weight: 500;
}

.btn {
  border: none;
  display: inline-block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem 5rem;
  border-radius: 10rem;
  background-color: rgba(255, 255, 255, 1);
  font-size: var(--KRZK050);
  color: #757575;
  text-decoration: none;
  transition: all 0.2s;
}
.btn:hover {
  opacity: 0.8;
}
.btn-secondary {
  background-color: rgba(117, 117, 117, 1);
  color: #fff;
}

form input {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  padding: 2rem 5rem;
  border-radius: 10rem;
  border: none;
  font-size: var(--KRZK040);
}
form label {
  display: block;
  margin-bottom: .5rem;
  padding-left: 5rem;
  font-size: var(--KRZK040);
}
form input.error {
  background-color: #ffcbcb;
}

.form-ctrls {
  display: flex;
  justify-content: center;
  gap: var(--KRZK030);
  margin-top: var(--KRZK020);
}
.form-ctrl {
  width: 5rem;
  height: 5rem;
  border-radius: 10rem;
  background-color: #7124ca;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 var(--KRZK025) rgba(33, 195, 232, 0.5);
}

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

/* --- APPs --- */
#header-logo {
  margin-bottom: var(--KRZK050);
  padding-top: 2rem;
  text-align: center;
}
#header-logo img {
  width: 10rem;
}

#footer-logo {
  position: fixed;
  bottom: 0;
  left: 5%;
  width: 90%;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-top: var(--KRZK001) solid rgba(255, 255, 255, 0.5);
  fill: rgba(255, 255, 255, 0.5);
}
#footer-logo a {
  display: block;
  margin: auto;
  width: 2rem;
}

#app-content {
 
}




/* --- GENERAL --- */


.wrapper {
  max-width: 1400px;
  margin: auto;
}
.m-t-100 {
  margin-top: var(--KRZK100);
}
.m-t-50 {
  margin-top: var(--KRZK050);
}
.m-t-25 {
  margin-top: var(--KRZK025);
}

.hidden {
  display: none;
}

.righteous {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.mozilla-headline {
  font-family: "Mozilla Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* --- REPONSIVE --- */
@media (max-width: 991px){
  .wrapper {
    max-width: unset;
    margin: 0 var(--KRZK025);
  }
  #header-logo img {
    width: 20rem;
  }
  #footer-logo {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  #footer-logo a {
    width: 5rem;
  }
}