html {
    font-size: 100%;
}

body {
    font-size: 100%;
    margin: 0;
    padding: 0;
    background-color: #faf2da; /*background color for website*/
}

p {
    font-size: 200%;
    font-family: 'Zen Kaku Gothic Antique', sans-serif; /*google font family*/
    color: #faf2da;
    line-height: 3rem; /*larger leading because the font size is doubled to ready easier*/
}

h3, h4, h5, h6 {
    color: #000;
    line-height: 1.8rem;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-align: center;
}
h2 {
    font-size: 100%;
    color: #faf2da;
    line-height: 1.8rem;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}
h1 {
    font-size: 280%;
    font-family: 'Crimson Pro', serif;
}

hr {
    border: solid #000; /*stylized horizontal ruler for solid black color*/
    width: 80%;
    margin-bottom: 30px;

}

.header {
    color: #000;/*changes text color of heading from white to black*/
}

.flex-container {
    display: flex; /*creates flex display*/
    justify-content: space-between; /*makes content near edges of screen*/
    align-items: center; /*aligns items together horizontally*/
    padding: 1%;
    position: fixed; /*fixed to top so it's accesible when scrolling down*/
    width: 100%;
    background-color: #faf2da;
    top: 0
}
.flex-box {
    display: flex; /*made flexbox inside flexbox for navigation*/
}
.flex-box > div {
    margin-right: 50px; /*spacing for divs inside flexbox*/
}

.container {
    display: flex; /*styling for flexbox*/
    align-items: center;
    width: 75%;
    margin: auto;
    background-color: #8e9775;
    padding: 5%;
    border-radius: 20px;
    margin-top: 10%;
}

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr; /*creates 4 equally sized columns*/
    grid-row-gap: 50px; /*gap between each row is 100px*/
    background-color: #8e9775;
    margin: auto;
}

.wrapper {
    margin-top: 5%;
}
.parent2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.child {
    padding: 1%; /*more stylistic and organizational choices*/
    text-align: center;
}
.child2 {
    padding: 5%;
}
a {
    text-decoration: none; /*to get rid of default link underline*/
}

.icons {
    display: block; /*this was just to center the icons*/
    margin: auto;
}
a:visited {
    color: #8e9775; /*visited links are green*/
}
.child:hover {
    background-color: #e28e83; /*hovered divs for social links are pink*/ 
}

a:hover {
    color: #e28e83; /*hovered links font colors are pink*/
}

.back-to-top {
    position: fixed; /*fixed to bottom right for access all time on site*/
    bottom: 20px;
    right: 20px;
    background-color: #e28e83;
    padding: 20px;
    border-radius: 20px;
}

/*indentations don't do anything funtionally*/