Pie's first code

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:100,300,400);
body{
background-image:url('http://i.picpar.com/Eaoc.png');
font-size: 13px; /*-- default text size --*/
background-repeat: repeat;
}
body, a, a:hover {cursor: url(), auto; }

::-webkit-scrollbar-thumb { width: 0px; background: transparent; }
::-webkit-scrollbar { width: 0px; background: transparent; }

::selection { color: #000; }
::-moz-selection { color: #00; }

.render{
background-image: url(''); /*-- RENDER background image link here --*/
background-repeat: no-repeat;
background-color: ;
background-position: bottom center;
height: 700px;
width: 480px;
background-size: contain;
position: fixed;
bottom: 0px;
left: 0px;
margin: auto;

}

.tvback{
position: fixed;
margin: auto;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
height: 220px;
width: 340px;
background-color: #747474;
border-radius:1em 1em 1em 1em;
border: 1px solid #747474; /*-- TV color border --*/
box-shadow: 1px 1px 2px #e9e9e9; /*-- TV box shadow --*/

}

.tvscreen{
position: fixed;
margin: auto;
bottom: 0px;
top: 11px;
left: -60px;
right: 0px;
height: 215px;
width: 350px;
border-radius: 15px;
background-image: url('https://static.tumblr.com/454c637a44f444b1c3c37f7fd60f1663/phxdigg/ONho4e68t/tumblr_static_tumblr_static_a1djsvbglk8owccg84w888w0c_640.gif');
background-repeat: repeat;
background-position: center;
border: 2px solid #747474; /*-- TV screen border --*/
opacity: .2;
}

.TV-PICTURES{
position: fixed;
margin: auto;
bottom: 0px;
top: 11px;
left: -60px;
right: 0px;
height: 218px;
width: 350px;
border-radius: 15px;
background-image: url('http://data.whicdn.com/images/160441355/original.jpg'); /*-- YOUR GIF LINK HERE --*/
background-repeat: repeat;
background-position: center;
background-size: cover;
border: 2px solid #e3e3e3; /*-- SECOND SCREEN border --*/
opacity: .4;
}

.control-panel{
position: fixed;
margin: auto;
bottom: 0px;
top: 75px;
left: -30px;
right: -260px;
height: 180px;
width: 20px;
background-color: ;
}

.control-panel a{
display: block;
height:9px;
width: 9px;
opacity:0.5;
background-color: #e3e3e3; /*-- LINK BACKGROUND COLOR --*/
border: 1px solid #c7c6c6; /*-- LINK BORDER COLOR --*/
box-shadow: 1px 1px .5px transparent;
border-radius: 360px;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 20px;
margin-right: 20px;
transition: .9s linear;
}
.control-panel a:active{
box-shadow: 1px 1px 2px #999; /*-- LINK BOX SHADOW --*/
}
.control-panel a:hover{
background-color: #fff; /*-- LINK BACKGROUND COLOR --*/
transition: .9s linear;
}







.channels{
position: fixed;
margin: auto;
bottom: 0px;
top: 0px;
left: -35px;
right: 0px;
height: 180px;
width: 250px;
border-radius: 15px;
background-color: #eaeaea; /*-- page background color --*/
border: 2px solid #e3e3e3; /*-- page border --*/
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: .3s linear;
}
.channels:target{
opacity: 1;
visibility: visible;
transition: .3s linear;
}
.c-text{
margin: 10px;
height: 160px;
width: 230px;
text-align: justify;
font-family: 'roboto condensed';
font-size: 10px; /*- font size -*/
color: #1e1e1e; /*- font color -*/
overflow: auto;
}
.top-letters{
position: fixed;
margin: auto;
bottom: 0px;
opacity:0.5;
top: 85px;
left: -38px;
right: 0px;
height: 50px;
width: 340px;
line-height: 50px;
font-family: helvetica;
font-size: 25px;
font-weight: 700;
text-shadow: 0px 0px 1px #929292; /*-- top font text shadow --*/
color: #e3e3e3; /*-- top font color --*/
text-transform: uppercase;
text-align: center;
}

.lower-music{
position: fixed;
margin: auto;
bottom: -132px;
top: 20px;
left: -290px;
right: -263px;
height: 20px;
width: 40px;
line-height: 20px;
font-family: 'roboto condensed';
font-size: 12px;
font-weight: 100;
color: #929292;
text-transform: uppercase;
text-align: center;
overflow: hidden;
}



a {
text-decoration:none;
outline:none;
-moz-outline-style:none;
color:#dcdbd9;
text-shadow: -1px 0 #c37494, 0 1px #3d7496, 1px 0 #3d7496, 0 -1px #3d7496;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

a:hover {
text-decoration:none;
outline:none;
-moz-outline-style:none;
color:#fffe8f;
}

</style>











 <div class="tvscreen"></div>
<div class="TV-PICTURES"></div><div style="letter-spacing: 2px; text-shadow: ##585858 0pt 0em .1em, ##585858 0pt 0em 1em,##585858 1pt 1em 1em;border-radius: ; opacity:1; width: px; height: px; background-color: ; position: absolute; top: 90px; left:380px; overflow: auto; text-align: left; border: px solid #000;"><span style="font-family: andale mono,times; font-size: xx-small; color: #000000;">
<img src="http://i.picpar.com/zdxc.png" alt="" width="570" height="491" />
</span></div>


<div class="top-letters">
<a href=""><span style="font-family: brush script mt; font-size:22;">Square root of Pie.</a></div>
<div class="lower-music">
<span style="font-family: brush script mt; font-size:25;">►
<div style="margin-top: -25px;
margin-left: 10px;
opacity: 0;">
<audio controls loop><source src="https://my.mixtape.moe/lbasbx.mp3"></audio>
</div>
</div>

<div class="control-panel">
<a href="#one"></a>
<a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
<a href="#"></a>
</div>



<div class="channels" id="one">
<div class="c-text">

<a title=""><span style="font-family: brush script mt; font-size:25;">

  Felicity Laddell.
</a>
<br />

          ▬ PIE • PI • FII • FELICE • EINSTEIN.
<br /><br />

<u>FEMME // ALIEN // TATTOO ARTIST // RIDIN' SOLO // <a target="_blank" href="https://roleplay.chat/profile.php?user=Stray">♥</a></u><br />

It's irrational, in fact transcendental. It does come up occasionally in calculus, although not often. Basically, you need to be more specific. Programming graphics in X is like finding the square root of PI using Roman numerals.
<br /><br />

<i>"Yes. No. To get to the other side. Uh, 1.77245..."</i><br />
                                                                ▬ <i>Pie</i>



</div>
</div>
<div class="channels" id="two">
<div class="c-text">
<b>I am currently taking commissions! Website: <a target="_blank" href="https://pies-codes.tumblr.com/">Pies Codes.</a></b><br><br>

Join my new Patreon page! <a target="_blank" href="https://www.patreon.com/PiesCodes">Pies Patreon</a>

</div>
</div>
<div class="channels" id="three">
<div class="c-text">
<b>Relations.</b><br><br>

▀ <a target="_blank" href="https://roleplay.chat/profile.php?user=.Domino">Domino ~</a> ; her musically inclined buddy.<br />
▀ <a target="_blank" href="https://roleplay.chat/profile.php?user=Quinn Chase">Quinn ~</a> ; her lovely best friend.<br />
▀ <a target="_blank" href="https://roleplay.chat/profile.php?user=Stray">Stray ~</a> ; he's quite unique. AND cute.<br />


</div>
</div>
<div class="channels" id="four">
<div class="c-text">

</div>
</div>
</div>