@font-face {
  font-family: "TitlesFont";
  src: url("fonts/Milkshake Creps.otf"); /* Added url() */
}

@font-face {
  font-family: "TextFont";
  src: url("fonts/Winkle-Regular.ttf"); /* Added url() */
}

body {
  font-family: "TextFont", sans-serif; /* Applied text font as base */
  background-image: url('http://dl4.glitter-graphics.net/pub/3052/3052374rfwsqm03s3.gif');
  background-attachment: fixed;
  background-repeat: repeat;
  
  display: flex; 
  align-items: flex-start; /* Changed from center so long pages can scroll properly */
  justify-content: center; 
  margin: 0; /* Removes default body margins */
  /*padding: 20px 0; /* Gives a little breathing room at top and bottom of screen */
}

layout {
  z-index: 100;
  width: 960px;
  background-color: #f2dcec;
  
  /* Borders only on the sides (top 0, right 3px, bottom 0, left 3px) */
  border-style: solid;
  border-width: 0 3px 0 3px;
  border-color: #4a2440;
  
  /* CSS Grid to build your layout */
  display: grid;
  grid-template-columns: 2fr 1fr; /* Left column is bigger (2 fractions), right is smaller (1 fraction) */
  grid-template-areas: 
    "header header"
    "main aside";
}

header {
  grid-area: header;
}


.header-image {
  margin: 0; 
  padding: 0;
}

.header-image img {
  width: 100%;
  height: auto;
  display: block; 
}

.main-content {
  grid-area: main;
  padding: 40px;
}

.title {
  position: relative;
  top: -170px;
}

.divider {
  position:relative;
  top: -45px;
  left: -80px;
}

.main-image {
  width: 300px;
  height: auto;
  
  top:  -50px;
}

.main-image img {
  width: 100%;
  height: auto;
  display: block;
}

aside {
  grid-area: aside;
  padding: 40px 40px 40px 0; /* Padding around aside, but 0 on the left so it sits closer to main */
}

h1 {
  font-family: "TitlesFont";
  font-size: 30px;
  color: #4a2440;
  text-align: center;
}

h2 {
  font-family: "TitlesFont";
  font-size: 20px;
  color: #4a2440;
}

p {
  font-family: "TextFont";
  font-size: 15px;
}