miyoun uwu ai buttons

<style>

@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

#buttons1 {
font-size: 2em;
font-family: sant joan;
color: black;
background: white;
border-radius: 100%;
position: absolute;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
top: 2.3em;
right: -0.1em;
z-index: 99;
}

#buttons2 {
font-size: 2em;
font-family: sant joan;
color: black;
background: white;
border-radius:80%;
position: absolute;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
top: 3.8em;
right: -0.1em;
z-index: 99;
}

#buttons3 {
font-size: 2em;
font-family: sant joan;
color: black;
background: white;
border-radius:80%;
position: absolute;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
top: 5.3em;
right: -0.1em;
z-index: 99;
}

#buttons4 {
font-size: 2em;
font-family: sant joan;
color: black;
background: white;
border-radius:80%;
position: absolute;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 1px;
padding-left: 5px;
top: 6.8em;
right: -0.1em;
z-index: 99;
}

a:hover {
color: #e1c8f6;
text-decoration: none;
}

a:link {
text-decoration: none;
}
</style>

<div id="buttons1">
<a href="#i">O</a>
</div>

<div id="buttons2">
<a href="#ii">O</a>
</div>

<div id="buttons3">
<a href="#iii">O</a>
</div>

<div id="buttons4">
<a href="#a">O</a>
</div>