among us | profile text

<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400&family=Quicksand:wght@300;400&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 1px;}
::-webkit-scrollbar-thumb {background: #fff;width: 1px}
:root{
	--font1: heroeau;
    --font2: quicksand;
    --font3: inconsolata;
    --color1: #131b1b;
    --color2: #fff;
    --accent1: #DCB640;
}
::selection {
  background: var(--accent1);
}
@font-face{ font-family: "Heroeau"; src: url("https://cdn.statically.io/gh/finchscodes/fonts/main/HEROEAU%20ELEGANT%20DEMO.ttf")
}
.body{
	margin: auto;
    width: 650px;
    background: var(--color1);
    padding: 20px;
    height: 500px;
    position: relative;
    overflow: hidden;
    webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);

}
.butts{
	position: absolute;
    left: 590px;
    top: 150px;
    z-index: 1
}
    input { display: none; }
    input ~ .tab {
        display: none;
        opacity:0;
        transition: 1s all; }
    input + label {
        display: inline-block;
        margin:auto;
    }
    #tab1:checked ~ .tab.content1,
    #tab2:checked ~ .tab.content2,
    #tab3:checked ~ .tab.content3,
    #tab4:checked ~ .tab.content4,
    #tab5:checked ~ .tab.content5 {
        display: block;
        opacity:1;
    }
    .tab{
        width: 500px;
        padding: 20px;
        height: 500px;
        font-size: 12px;
        text-align: justify;
        position: absolute;
        color: var(--color2);
        font-family: var(--font2);
        top: 0px;
        left: -590px;
        top: -150px;
        z-index: 3

    }
    input + label {
      display: block;
      cursor: pointer;
      border: 1px solid;
      border-color: var(--accent1);
      padding: 5px;
      text-transform: uppercase;
      font-family: var(--font3);
      background: var(--color1);
      font-size: 10px;
      font-style: italic;
      color: var(--color2);
      box-sizing: content-box;
      width: 50px;
     	text-align: center;
         margin-bottom: 10px;
         z-index: 5
    }

.div{
    position: absolute;
    left: 0px;
    width: 100%;
    top: 20px;
    height: 1px;
    background: var(--color2);
}
.hdiv{
	border-left: 1px solid var(--accent1);
    height: 580px;
    padding: 20px;
    position: relative;
    left: 600px;
    top:-20px;
    z-index: 0
}
.divtit{
    position: absolute;
    left: 0px;
    top: 0px;
    background: var(--color1);
    background-size: cover;
    padding-right: 10px;
    font-family: var(--font1);
    font-size: 25px;
    color: var(--accent1);
}
h2{
	font-family: var(--font1);
    color: var(--accent1);
    margin: 0px;
    text-align: center;
    line-height: 100%;
    font-size: 30px;
    font-weight: normal
}
h3{
	font-family: var(--font3);
    color: var(--color2);
    margin: 0px;
    text-align: center;
    font-size: 12px;
     font-weight: normal;
     margin-top: 0px;
     margin-bottom: 20px
}
.cirimg{
    position: absolute;
    right: -30px;
    top: -25px;
    width: 100px;
    height: 100px;
    border: solid 1px var(--accent1);
    border-radius: 100%;
    object-fit: cover;
    z-index: 10
}

