Untitled

@import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap');


body{
overflow:hidden;
background-image:url("https://i.pinimg.com/originals/5f/fa/d2/5ffad2de424197e7894a3bcc54ed5587.jpg");
background-repeat:repeat;
background-size:30%;
}

/*Main mugshot stuff*/

#main-image{
border:5px solid;
border-top:none;
border-bottom:none;
border-color:#3F58F9;
position:absolute;
margin:auto;
height:100%;
width:auto;
top:0;
right:55;
box-shadow:5px 5px 10px #000000;
}

#main-image2{
border:5px solid;
border-top:none;
border-bottom:none;
border-color:#3F58F9;
position:absolute;
margin:auto;
height:100%;
width:28.5vw;
top:0;
right:32;
z-index:-1;
}


/*mainboxes*/

.infobox{

width: 29.28vw;
height:50vh;
top:20;
left:70;
overflow-y:auto;
overflow-x:auto;
padding-top:60px;
padding-left:10px;
position: absolute;
border-style: solid;
border-width: 5px;
border-color:#3F58F9;
background-color: #E3E3E3;
background-repeat: no-repeat;
box-shadow:5px 5px 10px #000000;
}

#main-image3{
border:5px solid;
border-top:none;
border-bottom:none;
border-color:#3F58F9;
position:absolute;
margin:auto;
height:100%;
width:36vw;
top:0;
left:32;
z-index:-1;
}

/*Middle name and letter image*/

.bigtext {
position: absolute;
top: 0px;
left:44.5%;
font-family: 'Merienda One', cursive;

font-size: 8vw;
background: url('https://media4.giphy.com/media/3oEdvaxmd15YTHy6Uo/giphy.gif') no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-size:cover;
 background-position:center
 }

/*tab and tab gallery css*/

.mugshot, #nav-tabs label:first-of-type {
box-shadow:5px 5px 10px #000000;
}
#nav-tabs label:hover {
box-shadow:3px 3px 5px #000000;
}

#statusbox, #nav-tabs, .mugshot,
#nav-gallery, #sprite, #triforce {
position:fixed;
}

#nav-gallery {
z-index:4;
left:52%;
top:29%;
height:49%;
}
#nav-gallery label {
display:block;
position:relative;
height:18%;
padding:8%;
}
#nav-gallery label img {
height:100%;
}
.mugshot, #sprite, #nav-tabs label img {
transform:translateX(50%);
-o-transform:translateX(50%);
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
}
.mugshot {
height:30vh;
border:5px solid;
border-color:#3F58F9;
position:absolute;
margin:auto;
height:30vh;
width:auto;
bottom:10;
left:-101;
}
#nav-tabs {
z-index:4;
top:4%;
left:6%;
height:92%;
width:32%;
}
#nav-tabs label {
z-index:4;
display:block;
position:relative;
width:26%;
margin-bottom:10px;
text-align:center;
}
#nav-tabs label:first-of-type {
height:7.2vw;
width:7.2vw;
border-radius:0 50%;
}
#nav-tabs label:not(:first-of-type) {
overflow:hidden;
}
#nav-tabs label img {
position:absolute;
top:7.5%;
height:85%;
right:50%;
}

input {
display:none;
}
label {
cursor:pointer;
}
.mugshot {
z-index:2;
opacity:0;
}
#gdefault:checked ~ #pdefault,
#g1:checked ~ #p1,
#g2:checked ~ #p2,
#g3:checked ~ #p3,
#g4:checked ~ #p4,
#g5:checked ~ #p5,
#t1:checked ~ #tab1,
#t2:checked ~ #tab2,
#t3:checked ~ #tab3,
#t4:checked ~ #tab4 {
z-index:3;
opacity:1;
}
.infobox img {
max-width:100%;
}


</style>
</head>
<body>
<!--infobox and general positionings-->

<body>
<img src="https://bigmemes.funnyjunk.com/pictures/The_0c99e1_6206650.jpg" alt="" id="main-image">

<img src="https://image.freepik.com/free-vector/blue-metal-texture-background-vector-illustration_46250-109.jpg" alt="" id="main-image2">

<img src="https://image.freepik.com/free-vector/blue-metal-texture-background-vector-illustration_46250-109.jpg" alt="" id="main-image3">

<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="1052876d1fb5cd3f317e564c-|49" defer=""></script></body>
<!--end-->


<!--Big fancy title stuff-->
<body>
<div class="infobox" style="overflow:auto; ">

</div>

<div class="bigtext">Aqua</div>
</body>
<!--end-->

 <!--Tab/gallery stuff-->

<div id="nav-gallery">
<label for="g1"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
<label for="g2"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
<label for="g3"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
<label for="g4"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
<label for="g5"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
<label for="gdefault"><img src="https://pngimg.com/uploads/soap_bubbles/soap_bubbles_PNG37.png"/></label>
</div>


<input type="radio" name="gallery" id="g1"/>
<input type="radio" name="gallery" id="g2"/>
<input type="radio" name="gallery" id="g3"/>
<input type="radio" name="gallery" id="g4"/>
<input type="radio" name="gallery" id="g5"/>
<input type="radio" name="gallery" checked="checked" id="gdefault"/>


<img src="https://64.media.tumblr.com/f4b7d50b8a61bc2dacb93d6fa70b42a5/tumblr_olh8mjTiDT1u86t2qo1_400.gif" class="mugshot" id="pdefault" alt=""/>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a13a1f90-3359-4c52-86c6-79fc1dad5ff7/db8gbhi-1dc92bb2-d03f-4cd4-8cb4-5d2a41b24bf5.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYTEzYTFmOTAtMzM1OS00YzUyLTg2YzYtNzlmYzFkYWQ1ZmY3XC9kYjhnYmhpLTFkYzkyYmIyLWQwM2YtNGNkNC04Y2I0LTVkMmE0MWIyNGJmNS5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.2hT0o1Z7E3nI6iBkw1DrqdNJRNJwf-26LjwdNg2UxKM" class="mugshot" id="p1" alt=""/>
<img src="https://steamuserimages-a.akamaihd.net/ugc/80340382492171496/AE7A973DB45B2A985CC1C1D8CC6F20EB5AE6DF9C/" class="mugshot" id="p2" alt=""/>
<img src="https://media1.tenor.com/images/b4d817051d2490081d7f17a7e831c0ae/tenor.gif?itemid=16701793" class="mugshot" id="p3" alt=""/>
<img src="https://static.zerochan.net/Aqua.%28KonoSuba%29.full.2657843.gif" class="mugshot" id="p4" alt=""/>
<img src="https://i.imgur.com/xAseFpy.gif" class="mugshot" id="p5" alt=""/>
<!--end-->