@import url('https://fonts.googleapis.com/css?family=Bebas Neue|Bangers|Anton&display=swap');


    a {color: #5294dd;
    text-decoration: none;
    text-transform: uppercase;
    transition: 1.5s;
    font-family: anton;
    font-variant: none;
    text-shadow: none;
        text-shadow: -1px 0 #000, 0 1px #000,1px 0 #000, 0 -1px #000;
    }


    body {
        background-color: #48a4d6;
background-image: url("https://www.transparenttextures.com/patterns/60-lines.png");
    }

    .trick {
        position: absolute;
        bottom: 0%;
        right: 0%;
        height: 30.2vw;
        width: 14.5vw;
        background: url('https://images2.imgbox.com/1d/74/Qe8d4aee_o.png') no-repeat;
        background-size: 100%;
        transition: ease 1s;
        transition-delay: 1s;
        opacity: 1;
    }

    body:hover .trick {
    transition: ease 1s;
    transition-delay: 1s;
    opacity: 0;
    }

    .text1 {
        position: absolute;
        bottom: 0%;
        left: 1%;
        font-family: bad;
        font-size: 100px;
        color: #FFEB00;
        text-align: left;
        letter-spacing: ;
        line-height: 80px;
        text-shadow: -1px 0 #C80000, 0 1px #C80000,1px 0 #C80000, 0 -1px #C80000;

    }


    .mainbox {
        position: absolute;
        bottom: 2%;
        right: 30%;
        height: 18vw;
        width: 30vw;
        background: #f2d182;
        transition: ease 1s;
        transition-delay: 1s;
        opacity: 0;}


    body:hover .mainbox {
        transition: ease 1s;
    transition-delay: 1s;
    opacity: 1;

    }

    .img {
        position: absolute;
        top: 0%;
        right: -60%;
        height: 12vw;
        width: 30vw;
        background: url('https://images2.imgbox.com/cd/ff/KdAwUhGX_o.png') no-repeat;
        background-size: 100%;
        filter: drop-shadow(10px 0px #f2d182);

    }


.one {
position: absolute;
top: 2%;
left: 0%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('https://images2.imgbox.com/e4/f9/ui6gSvzM_o.png');
background-size: 55px;
background-repeat: no-repeat;
}

.two {
position: absolute;
top: 2%;
left: 10%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('https://images2.imgbox.com/e4/f9/ui6gSvzM_o.png');
background-size: 55px;
background-repeat: no-repeat;
}

.three {
position: absolute;
top: 2%;
left: 20%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('https://images2.imgbox.com/e4/f9/ui6gSvzM_o.png');
background-size: 55px;
background-repeat: no-repeat;
}

.four {
position: absolute;
top: 2%;
left: 30%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('https://images2.imgbox.com/e4/f9/ui6gSvzM_o.png');
background-size: 55px;
background-repeat: no-repeat;
}

    .five {
position: absolute;
top: 2%;
left: 40%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('https://images2.imgbox.com/e4/f9/ui6gSvzM_o.png');
background-size: 55px;
background-repeat: no-repeat;
}


        .info {
            z-index: 1;
            width: 15vw;
            height: 13vw;
            background-color: #fff;
            opacity: 0;
            position: absolute;
            left: 3%;
            top: 18.5%;
            padding: 10px;
            background: #82A3F2;
            font-family: anton;
            font-size: 20px;
            letter-spacing: 0px;
            line-height: 10px;
            color: white;
            text-shadow: -1px 0 red, 0 1px red,1px 0 red, 0 -1px red;
            overflow: auto;
        }

        .info:target {
            z-index: 100;
            opacity: 1;
            transition: 1s ease all;
        }

     ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background:;
    }

    ::-webkit-scrollbar-thumb {
    background-color:#f7e1ed;
    border:1px solid #c05c79;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }


    b {
        font-family: bangers;
        color: red;
        text-shadow: none;

    }

    i {
        font-family: bebas neue;
        color: blue;
        text-shadow: none;
        font-size: 23px;
    }


    m {
        line-height: 21px;
        font-size: 18px;
    }

    u {
        color: yellow;

    }

</style>


<div class="trick"></div>
<div class="mainbox">
<div class="img"></div>


<a class='one' href='#one'></a>
<a class='two' href='#two'></a>
<a class='three' href='#three'></a>
<a class='four' href='#four'></a>
<a class='five' href='#five'></a>

<div class="info" id="one">
<br><br>[Birth] <span style="float:right;"><b>Kal EL</b></span>
<br><br>Legal <span style="float:right;"><b>Clark Joseph Kent</b></span>
<br><br>Alias <span style="float:right;"><b>Superman, The man of steel. </b></span>
<br><br>Origin <span style="float:right;"><b>Krypton</b></span>
<br><br>Species <span style="float:right;"><b>Kryptonian</b></span>
<br><br>Gender <span style="float:right;"><b>Male</b></span>
<br><br>Height <span style="float:right;"><b>6'3</b></span>
<br><br>Weight <span style="float:right;"><b>235 lbs</b></span>
<br><br>[Eyes] <span style="float:right;"><b>Blue</b></span>
<br><br>Hair<span style="float:right;"><b>Black</b></span>
<br><br>Alignment <span style="float:right;"><b>Lawful Good</b></span>
<br><br>Occupation <span style="float:right;"><b>Reporter📰</b></span></br>
<br><br>Orientation <span style="float:right;"><b>Heterosexual</b></span>
<br><br>Marital Status <span style="float:right;"><b><a target="_blank" href="https://roleplay.chat/profile.php?user=Insanity">💕;;</a></b></span>
<br><br>Affiliation <span style="float:right;"><b>Justice League </b></span>
<br><br>[Residence] <span style="float:right;"><b>Earth</b></span>

</div>

<div class="info" id="two">
<m>Origin work, will come with story development.</m>
</div>

<div class="info" id="three">
<br></i> <m>▪Super Strength</m><br>
<br><m>▪Super Speed</m><br>
<br><m>▪Enhanced Leaping</m><br>
<br><m>▪Super Durability</m><br>
<br><m>▪Super Senses</m><br>
<br><m>▪Flight</m><br>
<br><m>▪Invulnerability</m><br>
<br><m>▪Vacuum Breath</m><br>
<br><m>▪Healing Factor</m><br>
<br><m>▪Memory Wipe Kiss</m></br>
</div>

<div class="info" id="four">
<center><a target="_blank" href="https://roleplay.chat/profile.php?user=Kon+El" title="add a blurb if you want.">
<img src="https://i.imgur.com/8XhJvyS.png" width="100" height="100"></a><m>
    <br>Boy of steel, just be yourself and the rest will come. Mistakes are a part of life, never quit, and don't ever forget what that S across your chest represents.</center></m>
    <br><center><a target="_blank" href="https://roleplay.chat/profile.php?user=dang" title="add a blurb if you want.">
<img src="https://i.imgur.com/bjsloJI.png" width="100" height="100"></a><m>
    <br>I wasn't sure what to make of you, and I am still not sure. I do know that you're a fighter, and you make Conner happy. He's family, and the house of EL is stronger together. You're a friend, and I value that friendship, please stay safe..</center></m>
    <br><center><a target="_blank" href="profile link here" title="add a blurb if you want.">
<img src="https://66.media.tumblr.com/23b8a0198a1bd6b3e380fd8510d6b4f3/tumblr_nw6u6aZ8te1uooypto2_250.png" width="100" height="100"></a><m>
    <br>description of friend.</center></m>
</div>

 <div class="info" id="five">
<m>
<br><m><b>Out Of Cape. ⬇</b></m><br>
<br> 01. <b> Not here for your </b> <u> problems. </u> <br>
<br> 02. <b> Respect is a two way street, </b> <u> Plain and simple. </u> <br>
<br> 03. <b> 10+ Years of </b> <u> writing experience. </u> <br>
<br> 04. <b> Outside contact, will NOT given, </b> <u> unless I say otherwise. </u> <br>
<br> 05. <b> Typist is incredibly </b> <u> PM Friendly. </u> <br>
<br> 06. <b> Not a perfect </b> <u> Superman, </u> <b> by any means. </u> <br>
</div>
</div>