body {
    /* sets up height and text properties */
    height: 100vh;
    color: white;
    font-size: 10px;
    
    /* sets main background image and positioning accordingly */
    background-image: url(images/children.jpg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    
}

header {
    align-items: center;
}

/* setting font style and size */
h1 {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 5vw;
    margin-bottom: 0%;
}

h2, .narration {
    font-family: 'Shadows Into Light Two', sans-serif;
    font-size: 2.8em;
}

h2 {
    text-align: right;
    margin-top: 0%;
}

p {
    font-family: 'Yantramanav', sans-serif;
    font-size: 2.3em;
    font-weight: 500;
}

/* two rows: header and story */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2% 98%;
    padding: 5%;
}

header {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    margin: auto;
    align-items: center;
    text-align: center;
}

footer {
    background-color: rgba(7, 7, 7, 0.6);
    text-align: center;
    font-size: 1.8em;
    padding: 1.6em;
}

a {
    color: white;
}

/* the story narration is made to span across the whole page */
.narration {
    grid-column: 1 / -1;
    margin: auto;
    text-align: center;
    align-items: center;
    max-width: 60vw;
    padding: 5%;
    line-height: 1.8em;
    /* background is darkened for readability */
    background-color: rgb(0, 0, 0, .55);
    border-radius: 25px;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

/* increase the size of each narrations first letter */
.narration::first-letter {
    font-size: 1.8em;
}

/* this creates a grid of three columns so that the dialogue sections can be put to the left or right */
.dialogue-content {
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(auto, min-content);
    max-width: 100vw;
    margin: auto;
    padding: 5%;
    border-radius: 30px;
    /* creates a parallax effect for the dialogue sections */
    background-image: url(images/woods.jpg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

/* sets the left-side "messages" to white w/ black text */
.dialogue-man, .dialogue-gretel {
    padding:15px;
    border: 1px transparent;
    border-radius: 25px;
    border-top-left-radius: 0px;
    background-color: white;
    color: black;
}

/* sets the right-side "messages" to blue w/ white text */
.dialogue-woman, .dialogue-hansel, .dialogue-children {
    padding: 15px;
    border: 1px transparent;
    border-radius: 25px;
    border-top-right-radius: 0px;
    background-color: #3587F2;
}

/* sets the Witch's "messages" to green w/ white text */
.dialogue-witch, .dialogue-gentle {
    padding: 15px;
    border: 1px transparent;
    border-radius: 15px;
    border-top-left-radius: 0px;
    background-color: #36BF21;
}

/* fixes the corner of Gretel's messages in the two cases where they are on the right side */
#dialogue-gretel-3 {
    border-top-right-radius: 0px;
    border-top-left-radius: 25px;
    grid-column: 3/4;
}

#dialogue-gretel-4 {
    border-top-right-radius: 0px;
    border-top-left-radius: 25px;
}

/* adds names to the messages */
.dialogue-man::before {
    content: "Man \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-hansel::before {
    content: "Hansel \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-woman::before {
    content: "Woman \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-gretel::before {
    content: "Gretel \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-witch::before {
    content: "Witch \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-children::before {
    content: "Hansel & Gretel \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

.dialogue-gentle::before {
    content: "An unknown, but gentle, voice \a \a" ;
    white-space: pre;
    font-size: 1.1em;
}

/* The rest of the code below is setting the position of narration and dialogue sections */
#narration-1 {
    grid-row: 2/3;
}

.dialogue-man {
    grid-column: 1/2;
}
.dialogue-woman {
    grid-column: 3/4;
}

.dialogue-gretel {
    grid-column: 1/2;
}

.dialogue-hansel {
    grid-column: 3/4;
}

 #dialogue-man-1 {
    grid-row: 1/2;
    
}

#dialogue-woman-1 {
    grid-row: 2/3;
}

#dialogue-woman-2 {
    grid-row: 3/4;
}

#dialogue-man-2 {
    grid-row: 4/5;
}

#dialogue-woman-3 {
    grid-row: 5/6;
} 

#dialogue-gretel-1 {
    grid-row: 1/2;
}

 #dialogue-hansel-1 {
    grid-row: 2/3;
 }

 #dialogue-man-4 {
    grid-row: 1/2;
 }

 #dialogue-hansel-3 {
    grid-row: 2/3;
 }

 #dialogue-woman-6 {
    grid-row: 3/4;
 }

 #dialogue-gretel-2 {
    grid-row: 1/2;
 }

 #dialogue-hansel-4 {
    grid-row: 2/3;
 }

 #dialogue-hansel-6 {
    grid-row: 2/3;
 }

 #dialogue-woman-10 {
    grid-row: 3/4;
 }

 #dialogue-children-1 {
    grid-row: 2/3;
    grid-column: 3/4;
 }

 #dialogue-witch-6 {
    grid-row: 2/3;
 }

 #dialogue-gretel-4 {
    grid-column: 3/4;
 }

 #dialogue-hansel-10 {
    grid-row: 3/4;
 }