Untitled

<!DOCTYPE html>
<html>

    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>My Social Network</title>
    </head>
    <body>
    <body>
        <div class="friend" id="best_friend"><p>Arthur</p></div>
        <div class="friend"><p>Batmanuel</p></div>
        <div class="friend"><p>Captain Liberty</p></div>
        <div class="friend"><p>The City</p></div>
        <div class="friend"><p>Justice</p></div>
        <div class="family"><p>Mom</p></div>
        <div class="family"><p>Dad</p></div>
        <div class="family"><p>Bro</p></div>
        <div class="family"><p>Sis</p></div>
        <div class="family"><p>Rex</p></div>
        <div class="enemy"><p>Baron Violent</p></div>
        <div class="enemy"><p>The Breadmaster</p></div>
        <div class="enemy"><p>The Deadly Nose</p></div>
        <div class="enemy"><p>Dinosaur Neil</p></div>
        <div class="enemy" id="archnemesis"><p>Chairface</p></div>
    </body>
</html>


/*Add your CSS below!*/

div {
    display: inline-block;
    margin-left: 5px;

    height: 100;
    width: 100;
    border-radius:100%;
    border: 2px solid black;
}
.friend{border:2px dashed #008000}
.family{border:2px dashed #0000ff}
.enemy{border:2px dashed #ff0000}
#best_friend{border:4px solid #00c957}
#archnemesis{border:4px solid #cc0000}


div p {
    /*position: relative;
    margin-top: 40px;
    font-size: 12px;
}