/*This makes my font size default to 100%*/
html {
    font-size: 100%;
        
}

/*This changes my body color as well as attachments and background texture*/
body {
    background-color:#FAF2DA;
    background-attachment: fixed;
    background-image: url(https://csl2505.cad.rit.edu/interactive1/project1/images/background.png)
    /*This gives my background texture*/
}

/*This is default for paragraphs*/
p {
    font-size: 100%; /*this is a comment*/
    color: #4A503D;
    line-height: 1.8rem;
    margin-right: 30%;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

h1 {
    color:#FAF2DA;
    font-size: 300%;
    font-family: 'Crimson Pro', serif; /*Is set all font families to this to use my font I got from Google*/
}
h2 {
    color: #4A503D;
    font-size: 180%;
    font-family: 'Crimson Pro', serif;
}
h3 {
   color: #4A503D; 
    font-size: 120%;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    max-width: 85%;
    padding-left: 6%;
    
}
h4, h5, h6 {
    font-family: sans-serif;
}

.container {
    background-color: #E28F83;
    text-align: center;
    width: 100%;
    height: 12%;
    position:fixed; /*position of header is fixed to the top so when you scroll it's still there*/
    top: 0;
    left: 0;
    box-shadow: 0 0 30px 0 #292723;
}

.column1of3 {
    float: left;
    position: absolute;
    top: 5px;
    left: 5px;
}

.column2of3 {
    text-align: center;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: -25px /*pushes to top*/
}

.column3of3 {
    text-align: right;
    display: flex;
    justify-content: right;
    align-items: flex-end;
    position: absolute;
    top: 5px;
    right: 5px
}

.box {
    display: inline-block; /*allows to change layout depending on window screen while respecting the width and height dimensions*/
    width: 33%;
    box-sizing: border-box; /*set content width and height to entire box*/
}

.box2 {
    display: inline-block;
    width: 33%;
    background-color: none;
    box-sizing: border-box;
    text-align: center;
}

ul li {
    list-style: none; /*gets rid of bullet point on list*/
    margin-right: 1%;
}

hr {
    color: #4A503D;
    margin-top: 5%; /*gives spacing between horizontal lines*/
}

.sectionheader {
    text-align: center; /*aligns section headers to center*/
    margin-top: 5%; /*Gives space at top of header*/
    margin-bottom: 5%; /*Gives space at bottom of header*/
    color: #4A503D; /*changes text color*/
}

.flex-container {
    display: flex; /*sets display to flex*/
    flex-direction: row; /*sets direction to row*/
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;

}

.flex {
    align-self: center; /*center aligns elements within flexbox*/
    align-items: center; /*center aligns items within flexbox*/
    margin-left: 10%;
}

li {
    font-family: 'Crimson Pro', serif;
    font-size: 150%;
}

.me {
    border-radius: 1000000000px; /*I was playing with the radius and apparently this makes a full circle*/
    width: 120%
}

.top {
    position: fixed; /*Position of banner is at the top*/
    bottom: 1%;
    right: 1%;
    background-color: #E28F83;
    padding-left: 1%;
    padding-right: 1%;
    border-radius: 10000000000px;
    box-shadow: 0 0 30px 0 #36342f; /*This gives and even shadow below my header*/
}

a {
    text-decoration: none; /*This gets rid of the link underline*/
}

.fun {
    min-width: auto;
    width: 90%;
    height: auto;
    margin: auto;
    padding: 6%;
    border-radius: 100000000000px;/*gives border radius a circle*/

}

.hobbies {
    margin-left: 10%; /*This formats the left margin 10% larger*/
}

.photos {
    width: 90%;
    border-radius: 10%/15%; /*The photos aren't perfectly square, so I made the radius different for height/width*/
}

.closer {
    margin-top: 15%;
}

.links {
    color: #FAF2DA; /*This changes the color of my links*/
}

.links:hover {
    color: #bdb18d; /*This changes the color of the text when mouse hovered*/
}

.external {
    color: #929c7b; /*THis changes the color of my external links*/
}

.external:hover {
    color: #4A503D; /*This changes the color of my hover link*/
}

.video {
    display: block; 
    margin-left: auto;
    margin-right: auto;
    position: static;
}