@use '../utilities';
@use 'sanitize';
@use 'sanitize_assets';
@use 'sanitize_forms';

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 3rem;
  scrollbar-width: thin;
  background-color: utilities.$background-light;
  margin: 0;
}

body {
  font-family: utilities.$font-family-text, sans-serif;
  font-size: 1.6rem;
  color: utilities.$text-dark;

  .text-light {
    color: utilities.$text-light;
  }

  #app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  main {
    overflow: hidden;
    flex-grow: 1;

    // la taille du header
    margin-top: 11.4rem;

    .text-primary {
      color: utilities.$text-primary;
    }

    .text-light {
      color: utilities.$text-light;
    }

    .text-dark {
      color: utilities.$text-dark;
    }

    .mb {
      margin-bottom: utilities.space(4);
    }

    .mt {
      margin-top: utilities.space(4);
    }

    .center {
      text-align: center;
    }

    @media screen and (width >= 1280px) {
      margin-top: 11.4rem;

      .mb {
        margin-bottom: utilities.space(8);
      }

      .mt {
        margin-top: utilities.space(8);
      }
    }
  }
}