@import './fonts.css';
@import './header.css';
@import './footer.css';


:root{
  --black : #2E3138;
  --orange: #FE7900;
  --bgOrange : #FFFAF5;
  --lightOrange : #FFE4CC;
  --green: #96E6B3;
  --white: #FFFFFF;
  --nunito: 'Nunito-Regular';
  --workSans-Regular: 'WorkSans-Regular';
  --workSans-Medium: 'WorkSans-Medium';
  --workSans-Bold: 'WorkSans-Bold';
  --workSans-Black: 'WorkSans-Black';
  --marge8: 8px;
  --h1DesktopSize: 48px;
  --h2DesktopSize: 30px;
  --h3DesktopSize: 24px;
  --bodyDesktopSize: 20px;
  --menuDesktopSize: 24px;
  --buttonDesktopSize: 16px;
  --legendDesktopSize: 12px;
  --h1MobileSize: 28px;
  --h2MobileSize: 20px;
  --h3MobileSize: 18px;
  --bodyMobileSize: 16px;
  --buttonMobileSize: 14px;
  --legendMobileSize: 12px;
}

html{
  scroll-behavior: smooth;
}

body{
  color: var(--black);
  padding-top: 24px;
  padding-bottom: 24px;
  background-color: var(--bgOrange);
}

main, body>section{
  padding-right: 120px;
  padding-left: 120px;
}

a{
  text-decoration: none;
  color: var(--black);
  font-family: var(--nunito);
}

a:hover{
  color: var(--black);
  text-decoration: none;
}

h1{
  font-family: var(--workSans-Black);
  font-size: var(--h1DesktopSize);
  font-weight: 900;
}

h2{
  font-family: var(--workSans-Bold);
  font-size: var(--h2DesktopSize);
  font-weight: 900;
}

h3{
  font-family: var(--workSans-Bold);
  font-size: var(--h3DesktopSize);
  font-weight: 500;
}

p, div, li{
  font-family: var(--nunito);
  font-size: var(--bodyDesktopSize);
  line-height: 1.7;
}

button{
  font-family: var(--nunito);
  font-size: var(--buttonDesktopSize);
  background-color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: calc(var(--marge8)*4);
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.5s;
}

button:hover{
  background-color: transparent;
  border: 1px solid var(--orange);
  transition: background-color 0.5s;
}

@media (max-width: 620px) {
  main, body>section{
    padding-right: 24px;
    padding-left: 24px;
  }

  h1{
    font-size: var(--h1MobileSize);
  }

  h2{
    font-size: var(--h2MobileSize);
  }

  h3{
    font-size: var(--h3MobileSize);
  }

  p, div, li{
    font-size: var(--bodyMobileSize);
  }

  button{
    font-size: var(--buttonMobileSize);
  }
}