.subtit{
position: absolute;
    right: 80px;
    top: 30px;
    width: 400px;
    text-align: right;
    font-family: var(--font3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: italic;
    color: var(--color2);
}
.text{
        overflow: auto;
        height: 400px;
        z-index: 1;
        padding-right: 20px;
        width: 500px;
        height: 500px
}
.column{
	column-count: 2;
	column-gap: 10px;
}
.column > img{
    border: 1px solid var(--accent1);
    display:block;
    width: 100%;
    margin-bottom: 5px;
    transition: 1s all
}
.user{
	padding: 10px;
    background: var(--color1);
    border: 1px solid (--accent1);
	display: flex;
    align-items: start;
}
.user h2{
	font-size:20px;
    text-align: left
}
.content4 .user h2{
	font-size:20px;
    text-align: left;
    font-family: var(--font1);
    margin-bottom: 10px;
    line-height: 102%
}
.user img{
        object-fit: cover;
        height: 75px;
        width: 75px;
        margin-right: 10px;
        border: 1px solid var(--accent1);
}
.blurb{
    margin-top: -10px
}
i,b, legend, a{
    color: var(--accent1);
    text-decoration: none;
}
legend{
	font-family: var(--font3);
}
fieldset{
    margin-bottom: 10px;
    border:1px solid var(--color2);
    text-align:justify
}
.cirimg:hover > .subtit{
	opacity: 1;
    cursor: help
}
.cirimg .subtit{
	opacity: 0;
    transition: 1s all;
    text-align: center;
    position: relative;
    left: -150px
}
.stats{
	background: var(--accent1);
	text-transform:uppercase;
    text-align: center;
    color: var(--color2);
    padding: 2px;
}
</style>
<div class="body"><div class="butts">
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">about</label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">aesthetic</label>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">relations</label>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4">playlist</label>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5">other</label>
<div class="tab content1">
<div style="position: relative; top: 30px;margin-bottom: 60px; z-index: 10"><div class="div"></div><div class="cirimg" style="background: url(https://64.media.tumblr.com/b4d66a23b2f395f4ef08d18211357776/6fcad85f9e96feaf-c4/s540x810/fd0a7f1b4cc083086402e9bb4e1257861c5ba953.gifv); background-size: cover;"></div>
<div class="divtit">among us</div>
<div class="subtit">what the is a kilometer</div></div>
<div class="subtit" style="font-size: 12px; left: 450px; top: 200px; width: 100px; text-align: center; background: var(--color1); padding: 10px; box-sizing: border-box; z-index: 4">"a short quote, i like sharks"</div>
<div class="text" style="padding-right: 50px; position: relative;
width: 430px;top: 20px; height: 400px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Quisque non tellus orci ac auctor augue mauris augue neque. Odio eu feugiat pretium nibh ipsum consequat nisl. Dignissim convallis aenean et tortor at risus viverra. <b>Suscipit tellus mauris a diam maecenas sed enim. Mattis rhoncus urna neque viverra justo nec ultrices. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Sapien eget mi proin sed libero.</b> Quam lacus suspendisse faucibus interdum posuere lorem ipsum. Neque convallis a cras semper auctor.
<p>Maecenas ultricies mi eget mauris pharetra et. Sem et tortor consequat id porta. Molestie a iaculis at erat pellentesque adipiscing. <i>Quis risus sed vulputate odio ut enim blandit volutpat maecenas.</i> Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Scelerisque eu ultrices vitae auctor eu augue ut lectus. Natoque penatibus et magnis dis parturient montes. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Faucibus vitae aliquet nec ullamcorper. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Nunc mattis enim ut tellus elementum sagittis vitae. Duis ut diam quam nulla porttitor massa id neque.
<h2>personality</h2>
<p>Dui vivamus arcu felis bibendum ut tristique et egestas. Id neque aliquam vestibulum morbi blandit. Sit amet luctus venenatis lectus magna fringilla. Gravida in fermentum et sollicitudin. Justo nec ultrices dui sapien eget mi proin sed libero. Cras semper auctor neque vitae tempus quam. Tempor commodo ullamcorper a lacus. Ornare massa eget egestas purus viverra accumsan in. Nunc consequat interdum varius sit amet mattis vulputate. Velit laoreet id donec ultrices tincidunt arcu. Egestas purus viverra accumsan in. Facilisi nullam vehicula ipsum a arcu cursus. Vehicula ipsum a arcu cursus. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean euismod. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.
<h2>appearance</h2>
<p>Dui vivamus arcu felis bibendum ut tristique et egestas. Id neque aliquam vestibulum morbi blandit. Sit amet luctus venenatis lectus magna fringilla. Gravida in fermentum et sollicitudin. Justo nec ultrices dui sapien eget mi proin sed libero. Cras semper auctor neque vitae tempus quam. Tempor commodo ullamcorper a lacus. Ornare massa eget egestas purus viverra accumsan in. Nunc consequat interdum varius sit amet mattis vulputate. Velit laoreet id donec ultrices tincidunt arcu. Egestas purus viverra accumsan in. Facilisi nullam vehicula ipsum a arcu cursus. Vehicula ipsum a arcu cursus. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean euismod. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.
</div>
    </div>
<div class="tab content2">
<div class="text">
<h2>aesthetic</h2>
<h3>a subheader again lololol</h3>
<div class="column">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            </div>
    </div></div>
<div class="tab content3"><div class="text">
<h2>relations</h2>
<h3>a subheader again lololol</h3>
<div class="user"><a href="PROFILELINK" target="_blank"><img src="PROFILEIMG"></a><div><h2>da riddler</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>

<div class="user"><a href="PROFILELINK" target="_blank"><img src="PROFILEIMG"></a><div><h2>da riddler</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>

<div class="user"><a href="PROFILELINK" target="_blank"><img src="PROFILEIMG"></a><div><h2>da riddler</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>
    </div></div>
<div class="tab content4"><div class="text">
<h2>playlist</h2>
<h3>a subheader again lololol</h3>
<div class="column">
<div class="user"><a href="LINK" target="_blank"><img src="IMGLINK"></a><div><h2>song name</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div></div></div>
<div class="user"><a href="LINK" target="_blank"><img src="IMGLINK"></a><div><h2>song name</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div></div></div>
<div class="user"><a href="LINK" target="_blank"><img src="IMGLINK"></a><div><h2>song name</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div></div></div>
<div class="user"><a href="LINK" target="_blank"><img src="IMGLINK"></a><div><h2>song name</h2><div class="blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
</div></div></div>
    </div></div></div>
<div class="tab content5"><div class="text">
<h2>information</h2>
<h3>a subheader again lololol</h3>
<table style="font-size:14px;color: var(--color2);">
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
<tr><td style="color: var(--accent1);padding-right: 15px; font-family: var(--font3)">info.</td><td>info</td></tr>
</table>

<h2>statistics</h2>
<h3>a subheader again lololol</h3>
<div style="background:var(--color2);margin:7px 0;">
<div class="stats" style=";width:78%;">78% TRAIT</div></div>
<div style="background:var(--color2);margin:7px 0;">
<div class="stats" style=";width:42%;">42% TRAIT</div></div>
<div style="background:var(--color2);margin:7px 0;">
<div class="stats" style=";width:57%;">57% TRAIT</div></div>
<div style="background:var(--color2);margin:7px 0;">
<div class="stats" style=";width:90%;">90% TRAIT</div></div>
<div style="background:var(--color2);margin:7px 0;">
<div class="stats" style=";width:69%;">69% TRAIT</div></div>

<h2>topics</h2>
<h3>a subheader again lololol</h3>
<fieldset><legend><a href="LINK" target="_blank">Topic Name</a></legend>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</fieldset>
<fieldset><legend><a href="LINK" target="_blank">Topic Name</a></legend>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</fieldset>
<fieldset><legend><a href="LINK" target="_blank">Topic Name</a></legend>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</fieldset>
    </div></div></div><div class="cirimg" style="background: url(https://64.media.tumblr.com/9df58d65e43fae9386e1b041506d26bf/6fcad85f9e96feaf-3c/s540x810/b4d36fe963d7d1e3721c581994e95ca152840b5c.gifv); background-size: cover; left:570px; top: 350px; width: 100px; height: 100px"><div class="subtit">
OOC NAME
<br>TIMEZONE
<br>CONTACT</div>
</div>
<div style="position:relative; z-index: 4; background: var(--color1); padding-bottom: 10px; width: 90px"><a href="https://finchscodes.tumblr.com" style="text-decoration: none; color: var(--color2); font-size: 12px; font-family: var(--font3);" target="_blank">CODED BY FINCH</a></div><div class="hdiv"></div></div>