sky v1

background:url(https://s20.postimg.org/zdej3snpp/tumblr_static_bg-advanced-pattern-light.png),#f3f1f1;}/** CSS by Austin (638877683) **/:root{--main-color:rgb(63,36,87);--acent-color:rgb(255,255,255)}body{background-attachment:fixed;margin:0;word-wrap:break-word}*{transition:all 1s ease}.desc,.sbpic{transition:all .8s ease-in-out}em.material-icons{left:50%;top:50%;transform:translate(-50%,-50%);position:relative;font-size:20px}::selection{background:var(--main-color);color:#fff}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track-piece{background-color:var(--acent-color)}::-webkit-scrollbar-thumb:vertical{width:10px;border-radius:100px;background-color:#ebb57d}a{text-decoration:none}#land,#sky{width:100%;position:fixed;margin-top:160px;left:0;height:50px;background-color:var(--main-color);padding-left:calc(50% + 120px);font-family:economica;text-transform:uppercase;color:var(--acent-color);line-height:50px;font-size:30px;padding-left:0;text-align:center;}#sidebar,.sbpic{width:200px;height:200px}#sidebar{position:fixed;padding:10px;margin-top:74px;border-radius:250px;background-color:var(--acent-color);border:1px solid var(--main-color);z-index:1000;left:50%;transform:translateX(-50%);transform:translateX(calc(-50% - 305px));}.storm,.uri{background-color:var(--main-color)}.sbpic{position:absolute;display:block;border-radius:250px}#sidebar:hover .sbpic{transform:rotate(5deg);opacity:0}.desc{position:relative;width:190px;height:190px;overflow:auto;text-align:center;font-family:calibri;font-size:10px;margin:15px 5px;opacity:0;color:#a3a1a1}#ni,#san{margin-top:-11px;position:absolute}#sidebar:hover .desc,iframe:hover{opacity:1}.basicnavpixel:hover,.desc a{transition:all .4s ease-in-out}.desc a{color:var(--main-color)}.desc a:hover{color:#7a6781}.desc b,strong{color:#8700ff}.desc i,.desc em{color:#a46bd6}#basicnav{margin-left:40px;position:absolute}.basicnavpixel{width:25px;height:25px;display:block;opacity:1;color:var(--acent-color)}.basicnavpixel:hover{color:var(--main-color)}#top{top:0;left:0;width:100%;height:160px;position:fixed;background-image:url(https://s20.postimg.org/57g4p0gst/Untitled.png)}.cloud,.rain,.storm,.sun{width:3px;transition:all .4s ease-in-out}#ichi{position:absolute;margin-top:-19px}.storm{height:50px;margin-left:15px}.uri{border-radius:100px;padding:3px;border:1px solid var(--main-color)}.jiro,.roll{border-radius:100px;padding:3px;background-color:var(--main-color)}#ni{margin-left:30px}.rain{background-color:var(--main-color);height:110px;margin-left:15px}.jiro{border:1px solid var(--main-color)}#san{margin-left:60px}.cloud{background-color:var(--main-color);height:30px;margin-left:15px}.roll{border:1px solid var(--main-color)}#yon{position:absolute;margin-top:-20px;margin-left:90px}.sun{background-color:var(--main-color);height:80px;margin-left:15px}.garyuu{border-radius:100px;padding:3px;background-color:var(--main-color);border:1px solid var(--main-color)}#ichi:hover .storm,#ni:hover .rain,#san:hover .cloud,#yon:hover .sun{padding-top:10px}.garyuu:hover,.jiro:hover,.roll:hover,.uri:hover{background-color:var(--acent-color);transition:all .4s ease-in-out}#land{margin:0;bottom:0}iframe{opacity:1;position:absolute;left:50%;transform:translateX(-50%);top:215px;border:2px solid var(--main-color);}[src*="logo"]{position:absolute;bottom:0;}[id*=yit],[src*="logo"]{background:var(--main-color);}[id*=yit]{left:-6px;margin-right:-6px;position:relative;}[id*=ymen]{padding-bottom:50px;width:150px;}*{;

    [font:Economica]
    [icons:material]
    <div id="top"></div>
    <div id="sky">At least the waves sound the same.</div>
    <!--pagination-->
    <div id="sidebar">
        <img class="sbpic" src="https://s20.postimg.org/5mrei12q5/avatar.png">
        <div class="desc">
            <p>austin aka oj | 18 | gemini | intp</p>
            <p>[ <a href="https://FEXBots.com">fexbots</a> chief assistant ]</p>
            <p>“Is that enough? To love someone with all your heart, to want someone so desperately and still not be able to be with them?<br />
What about you, nameiot? Would you be satisfied with that?”<br /><br />
“I’ll be happy as long as they’re happy.” <br /><br />
“That’s some devotion, huh?”</p>
        </div>
        <div id="basicnav">
            <div id="ichi">
                <a href="https://xat.com/FEXBots">
                    <div class="storm"></div>
                    <div class="uri">
                        <div class="basicnavpixel"><em class="material-icons">home</i></div>
                    </div>
                </a>
            </div>
            <!--ichi-->
            <div id="ni">
                <a href="https://xat.com/PGO">
                    <div class="rain"></div>
                    <div class="jiro">
                        <div class="basicnavpixel"><em class="material-icons">pets</i></div>
                    </div>
                </a>
            </div>
            <!--ni-->
            <div id="san">
                <a href="https://forum.xat.com/profile/37256-oj/">
                    <div class="cloud"></div>
                    <div class="roll">
                        <div class="basicnavpixel"><em class="material-icons">message</i></div>
                    </div>
                </a>
            </div>
            <!--san-->
            <div id="yon">
                <a href="https://xat.com/web_gear/chat/editprofile.php">
                    <div class="sun"></div>
                    <div class="garyuu">
                        <div class="basicnavpixel"><em class="material-icons">mode_edit</i></div>
                    </div>
                </a>
            </div>
            <!--yon-->
        </div>
        <!--basicnav-->
    </div>
    <!--sidebar-->           [youtube:640:360:k23JihbWKy8:autoplay=1&loop=1&version=3&list=PLmQg9VgF3Tshbl_ObOMRpTMshbKFtRbIi&iv_load_policy=3&controls=0&showinfo=0]
    <div id="land"></div>