:root {
  --background-color-primary: #effbf6;
  --background-color-secondary: #fcf9f3;
  --background-color-important: #f7efde;
  --color-black: #2F4858;
  --color-white: #fcfcfc;
  --color-link: #728C92;
  --color-link-hover: #4F6A74;
  --color-valid: #02b68c;
  --color-info: #0295b6;
  --color-error: #d33636;
  --space: 4px;
  --responsive-ratio: .15vw;
  --letter-spacing: calc(var(--responsive-ratio) / 3);
  --padding: calc(var(--space) + var(--responsive-ratio));
  --padding-container: calc(var(--padding) * 3);
  --font-size: calc(13px + var(--responsive-ratio));
  --font-size-small: calc(var(--font-size) * 0.75);
  --font-size-medium: var(--font-size);
  --font-size-big: calc(var(--font-size) * 1.1);
  --font-size-bigger: calc(var(--font-size) * 1.15);
  --font-size-title-one: calc(var(--font-size) * 1.75);
  --font-size-title-two: calc(var(--font-size) * 1.4);
  --font-size-title-three: calc(var(--font-size) * 1.35);
  --font-size-title-four: calc(var(--font-size) * 1.325);
  --font-size-title-five: calc(var(--font-size) * 1.30);
  --font-size-title-six: calc(var(--font-size) * 1.275);
  --font-size-link: calc(var(--font-size) * 1.05);
  --font-size-link-hover: calc(var(--font-size-link) * 0.98);
  --font-size-result: calc(var(--font-size-link) * 1.2);
  --border-radius: calc(4px + var(--responsive-ratio));
  --border-radius: var(--padding);
  --box-shadow-elevation:
    0 1px 2px -2px var(--color-black),
    0 1px 0 0 var(--color-black),
    0 1px 3px -1px var(--color-black);
  --box-shadow-elevation-hover:
    0 1px 1px -1px var(--color-black),
    0 0 0 0 var(--color-black),
    0 1px 2px -1px var(--color-black);
  --box-shadow-elevation-focus:
    0 2px 2px -1px var(--color-black),
    0 2px 0 0 var(--color-black),
    0 2px 3px -1px var(--color-black);
}

*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

body {
  width: 100dvw;
  font-size: var(--font-size);
  font-weight: 400;
  font-family: system-ui, sans-serif;
  background-color: var(--background-color-primary);
  color: var(--color-black);
  overflow: hidden;
}

h1 {
  font-size: var(--font-size-title-one);
}

h2 {
  font-size: var(--font-size-title-two);
}

h3 {
  font-size: var(--font-size-title-three);
}

h4 {
  font-size: var(--font-size-title-four);
}

h5 {
  font-size: var(--font-size-title-five);
}

h6 {
  font-size: var(--font-size-title-six);
}

a {
  width: fit-content;
  display: flex;
  color: var(--color-link);
  font-size: var(--font-size-link);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  transition: font-size .125s linear;
  position: relative;

  &::after {
    content: '';
    display: flex;
    width: 0;
    height: 2px;
    background: var(--color-link);
    position: absolute;
    bottom: 0;
    transition: width .3s;
  }

  &:hover {
    color: var(--color-link-hover);
    font-size: var(--font-size-link-hover);
  }

  &:hover::after {
    width: 100%;
  }
}

.main-head,
.main-content,
.main-footer {
  padding: var(--padding-container);
}

.main-content {
  grid-column: 1/-1;
  width: fit-content;
  min-height: calc(100dvh - 4rem);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "header calcDebit"
    "resume calcDebit";
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  place-content: center;
  gap: var(--padding);
  background-color: var(--background-color-primary);
  margin-inline: auto;
  padding: var(--padding-container);
}

.main-head {
  grid-area: header;
  width: 100%;
  min-height: 6rem;
  height: 6rem;
  display: flex;
  justify-content: stretch;
  align-items: center;
  gap: .5rem;
  background-color: var(--background-color-primary);
}

.main-articles {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--padding);
  border-radius: var(--border-radius);
  margin-inline: auto;
  padding: var(--padding-container);
}

.resume-article {
  grid-area: resume;
  text-align: left;
}

.calc-debit-article {
  grid-area: calcDebit;
}

.main-footer {
  min-height: 4rem;
  height: 4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--background-color-primary);

  & .copyright {
    width: fit-content;
    text-align: right;
    margin-inline: auto 0;
  }
}

.formule {
  font-size: var(--font-size-small);
}

form {
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--padding);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  margin-inline: auto;
  padding: var(--padding-container);
  box-shadow: var(--box-shadow-elevation);

  & label {
    width: fit-content;
    text-align: center;
    margin-inline: auto;
  }

  & input,
  & textarea {
    width: 100%;
    border: none;
    box-shadow: var(--box-shadow-elevation);
    padding: var(--padding);
    border-radius: var(--border-radius);
    margin-block: 0 var(--padding-container);
    outline:unset;

    &:focus{
      box-shadow:var(--box-shadow-elevation-focus);
    }
  }

  & input {
    text-align: center;
  }

  & textarea {
    --height: calc(var(--font-size) * 8);
    width: 100%;
    height: var(--height);
    max-height: var(--height);
    resize: none;
  }

  & input[type="submit"],
  & button {
    font-weight: 600;
    background-color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-elevation);
    padding: var(--padding) var(--padding-container);
    cursor: pointer;
    will-change: transform;

    &:hover {
      transform: scale(.95);
      box-shadow: var(--box-shadow-elevation-hover);
    }

    &:active {
      transform: scale(.95);
      box-shadow: var(--box-shadow-elevation);
    }
  }

  & .result{
    max-width:100%;
    font-family:sans-serif;
    letter-spacing:var(--letter-spacing);
    padding:var(--padding-container);

    & .result-number{
      width:fit-content;
      max-width:100%;
      display:block;
      text-align:center;
      font-size:var(--font-size-result);
      font-weight:900;
      margin-inline:auto;
    }

    & .result-subtitle{
      width:fit-content;
      display:flex;
      text-align:center;
      font-weight:600;
      margin-inline:auto;
    }
  }
}