pink shorts | backstory

<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Vollkorn&display=swap" rel="stylesheet">
<style>
        @font-face {font-family: 'boxicons'; src: url(https://cdn.statically.io/gh/finchscodes/fonts/main/boxicons.ttf)}
    ::-webkit-scrollbar {width: 10px;border-radius: 16px;}
    ::-webkit-scrollbar-thumb {background: #eee;width: 1px;background-clip: padding-box;border-right: 5px solid transparent;border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-radius: 16px}
.sideimg{
    background: url(https://64.media.tumblr.com/ef6ab9ab2183493dab51ae1a29afeb80/1d739192690b6f3b-ba/s640x960/2c21acd32c76d33f08ea0d0be1d4cef8e45544f4.jpg)center;
    background-size: cover;
    width: 250px;
    height: 560px;
    border-radius: 10px;
    position: absolute;
    left: 65%;
    border: 1px solid rgba(0,0,0,0.2);
    font-family: 'Indie Flower';
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    font-size: 24px;
    padding: 20px;
}

.sideimg:hover .ooc{
    opacity: 1
}
.ooc{
    opacity: 0;
    transition: 1s all;
    background: rgba(50,50,50,0.4);
    backdrop-filter: blur(3px);
    padding: 10px;
    color: #fff;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 10px;
    font-family: 'Vollkorn';
    font-size: 10px;
    position: absolute;
    left: 200px;
    top: 200px;
    overflow: auto
}
.ooc::-webkit-scrollbar {
  display: none;
}
.body{
    margin: auto;
    width: 700px;
    height: 600px;
    padding: 20px;
    position: relative;
    font-family: 'Vollkorn';
    font-size:12px;
    color: #000
}
    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: 410px;
        background: #bbb;
        overflow: auto;
        padding: 20px;
        height: 500px;
        font-size: 11px;
        text-align: justify;
        position: relative;
        border: 1px solid rgba(0,0,0,0.2);
        margin-top: -150px;
        border-radius: 10px;

;

    }
    input + label {
      display: block;
      color: #bbb;
      cursor: pointer;
      transition: 1s all;
      height: 25px;
      width: 25px;
      margin-bottom: 10px;
      text-shadow: 1px 1px 3px #555;
      position: relative;
      text-transform: uppercase;
      font-size: 20px;
      box-sizing: content-box;
      left: 61%

    }
    input:checked + label, label:hover {
        color: #fff;
      transition: 1s all;
    }
    h2{
        margin: 0px;
        font-family: 'Indie Flower';
        color: #fff;
        text-shadow: 1px 1px 3px #000;
    }
    b, i{
        color: rgb(57, 48, 99)
    }
</style>
<div class="body">
    <div class="sideimg">
        <h2>pink shorts</h2>
        i messed up the colors
        <div class="ooc">
            <img src="https://64.media.tumblr.com/704d3b41aac7a48613e1c3eb5cf2f33c/a01620cddae13e0d-2c/s250x400/3241dc67f477781d117803742586fdd952d83251.gifv" style="border-radius: 50%; height: 70px; width: 70px; object-fit: cover; margin-bottom: 5px">
            <br>OOC: my name is monke ooh ah</div>
        <img src="https://64.media.tumblr.com/d56e50c2a9d14403c304c76c253d6377/58f68771dc6e3ccc-40/s400x600/6b95ac07598c6c45858f507b9bdc21c9bae1a09d.gifv" style="height: 200px; width: 200px; object-fit: cover; border: 1px solid rgba(0,0,0,0.2); border-radius: 10px; top: 60%; left: 120px; position: absolute; z-index: 2">
    </div>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1"><span class='bx bxs-circle'></span></label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2"><span class='bx bxs-circle'></span></label>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3"><span class='bx bxs-circle'></span></span></label>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4"><span class='bx bxs-circle'></span></label>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5"><span class='bx bxs-circle'></span></label>
<div class="tab content1">
    <h2>laundry day is a social construct</h2>
    1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. <i>Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus.</i> Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

    <p><b>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla.</b> Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

        <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.
            <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.1, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

                <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.

    </div>
<div class="tab content2">2, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

    <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.

    </div>
<div class="tab content3">3, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

    <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.

    </div>
<div class="tab content4">4, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

    <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.

    </div>
<div class="tab content5">5, consectetur adipiscing elit. Donec eget ligula non lectus ultrices imperdiet sodales sed quam. Quisque vel semper enim. Morbi ultrices laoreet ligula in posuere. Integer feugiat non dolor eu vulputate. Maecenas a fermentum neque. Mauris dapibus sem vel metus bibendum, in pulvinar risus luctus. Maecenas eget risus sit amet libero rutrum faucibus. Fusce mollis sagittis leo nec cursus. In hac habitasse platea dictumst. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate dui in metus sagittis convallis. Praesent pellentesque ligula sit amet nunc elementum, eget hendrerit purus eleifend.

    <p>Nunc a scelerisque neque. Nullam at eros egestas, finibus felis ut, porta nulla. Integer et ornare ante. Nullam non dictum lectus. Phasellus nec finibus velit. Ut malesuada lacus mattis, tempus arcu non, aliquet odio. Nam porttitor placerat ex, sit amet laoreet nunc iaculis ut. Praesent auctor quam a lorem consequat imperdiet. Sed ex quam, consequat quis hendrerit ornare, semper nec leo. Integer finibus maximus augue, consequat mollis lorem facilisis id. Curabitur mattis ligula ac dolor imperdiet blandit.

    </div>
<div style="text-align: center; padding: 10px; margin-left: 120px"><a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #000;" target="_blank"> Coded by Finch</a>
</div></div>