* {
    margin: 0; 
}

body {
    background-color: hsl(0, 0%, 8%);
}

div#body-container {
    text-align: center;
    background-color: hsl(0, 0%, 12%);
    width: 400px;
    height: 700px;
    border-radius: 15px;  
    margin: 0 auto; 
}

img {
    margin-top: 4rem; 
    height: 200px; 
    width: 200px;
    border-radius: 50%;  
    /* enables picture animation when in hover state */
    transition: transform 0.5s ease-in-out; 
}

/* Picture animation when hovering */
img:hover {
    transform: rotate(360deg); 
}

h1, p  {
    color: hsl(267, 80%, 80%);
}

#map {
    color: hsl(75, 94%, 57%);
    font-weight: bold;
    font-size: 20px; 
}

p {
    color: hsl(267, 80%, 80%); 
    font-family: "Inter", serif;
    font-size: 14px;
    font-weight: 400; 
}


a {
    color: hsl(267, 80%, 80%); 
    text-decoration: none; 
    text-align: center; 
    padding-top: 5px; 
}

a.button {
    display: block; 
    padding: 8px 10px; 
    text-align: center; 
    align-items: center; 
    border: 2px solid rgb(69, 69, 69);
    background-color: rgb(69, 69, 69);
    border-radius: 5px;
    margin: 10px; 

}

a.button:hover {
    font-size: 20px; 
}

ul {
    list-style: none;
  
}

li.button {
    border: 2px solid hsl(0, 0%, 12%);
}