html{
    font-size: 100%;
}
body{ /* is the document */
    /*background-color:#fffcf9;*/
    background-image: radial-gradient(#528eba 30%, #df7760);  /*changed image to a gradient*/
    margin:0%;
    padding:1%;  
}

/*changes default font, size, color, weight, etc for headings and paragraphs*/
h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 300%;
color: #231f29;}

h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 200%;
    color: #231f29;
}

h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 125%;
    color:#231f29;
}

h4{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    color:#231f29;
}

h5,h6{} /*leftover*/


p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 115%;
    color: #231f29;
}


img{
    border-radius: 5px; /*rounds all the photo edges*/
}

header{
    background-color: #fffcf9;
    padding-top:40px; padding-right:50px; padding-bottom:50px; padding-left:245px; /*I know code typically goes by line and (;) but it got to be too chaotic having 8 lines*/
    margin-top:60px; margin-right:200px; margin-left:200px; margin-bottom:60px; /*set margins*/
    border-radius: 20px; /*rounds edges*/
}

li{
    list-style: none; /*takes away bullet points*/
    display: block;    /*puts widgets in grid*/
    text-align:center;  /*centers text*/
    max-width: 150px; /*sets the size of the "button"*/
    margin: 10px; 
    padding: 15px;
    background-color: #528eba;
    border-radius: 10px;
}

.container{ 
    background-color: #fffcf9;
    border-radius: 20px;
   display:inline-block;
   vertical-align: middle;
    margin: 40px; 
    padding-top: 20px; padding-right: 50px; padding-left: 50px; padding-bottom: 20px; 
    width: 1330px;
}



#lockup{
    display: inline-block; /*snaps the div/container around object*/
    float: inline-start; /*floats the lockup to the start of the container*/
}

#headertext{
    display: inline-block; /*snaps the div/container around object*/
    padding-top: 50px; /*lowers the text to match height of lockup*/ 
}


article{
    background-color: #514563; /*sets color of container purple*/
    border-radius: 20px; /*rounds edges*/
    margin: 40px;
    padding: 40px;
}

#funfacts{
    border-radius: 20px;
    background-color: #fffcf9;
    margin: 30px;
    padding:40px;
}

#food{ /*had to edit padding differently than other sections...idk why*/
    border-radius: 20px; /*rounds edges*/ 
    background-color: #fffcf9;
    margin: 30px;
    padding-top: 10px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; 
   
   
}

section{ /*edits the rest of the widgets other than "funfacts" and "food"*/
    border-radius: 20px;
    background-color: #fffcf9;/*makes background white*/
    margin: 30px; /*sets margin*/
    padding:40px; /*sets padding*/
} 

.footer{
    background-color: #528eba; /*makes background blue*/
    margin: 30px; 
    padding: 20px;  
    border-radius: 20px; 
    text-align: center; /*centers text*/
}

#socialstext{
    color: #fffcf9; /*makes text white*/
    text-align: center; /*centers text*/
    border-style:solid; /*creates "button" silhouette*/
    border-radius: 20px; /*rounds edges*/
    padding: 15px; 
    margin-left: 523px; /*float:center didn't work, asked multiple ppl for help, counldn't fix. 523 px margin-left "centers" it. Looks wonky if window isn't perfectly aligned.*/
    max-width: 350px;  /*sets max width*/
    
}
#footertext{
    color:#fffcf9; /*makes text white*/
}