Untitled

<html>
<head>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Raleway&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Ozias Vartuul</title>
<style>
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
	overflow:hidden;
}
#bgchar {
    height: 100%;
    width: 100%;
    position: absolute;
	right:0%;
    background-image: url('https://i.gyazo.com/ce216e7d8653d21c8379eff9c9e546a8.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    z-index: 2;
	transition:4s;
	opacity:0;
}
#bgchar.right {
	right:-2%;
}
#bgchar2 {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    background-image: url('https://cdn.discordapp.com/attachments/874692930617638962/917112299234398280/left.png');
    background-repeat: repeat-y;
    background-position: top left;
	background-size:contain;
    z-index: 3;
	transition:4s;
	opacity:0;
}
#bgchar2.right {
    left:0;
}
#bgchar3 {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    right:0;
    background-image: url('https://cdn.discordapp.com/attachments/874692930617638962/917112299800633374/right.png');
    background-repeat: repeat-y;
    background-position: top right;
	background-size:20px;
    z-index: 3;
	transition:4s;
	opacity:0;
}
#bgchar3.right {
    right:0;
}
#rightdesc {
	display:table;
	table-layout: fixed;
    color: #D9AF0B;
    position: absolute;
    width: 30%;
    height: 100%;
    left: 20%;
    box-sizing: border-box;
    z-index: 4;
	transition:4s;
	opacity:0;
}
.content {
	display:table-cell;
    vertical-align: middle;
    position: relative;
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    z-index: 5;
    text-align: center;
}
.name {
    width: 100%;
    height: 10%;
    max-height: 205px;
    background: url('https://i.gyazo.com/18ba77bbb79d55f6ea6e5f468a9e839c.png') no-repeat;
    background-size: contain;
    background-position: center;
}
.quote{
	display:inline-block;
	font-family: 'Caveat', cursive;
	font-size:16px;
	color:#858585;
	width:100%;
	margin:10px;
}
#desc2{
	height:20%;
	max-height:350px;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	box-sizing: border-box;
	margin:10px 10px;
	padding:0px 10px;
	text-align:justify;
	overflow-y:scroll;
	scrollbar-face-color: #493b3a;
	scrollbar-track-color: #c9cace;
	scrollbar-arrow-color: #493b3a;
	scrollbar-shadow-color: #c9cace;
	transition:2s;
}
#desc2.show{
	height:35%;
}
.descimg{
	max-width:558px;
	}
	.start{
		opacity:1;
	}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="bgwhite"></div>
<div id="bgchar"></div>
<div id="bgchar2"></div>
<div id="bgchar3"></div>
<div id="rightdesc">
 	<div class="content">
    	<div class="name"></div><br>
		<img class="descimg" src="https://cdn.discordapp.com/attachments/874692930617638962/917112300022923346/top.png" width="100%">
		<div id="desc2">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat sagittis laoreet. Ut consectetur lorem ut nunc varius euismod. Nam in leo eget libero suscipit rutrum vel a mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec mattis mollis lorem eget rutrum. Donec lorem ligula, eleifend ac neque quis, tincidunt commodo leo. Nullam et tellus est. Mauris tempor augue ac est euismod gravida. Phasellus viverra lectus ac risus finibus pretium. Aenean pretium sagittis sem et iaculis.<br>
            <br>
            Sed dui elit, venenatis et placerat non, dapibus in metus. Mauris gravida magna quis nunc rutrum vestibulum. Integer sed semper purus. Praesent venenatis scelerisque leo, non faucibus tortor molestie a. Aliquam convallis sed dolor eu vulputate. Praesent ultricies magna eu risus suscipit pharetra. Integer ac tempus neque. Integer viverra blandit tristique. Pellentesque vel massa ac dui feugiat rutrum. Nam finibus enim in tincidunt volutpat. Aenean laoreet gravida vestibulum. Nunc id velit consequat, gravida mauris eu, mattis velit. Aliquam laoreet lacus facilisis quam posuere, vel bibendum lacus euismod.<br>
            <br>
            Curabitur sollicitudin libero vel turpis pharetra luctus. Phasellus sagittis sit amet nulla ac fermentum. Nullam sem sem, pharetra vitae ultrices et, fringilla vel nisi. Pellentesque sit amet nunc at dui luctus tempus tincidunt in tortor. Nam vestibulum dapibus dolor quis porta. Praesent in orci quis massa tristique mattis. Nullam vulputate tempus nisi vitae auctor. Nulla facilisi. Suspendisse sed luctus quam. Nullam mattis orci sit amet mattis consectetur.
		</div>
		<img class="descimg" src="https://cdn.discordapp.com/attachments/874692930617638962/917112299003732008/bottom.png" width="100%">
	</div>
</div>
<embed src="https://dl.dropboxusercontent.com/s/k9pnb26fek4lqvp/Demon%20Slayer%20Yuukaku%20Hen%20%5BAMV%5D%20%20Lil%20Nas%20X%2C%20Kate%20Perry%20-%20Industry%20Baby%20vs%20E.T..mp3?dl=0" width="1" height="1" autostart="true" loop="true" style="opacity:0;"></embed>
</body>
<script>

$(document).ready(function(){
    $('#rightdesc').on('mouseover',function(){
        $('#rightdesc').addClass("show");
        $('#bgchar').addClass("right");
        $('#bgchar2').addClass("right");
        $('#bgchar3').addClass("right");
        $('#bgwhite').addClass("right");
        $('#desc2').addClass("show");
    });
    $('#rightdesc').on('mouseout',function(){
        $('#rightdesc').removeClass("show");
        $('#bgchar').removeClass("right");
        $('#bgchar2').removeClass("right");
        $('#bgchar3').removeClass("right");
        $('#bgwhite').removeClass("right");
        $('#desc2').removeClass("show");
    });
});
var myAudio = document.getElementById("audio");

function musicStart() {
	setTimeout(function(){document.getElementById('bgchar').style.opacity="1";},2000);
	setTimeout(function(){document.getElementById('bgchar2').style.opacity="1";},2000);
	setTimeout(function(){document.getElementById('bgchar3').style.opacity="1";},2000);
	setTimeout(function(){document.getElementById('rightdesc').style.opacity="1";},2000);
	$('#audio').prop("volume", 0);
	myAudio.play();
	$('#audio').animate({volume: 0.4}, 6000);
}

window.onload = musicStart;
</script>
</html>