About page 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--
Page by @flickeringflower
-->

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<!--------------------JAVASCRIPTS-------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:500,
tip_fade_speed:150,
attribute:"title"
});
});
})(jQuery);
</script>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

<style type="text/css">

#s-m-t-tooltip {
    margin:20px;
    padding:10px;
    background:#eaebff;
    border-radius:2px;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    color:#42274b;
    letter-spacing:1px;
    text-transform:uppercase;
    z-index:99;
    max-width:100px;
}

body {
    background-color:#eaebff;
    background-attachment:fixed;
    font-size:12px;
    font-family: 'Open Sans', sans-serif;
    color:#12153b;
    margin:0px;
}

a {
    text-decoration:none;
    color:#fff;
}

b {
    padding:3px 5px;
    background:#d3d5fa;
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
}

#bigthing {
    margin:100px auto;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    position:fixed;
    width:800px;
    height:300px;
    background:transparent;
}

/*this is the circular thing behind the text */
#circle {
    width:500px;
    height:500px;
    position:absolute;
    border-radius:100%;
    margin-left:200px;
    margin-top:100px;
    border:2px dotted #d3d5fa;
    background-image:url(https://i.imgur.com/u0dh0Re.png);
    z-index:-11;
}

#textspace {
    margin-left:200px;
    margin-top:100px;
    height:340px;
    width:340px;
    font-size:14px;
    letter-spacing:1px;
    text-align:justify;
    line-height:200%;
    padding:80px;
    text-shadow: 0 0 5px #d3d5fa, 1px 0 #d3d5fa, 0 1px #d3d5fa, -1px 0 #d3d5fa, 0 -1px #d3d5fa; /* erase this for no text border */
    border-radius:100%;
    background: rgba(235,235,255,0.3); /* change the 255's to 0's for a dark layout */
    font-family: 'Open Sans', sans-serif;
    text-transform:none;
    position:absolute;
    overflow-y:scroll;
    z-index:2;
}

::-webkit-scrollbar-thumb { display:none; }

::-webkit-scrollbar { display:none; }

#links {
    position:absolute;
    margin-top:340px;
    margin-left:720px;
    width:500px;
}

#links a {
    font-family: 'Open Sans', sans-serif;
    font-size:40px;
    text-transform:uppercase;
    color:#fff;
    font-weight:bold;
    display:inline-block;
    width:70px;
    border:2px dotted #eaebff;
    height:70px;
    border-radius:70px;
    line-height:70px;
    background-color:#d3d5fa;
    text-align:center;
}

.link1, .link2, .link3 {
    position:absolute;
}

.link1 {
    margin-top:-120px;
    margin-left:-20px;
}
.link2 {
    margin-top:-30px;
    margin-left:-5px;
}
.link3 {
    margin-top:60px;
    margin-left:-17px;
}

#img {
    position:absolute;
    margin-top:0px;
    margin-left:0px;
    z-index:1;
}

</style>

</head>

<body>

<div id="bigthing"><div id="circle"></div>
<div id="img"><img src="https://i.imgur.com/7Xqs2CJ.png"></div>  <!--change image here -->
<div id="links">
<a href="/" title="home" class="link1">01</a>
<a href="/ask" title="ask" class="link2">02</a>
<a href="/archive" title="archive" class="link3">03</a>
</div>
<div id="textspace">Text here, you know how it is</div>
</div>

</body>
</html>