@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic|Rye&display=swap');

:root {
  /*   --clr-background: antiquewhite;
  --clr-active: #F20444;
  --clr-highlight: #82A503;
  --clr-accent: #044BD8;
  --clr-primary: #0c0c0c;
  --clr-light: #F2CA04;
  --clr-dark: #333; */

  --clr-background: #b19f9e;
  --clr-active: #a16e83;
  --clr-highlight: #cebc81;
  --clr-accent: #479761;
  --clr-primary: #479761;
  --clr-light: #fff;
  --clr-dark: rgb(25, 24, 26);

  --clr-light-shade: #f9f6f7;
  --clr-light-accent: #a8a246;
  --clr-main-brand: #659fbb;
  --clr-dark-accent: #8955ac;
  --clr-dark-shade: #0b5567;

  --el-wide: 70rem;
  --el-narrow: 40rem;
  --el-width: 54rem;
  --el-shadow: 2px 2px 5px rgba(25, 24, 26, 0.7);
}

/* ---------------------------
   Global Styles
   --------------------------- */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62%;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: var(--clr-background);
  color: var(--clr-dark-shade);
  font-size: 1.6rem;
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 1.6rem;
  height: 100%;
  margin: 0;
  width: 100%;
}

h1 {
  color:maroon;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
  font-family: 'Rye', cursive;
  font-size: 5rem;
}

main {
  background-color: var(--clr-light-shade);
  border-left:1px solid black;
  border-right:1px solid black;
  height:100%;
  margin: 0 auto;
  padding: 0.5rem 2.5rem;
  width: 65rem;
}