::selection {
    color: floralwhite;
    background: #99005C;
    /* #8B008B; */
}
    
header{
    background-color: floralwhite;
    display:grid;
    grid-column:2/4 ;
}

header img{
    border-radius:100px;  /* this changes the shape of the image */
    padding: 15px; /*  gives spacing but shortens image */
    width:100px; /*changes width of image*/
}

.cayleigh img{
    float:left;
}

main {
    background-color: floralwhite;
    margin: auto auto; 
    text-align: left;
    display:grid;
    grid-template-columns: 2fr;
} 

main ul{
    list-style-type: none; 
}

nav{
    background-color: #8B008B;
    color: floralwhite;
    grid-column:span;
    text-align: center;
}


#menu-button{
    background-color:#8B008B;
    font-size: 2rem;
    padding:.5rem;
}

#menu-button::before{ 
    /* supposed to use "≡" in html to get the proper hamburger sign, but can't figure out how to utilize it */
    content: "☰";
}

#menu-button.open::before{
    content: 'x';
}

/*nav when it's closed  */
nav ul{ 
    list-style:none; 
    text-align: center;
    background-color: #8B008B;
    padding-inline-start: 0px; /*what does this do?*/
    display:none; 
}

nav ul.open{
    display:flex;
    flex-direction:column;
    justify-content: space-around;

}

nav ul li{
    width:100%;
}

nav ul li a{
    display:block;
    text-decoration:none;
    color:white;
    padding: 1rem;
}

nav a{
    color: floralwhite;
    text-align: center;
    
}

nav ul li a:hover{
    color: #8B008B;
    background-color: white;
    font-weight: bold;  /* makes the text appear thicker/bolded when hovered */
    /* #f028f0 */
}

nav li{
    list-style-type: none; /*this makes the dots besides the link disapear */
}

body {
    color:black;
    background-color:floralwhite;
}



footer{
    background-color: #8B008B;
    padding: 45px;
    color: floralwhite;
    text-align: center;
    
}