<!-----ABOUT ME------>
<style> @import url('https://fonts.googleapis.com/css?family=Condiment|Devonshire|Frijole|Goudy+Bookletter+1911|Homemade+Apple|Inika|Julee|Just+Me+Again+Down+Here|Lobster|Nosifer|Pacifico|Schoolbell|Swanky+and+Moo+Moo');
 body {
     background-color: var(--main-bg-color);
     margin:0px;
}
 p, li {
    color: var(--font-color);
     margin:0 0 10 0;
    font-family:"Goudy Bookletter 1911";
}
 ::-webkit-scrollbar-thumb {
     background-color: var(--scroll-thumb-color);
     width: 5px;
}
 ::-webkit-scrollbar {
     width: 5px;
}
 @keyframes appear {
     from {
    }
     to {
         opacity: 1;
    }
}
 .info{
    Almost all colors are right here, so it should be easy to change them!
}
 :root {
     --main-bg-color: #2d5782;
     --text-box-color: #a3bad2;
     --box-border-color: #dbe4ed;
     --font-color: #2d5782;
     --quote-color:#fff;
     --nav-color: #2d5782;
     --nav-shadow-color: #fff;
     --button-color: #a3bad2;
     --button-select-color: #2d5782;
     --button-hover-color: #dbe4ed;
     --main-header-color: #fff;
     --main-header-shadow-color: #2d5782;
     --scroll-thumb-color: #dbe4ed;
     --header-one-color: #2d5782;
     --header-one-shadow:#a3bad2;
     --header-two-color: #fff;
     --header-three-color: #fff;
     --link-color:#2d5782;
}
 .banner {
     position: absolute;
     width: 100%;
     height: 150px;
     background: url('http://www.hddesktopbackgrounds.us/backgrounds-images/1920x1080/oi3em-wallpapers-351724740-1920x1080.jpg');
     background-size: 100%;
     background-position:center;
     top:0;
     left:0;
}
 .shannaro {
     position: absolute;
     text-align: center;
     font-size: 45px;
     letter-spacing: 5px;
     width: 500px;
     left: 50%;
     margin-top: -50px;
     color: var(--main-header-color);
     margin-left: -255px;
     font-family:Condiment;
     height: 100px;
     text-shadow: 3px 2px 3px var(--main-header-shadow-color);
}
 #navicontainer {
     position: absolute;
     width: 550px;
     left: 50%;
     margin-top: -85px;
     margin-left: -275px;
     text-align: center;
}
 .effect {
     -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
     -o-transition: all 2s ease;
     transition: 2s;
     opacity: 0;
}
 .effect:hover {
     -webkit-transition: all 2s ease;
     -moz-transition: all 2s ease;
     -o-transition: all 2s ease;
     transition: 2s;
     opacity: 1;
}
 .navigation {
     height: 40px;
     text-align: center;
     border-radius: 2px;
}
 .tabs {
     position: absolute;
     text-align: center;
     min-height: 300px;
     margin-top: 20px;
     width: 100%;
     height: 100%;
     left:0;
}
 .tab {
     font-size: 11px;
     display: inline;
}
 .tab label {
     background: var(--button-color);
     border-radius: 20px;
     margin: 5px;
     width: 15px;
     height: 15px;
     display: inline-block;
     transition: .9s;
}
 .tab label:hover {
     background: var(--button-hover-color);
     transition: .9s;
}
 .tab [type=radio] {
     display: none;
}
 .content {
     position: absolute;
     text-align: justify;
     margin-top: 40px;
     top: 0px;
     left: 0px;
     bottom: 0;
     right: 0;
     letter-spacing: 1px;
     font-size: 10px;
     background-color: var(--main-bg-color);
     opacity:0;
}
 [type=radio]:checked~label {
     background: var(--button-select-color);
     z-index: 2;
}
 [type=radio]:checked~label~.content {
     z-index: 1;
     opacity:1;
}
 .ichi {
     position: absolute;
     display: block;
     width: 445;
     height: 100px;
     padding: 15px;
     text-align: right;
     color: var( --quote-color);
     left: 50%;
     margin-left: -500px;
     margin-top: 50px;
     overflow: auto;
     font-size: 30px;
     line-height:30px;
     font-family:"Julee";
}
 .wrap {
     border: 10px solid white;
}
 .ni {
     position: absolute;
     left: 50%;
     margin-left: -500px;
     margin-top: 180px;
     width: 455;
     height: 210px;
     color: var(--font-color);
     padding: 10px;
     font-size: 12px;
     font-family: "Goudy Bookletter 1911";
     overflow: auto;
     border: 3px dashed var(--box-border-color);
     background-color: var(--text-box-color);
}
 .san {
     position: absolute;
     left: 50%;
     margin-left: 0px;
     margin-top: 266px;
     width: 455;
     height: 210px;
     color: var(--font-color);
     padding: 10px;
     font-size: 12px;
     font-family: "Goudy Bookletter 1911";
     overflow: auto;
     border: 3px dashed var(--box-border-color);
     background-color: var(--text-box-color);
}
 .shi {
     position: absolute;
     display: block;
     width: 445;
     height: 100px;
     text-align: left;
     color: var( --quote-color);
     left: 50%;
     margin-left: 10px;
     margin-top: 506px;
     padding: 15px;
     font-size: 30px;
     line-height:30px;
     font-family:"Julee";
}
 .go {
     margin: 15px;
     text-align: center;
     display: block;
}
 .roku {
     margin: 25 25 25 25px;
     width: 451px;
     height: 250px;
     background-color: var(--text-box-color);
     color: var(--font-color);
     text-align: center;
     padding: 10px;
     display: inline-block;
     font-size:12px;
     font-family:"Goudy Bookletter 1911";
}
 .roku div {
     text-align: justify;
}
 .nana {
     width: 500px;
     display: inline-block;
     text-align: right;
     margin: 35 0 35 100;
     position: absolute;
     left: 50%;
     margin-left: -500px;
}
 .hachi {
     display: inline-block;
     margin: 60 100 60 0;
     position: absolute;
     left: 50%;
     margin-left: 50px;
}
 .kyuu {
     width: 480px;
     display: inline-block;
     height: 473px;
     overflow:auto;
     text-align: justify;
     padding:10px;
     margin: 35;
     color: var(--font-color);
     position: absolute;
     left: 50%;
     margin-left: -500px;
     top: 125px;
     font-family:"Goudy Bookletter 1911";
     font-size:12px;
     border: 3px dashed var(--box-border-color);
     background-color: var(--text-box-color);
}
 .juu{
     width: 510px;
     height: 600px;
     color: var(--font-color);
     font-family:"Goudy Bookletter 1911";
     position: absolute;
     left: 50%;
     overflow:auto;
     margin-top:50px;
}
 #roleplay-wrapper{
     display: inline-block;
     height:100px;
     width:500px;
     margin: 0px 0 10 0;
}
 #roleplay{
     width: 484px;
     height: 84px;
     position: absolute;
     overflow: auto;
     padding: 5px;
     font-family: "Goudy Bookletter 1911";
     display: block;
     background-color: var(--text-box-color);
     border: 3px dashed var(--box-border-color);
     color: var(--font-color);
     transition: .9s;
}
 #roleplay-img{
     width:500px;
     height:100px;
     position:absolute;
}
 .juuichi {
     width: 450px;
     display: inline-block;
     height: 200px;
     text-align: right;
     margin: 35;
     position: absolute;
     left: 50%;
     margin-left: -500px;
     margin-top: 20px;
}
 .juuni{
     font-size: 32px;
     font-family: "Julee";
     color: var( --quote-color);
     height: 165px;
     width: 450px;
     position: absolute;
     left: 50%;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
     margin-left: -500px;
     margin-top: 315px;
}
 .juusan{
     width: 450px;
     display: inline-block;
     height: 200px;
     text-align: right;
     margin: 35;
     position: absolute;
     left: 50%;
     margin-left: -500px;
     margin-top: 440px;
}
/******TEXT STYLING*******/
 a.sample:active, a.sample:visited, a.sample:link {
     text-align: center;
     font-size: 15px;
     font-weight:lighter;
     display: block;
     color: var(--link-color);
     text-decoration: none;
     font-family:Devonshire;
     letter-spacing: 4px;
     background: var(--text-box-color);
     height:auto;
     padding:1px;
     margin-bottom:3px;
     margin-right:3px;
     border: 6px double var( --box-border-color);
}
 a.sample:hover{
     color:#a3bad2;
     background: #2d5782;
}
 a.connection:active, a.connection:visited, a.connection:link {
     text-align: center;
     font-size: 15px;
     font-weight:lighter;
     display: block;
     color: var(--link-color);
     text-decoration: none;
     font-family:Devonshire;
     letter-spacing: 4px;
     background: var(--text-box-color);
     height:auto;
     padding:1px;
     margin-bottom:3px;
     margin-right:3px;
     border: 6px double var( --box-border-color);
}
 a.connection:hover{
     color:var(--text-box-color);
     background: var(--main-bg-color);
}
 .roku h1 {
     margin-top: -20px;
     background: #dbe4ed;
     width: 150px;
     margin-left: -3px;
     padding: 10;
     color: var(--header-one-color);
     font-size: 17px;
     letter-spacing: 3px;
     font-weight: bold;
     font-family: 'Devonshire';
     display: inline-block;
     line-height: 6px;
     text-align: center;
     text-shadow: 2px 2px 1px var(--header-one-shadow);
     box-shadow:4px 4px , -2px 2px;
}
 story{
     text-align:center;
     font-family:Devonshire;
     display:block;
     font-size:20px;
     line-height:10px;
     padding:10px;
     margin:0 10 0 10px;
     color:var(--header-one-color);
     border-bottom:2px solid var(--header-one-color);
}
 h2 {
     margin: 45px 0 10px 3px;
     font-family: Condiment;
     color: var(--header-two-color);
     font-size: 35px;
     letter-spacing: 3px;
     line-height: 15px;
     font-weight: lighter;
     padding-bottom: 5px;
     border-bottom: 2px solid var(--header-two-color);
}
 .nana h3 {
     margin-top:20px;
     color: var(--header-three-color);
     font-size: 17px;
     letter-spacing: 2px;
     font-family: Julee;
     font-weight:lighter;
     font-style:italic;
     display: block;
     line-height: 1px;
     text-align: left;
}
 a:after {
     display: block;
     content: '';
     border-bottom: solid 3px #fff;
     text-shadow: 3px 2px 3px #92292c;
     transform: scaleX(0);
     transition: transform 400ms ease-out;
}
 a#nav{
     font-family: Lobster;
     text-shadow: 2px 1px 1px var(--nav-shadow-color);
     color: var(--nav-color);
     font-size: 15px;
     letter-spacing: 3px;
     margin: 0 10 0 0;
}
 a#nav:hover:after {
     transform: scaleX(1);
}
 a:link, a:visited {
     text-align: center;
     text-decoration: none;
     display: inline-block;
     transition: .9s;
     font-weight: bold;
     font-family:lobster;
     color:var(--link-color);
     font-size: 12px;
     letter-spacing: 2px;
}
 a:hover{
     color:var(--box-border-color);
}
 .userAlbums {
     display:none;
}
 .extendedNetwork {
     display:none;
}
 .latestBlogEntry {
     display:none;
}
 .latestBlogEntry {
     display:none;
}
 .whitetext12{
     visibility:hidden;
     display:none;
}
 .orangetext15{
     visibility:hidden;
     display:none;
}
 .lightbluetext8{
     visibility:hidden;
     display:none;
}
 td.text td.text{
     background-color:transparent;
}
 td.text table {
     background-color:transparent;
}
 table.interestsanddetails span.lightbluetext8, table.interestsanddetails td.text {
     display:none;
}
 table.interestsanddetails td {
     width:0px;
     padding:0px;
}
 table.interestsanddetails td td {
     background-color: transparent!important;
}
 table.interestsanddetails, table.interestsanddetails td {
     border:none!important;
}
 .contactTable {
     display: none;
}
 .clearfix {
     margin-top: -100px;
}
 table div font {
     display: none;
}
 .userProfileURL {
     display:none;
}
 .friendspace{
     display:none
}
 .friendsComments {
     display:none;
}
 .profileInfo{
     display:none;
}
 .nametext {
     display:none;
}
 div div table div, div.clearfix a, input {
     display:none;
}
 div.clearfix table div div {
     display:block;
}
 .userProfileDetail {
     display:none;
}
 table.profileInfo * {
     background-color:transparent;
}
 table.profileInfo td td {
     letter-spacing:-100px;
     font-size:0px;
}
 table.profileInfo td td.text, table.profileInfo td td * {
     font-size:11px;
     letter-spacing:0px;
}
 table.profileInfo td td a {
     display:none;
}
 table.profileInfo td td.text * {
     display:inline;
}
 table#profileV1Main td {
     background-color:transparent
}
 </style>






























