/* =========================== */
/* CSS VARIABLES */
/* =========================== */
:root {
  /* Colors */
  --primary-color: #f03e3e;
  --secondary-color: #fa5252;
  --tint-1: #feecec;
  --tint-2: #fcd8d8;
  --tint-3: #fff5f5;

  /* Font size */
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);

  /* Spacing */
  --spacing-1: 0.2rem;
  --spacing-2: 0.4rem;
  --spacing-3: 0.8rem;
  --spacing-4: 1.2rem;
  --spacing-5: 1.6rem;
  --spacing-6: 2.4rem;
  --spacing-7: 3.2rem;
  --spacing-8: 4rem;
  --spacing-9: 4.8rem;
  --spacing-10: 6.4rem;
  --spacing-11: 8rem;
  --spacing-12: 9.6rem;
  --spacing-13: 16rem;

  /* Border */
  --border-radius: 7px;
  --border-radius-inner: 5px;
}

/* =========================== */
/* CSS RESET / BASE STYLE */
/* =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-margin-top: 50px;
}

/* for mobile phone increase scroll-margin-top */
@media (max-width: 780px) {
  * {
    scroll-margin-top: 135px;
  }
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5) !important;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #333;
  width: 80%;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4fr;
  align-items: start;
  accent-color: var(--primary-color);
  overflow-x: hidden;
}