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

:root {
  --clr-background: #ece3e3;
  --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-family: 'Nanum Gothic', sans-serif;
  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-size: 1.6rem;
  height: 100%;
  margin: 0;
  width: 100%;
}

main {
  background-color: white;
  height:100%;
  margin:0 auto;
  max-width:800px;
  width:80rem;
}

main p {
  margin:1rem 2rem;
}

header {
  background-image:url('../img/red_01.jpg');
  color: white;
  height: 14rem;
  padding:2rem;
  width:100%;
}

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

.subtitle {
  font-family: 'Rye', cursive;
  font-size:2rem;
  margin:0;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

footer {
  background-color: black;
  bottom:0;
  color:white;
  left:0;
  line-height:1.5rem;
  position: fixed;
  width:100%;
}

footer p {
  text-align: center;
}