:root {
  --hero-font-family: 'Rakkas', serif;
  --body-font-family: 'Work Sans', sans-serif;
}

body {
  background-color: ghostwhite;
  box-sizing: border-box;
  color: purple;
  display: block;
  font-family: var(--body-font-family);
  font-size: 12pt;
  height: 100vh;
  line-height: 1.4;
  margin: 0;
  padding: 1rem;
}

article {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: var(--body-font-family);
  font-size: 140%;
  height: 100%;
}

header {
  flex: 1;
  margin: 2rem 0;
  padding: 0 4rem;
}

header a {
  color: inherit;
}

h1 {
  color: orangered;
  font-family: var(--hero-font-family);
  font-size: 400%;
  font-weight: normal;
  margin: 0;
  position: relative;
}

main {
  margin-top: 2rem;
  padding: 0 3rem;
}

footer {
  margin-bottom: 3rem;
  padding: 0 3rem;
}

a {
  color: purple;
}

.frame {
  --c: orangered;   /* color */
  --b: 2px;   /* thickness of lines */
  --o1: 24px; /* offest of lines*/
  --o2: 16px; /* offset of rectangle */
  

  box-sizing: border-box;
  border: var(--o1) solid transparent; 
  outline: var(--b) solid var(--c); 
  outline-offset: calc(-1 * var(--o2));
  background:
    linear-gradient(var(--c) 0 0) top,
    linear-gradient(var(--c) 0 0) left,
    linear-gradient(var(--c) 0 0) bottom,
    linear-gradient(var(--c) 0 0) right;
  background-origin: padding-box;
  background-repeat: no-repeat;
  background-size: 200% var(--b), var(--b) 200%; 
}