<!----LIKE TO MEET---->


<div class="banner"></div>
<div class="shannaro">Shakugan Yukina</div>
<div id="navicontainer">
    <div class="navigation">
        <a href="/" class="fromCenter" id="nav">home</a>
        <a href="/" class="fromCenter" id="nav">message</a>
        <a href="/" class="fromCenter" id="nav">comment</a>
        <a href="/" class="fromCenter" id="nav">photos</a>
        <a href="/" class="fromCenter" id="nav">stream</a>
    </div>
    <br>
    <br>
    <br>
</div>
<div class="tabs">
    <!-- TAB 1-->
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1"></label>
        <div class="content">
            <div class="ichi">
                <img src="https://us.123rf.com/450wm/lightpoet/lightpoet1509/lightpoet150900012/44926903-snowy-background-texture-of-white-snow-sparkling-in-the-sun.jpg?ver=6" width="100px" height="100px" style="border-radius:100px;float:left;margin-left:10px;">                "Quote goes here, a quote here quote here quote here quote here."

            </div>
            <div class="ni">
                <p>Lorem
                    <b>ipsum</b>
                    <i>dolor</i>
                    <u>sit</u> amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                    ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                    ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                    ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                <li>Testing bullets</li>
            </div>
            <img src="https://i.imgur.com/uBnoLIT.gif" width="480" height="200px" style="position:absolute;margin-top:431px;left:50%;margin-left:-500px;">
            <img src="https://i.imgur.com/uBnoLIT.gif" width="480" height="200px" style="left:50%; margin-left:0px;position:absolute;margin-top:50px;">
            <div class="san">
                <story>Owes</story>
                <li>Person 1</li>
                <li>Person 2</li>
                <p>Lorem
                    <b>ipsum</b>
                    <i>dolor</i>
                    <u>sit</u> amet,
                    <a href="/">consectetur</a> adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum ut
                    erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                </p>
                <story>Complete!</story>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                    ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                    ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna pretium
                    magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                <li>Testing bullets</li>
            </div>
            <div class="shi">
                <img src="https://us.123rf.com/450wm/lightpoet/lightpoet1509/lightpoet150900012/44926903-snowy-background-texture-of-white-snow-sparkling-in-the-sun.jpg?ver=6" width="100px" height="100px" style="border-radius:100px;float:right;margin-right:10px;">                "Quote goes here, a quote here quote here quote here quote here."

            </div>
        </div>
    </div>
    <!-- TAB 2-->
    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2"></label>
        <div class="content">
            <center>
                <div class="go">
                    <img src="https://i.imgur.com/kHyBYRt.jpg?1" width="1000px" height="100px">
                </div>
                <div class="roku">
                    <h1>Preferences</h1>
                    <div style="overflow:auto; height:230px;">
                        <p>Lorem
                            <b>ipsum</b>
                            <i>dolor</i>
                            <u>sit</u> amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                            ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien
                            magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                        </p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                            Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                            sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                            Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                            sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                        <li>Testing bullets</li>
                    </div>
                </div>
                <div class="roku">
                    <h1>Rules</h1>
                    <div style="overflow:auto;">
                        <div style="overflow:auto; height:230px;">
                            <p>Lorem
                                <b>ipsum</b>
                                <i>dolor</i>
                                <u>sit</u> amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                                Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                                sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                                Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                                sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                                Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                                sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                            <li>Testing bullets</li>
                        </div>
                    </div>
                </div>
            </center>
            <div class="go">
                <img src="https://i.imgur.com/kHyBYRt.jpg?1" width="1000px" height="100px">
            </div>
        </div>
    </div>
    <!-- TAB 3-->
    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3"></label>
        <div class="content">
            <center>
                <div class="nana">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <h3>Quote here consectetur adipiscing elit.</h3>
                </div>
                <div class="hachi">
                    <img src="https://i.imgur.com/O5jQbs0.jpg?1" width="450px" height="600px">
                </div>
                <div class="kyuu">
                    <p>Lorem
                        <b>ipsum</b>
                        <i>dolor</i>
                        <u>sit</u> amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                        ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna
                        pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                        Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                        sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                        Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                        sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                    <li>Testing bullets</li>
                    <p>Lorem
                        <b>ipsum</b>
                        <i>dolor</i>
                        <u>sit</u> amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla. Vestibulum
                        ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum, sapien magna
                        pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                        Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                        sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis sodales ultrices. Donec vel ex et diam molestie posuere luctus ac enim. Mauris eget enim justo. Nam id porttitor libero. Sed egestas maximus tortor a fringilla.
                        Vestibulum ut erat mi. Nunc nulla diam, accumsan id cursus viverra, cursus vel urna. Proin posuere dui in est rutrum dignissim. Integer porttitor vulputate sapien ut eleifend. Aenean ultricies, est laoreet vestibulum bibendum,
                        sapien magna pretium magna, a tempus leo eros eu ligula. Nam sit amet elit tortor. Fusce eget diam vel ante luctus euismod et eget urna. Vivamus efficitur lectus ut sagittis maximus.</p>
                    <li>Testing bullets</li>
                </div>
            </center>
        </div>
    </div>
    <!-- TAB 4-->
    <div class="tab">
        <input type="radio" id="tab-4" name="tab-group-1">
        <label for="tab-4"></label>
        <div class="content">
            <div class="juu">
                <!-- One -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
                <!-- Two -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
                <!-- Three -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
                <!-- Four -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
                <!-- Five -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
                <!-- Six -->
                <div id="roleplay-wrapper">
                    <div id="roleplay-img">
                        <img src="https://i.imgur.com/UhXEU4U.jpg?1" width="500" height="100">
                    </div>
                    <div id="roleplay" class="effect">
                        <story>A Tale of Two Cities</story>
                        <br>
                        <b>Name:</b> Name Here
                        <br>
                        <b>Status:</b> Ongoing
                        <br>
                        <b>Genre:</b>
                        <br>
                        <b>Synopsis:</b>
                    </div>
                </div>
            </div>
            <div class="juuichi">
                <h2>connections</h2>
                <img src="https://i.imgur.com/gs5ugg5.jpg?1" width="200px" height="200px" style="margin-right:5px;float:left;border:4px solid #a3bad2;">
                <div style="height:208px;overflow:auto;">
                    <a href="https://google.com" class="connection">link here</a>
                    <a href="https://google.com" class="connection">link here</a>
                    <a href="https://google.com" class="connection">link here</a>
                    <a href="https://google.com" class="connection">link here</a>
                    <a href="https://google.com" class="connection">link here</a>
                    <a href="https://google.com" class="connection">link here</a>
                </div>
            </div>
            <div class="juuni">"All that we see or seem is but a dream within a dream. (three lines max)"</div>
            <div class="juusan">
                <img src="https://i.imgur.com/gs5ugg5.jpg?1" width="200px" height="200px" style="float:right;margin-left:5px;border:4px solid #a3bad2;">
                <div style="height:208px;overflow:auto;">
                    <a href="https://google.com" class="sample">link here</a>
                    <a href="https://google.com" class="sample">link here</a>
                    <a href="https://google.com" class="sample">link here</a>
                    <a href="https://google.com" class="sample">link here</a>
                    <a href="https://google.com" class="sample">link here</a>
                    <a href="https://google.com" class="sample">link here</a>
                </div>
            </div>
        </div>
    </div>
</div>