Omega Code 2

@import url('https://fonts.googleapis.com/css2?family=Changa&family=Darker+Grotesque&family=Girassol&family=Karantina&display=swap');


    body { background: #000; overflow: hidden; cursor: url('http://78.media.tumblr.com/9128c332850895c353d9b660968f81cd/tumblr_inline_nrkbj9elVU1ry72eo_75sq.png'), default;}

    /*images you can change*/

/*don't touch this one aside from chaging the image */
    .img1 a{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 20vh; width: 10vw; background: url('https://i.ibb.co/DK6cg3H/image.png') no-repeat; background-size: cover; transition: all .55s ease-in-out; opacity: 1; }

/*image on first blanket* example of change: outline: solid 10px #hex here; */
    .img2 { position: absolute; bottom: 10vh; left: 5vw; height: 80vh; width: 55vw; background: url('https://i.ibb.co/yYc9Tq0/sece9AR.jpg') no-repeat; background-size: cover; filter: contrast(120%); outline: solid 10px #00000D;}

/*image on second blanket example of change: outline: solid 10px #hex here;*/
    .img3 { z-index: 1; position: absolute; bottom: 5vh; right: 3vw; height: 85vh; width: 60vw; background: url('https://i.imgur.com/holF878.png') no-repeat; background-size: cover; outline: solid 10px #1E202C; }

/*image on third blanket example of change: outline: solid 10px #hex here;*/
    .img4 { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 60vh; width: 40vw; background: url('https://i.imgur.com/oLHzaD8.png') no-repeat; background-size: cover; outline: solid 10px #5a3f37;}

    /*backgrounds that can be changed too (keep the opacities 0) example: either do background: #hex code here or background: linear-gradient(to right, #hex, #hex, #hex);*/

/*background on first blanket*/
    .background { pointer-events: none; position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: linear-gradient(to right, #00142E, #22374F, #2c5364); opacity: 0; transition: all .55s ease-in-out;}

/* background on second blanket*/
    .background2 { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: linear-gradient(45deg, #873218, #383139); transition: all .55s ease-in-out; opacity: 0; pointer-events: none; }

/*background on third blanket*/
    .background3 {pointer-events: none; position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background: linear-gradient(-45deg, #5a3f37, #2c7744); opacity: 0; transition: all .55s ease-in-out; }

    .text { position: absolute; top: 0vh; left: 0vw; height: 100vh; width: 100vw; background-image: url("https://www.transparenttextures.com/patterns/xv.png"); opacity: .5;}

    /*containers with the text in them background hex changes the background colors and font colors.*/

/*container on first blanket. examples of changes: background: #hex color: #hex*/
    .container { position: absolute; bottom: 12vh; left: 6vw; height: 30vh; width: 18vw; background: #00142E; outline: solid 5px #00000D; padding: 1vh; font-family: 'Darker Grotesque', sans-serif; font-size: 2vh; color: #fff8; text-transform: uppercase; text-align: justify; line-height: 1.8vh; overflow: auto;}

/*container on second blanket. examples of changes: background: #hex color: #hex*/
    .container2 { position: absolute; bottom: 3vh; left: 1vw; height: 30vh; width: 20vw; background: #1E202C; padding: 1vh; font-family: 'Darker Grotesque', sans-serif; font-size: 2vh; color: #fff; text-transform: uppercase; text-align: center; line-height: 1.8vh; overflow: auto;}

/*noble phatasm container. examples of changes: background: #hex color: #hex*/
    .container3 { position: absolute; bottom: 3vh; right: 1vh; height: 18vh; width: 25vw; background: #1E202C; padding: 1vh; font-family: 'Darker Grotesque', sans-serif; font-size: 2vh; color: #fff; text-transform: uppercase; text-align: center; line-height: 1.8vh; overflow: auto;}

/*ooc container. examples of changes: background: #hex color: #hex*/
    .container4 { position: absolute; bottom: 3vh; left: 2vw; height: 15vh; width: 20vw; padding: 1vh; background: #5a3f37; font-family: 'Darker Grotesque', sans-serif; font-size: 2vh; color: #fff; text-transform: uppercase; text-align: center; line-height: 1.8vh; overflow: auto;}


    /*titles i wouldn't suggest changing them, save for color hexes.*/

/*title on first blanket. for text shadow, just change the hex codes to whatever you want. it simulates an outline. and for fonts do: color: #hex code;*/
    .title { position: absolute; bottom: 40vh; left: 5vw; font-family: 'Girassol', cursive; color: #fff; font-size: 5vw; text-shadow: -1px -1px 0 #602D3C, 1px -1px 0 #602D3C, -1px 1px 0 #602D3C, 1px 1px 0 #602D3C; filter: drop-shadow(.3vh .3vh 0vh #000); font-style: italic;}

/*title on second blanket, for text shadow, just change the hex codes to whatever you want. it simulates an outline. and for fonts do: color: #hex code;*/
    .title2 { position: absolute; bottom: 30vh; left: 1vw; font-family: 'Girassol', cursive; color: #fff; font-size: 5vw; text-shadow: -1px -1px 0 #602D3C, 1px -1px 0 #602D3C, -1px 1px 0 #602D3C, 1px 1px 0 #602D3C; filter: drop-shadow(.3vh .3vh 0vh #000); font-style: italic;}

/*noble phantasm title. for text shadow, just change the hex codes to whatever you want. it simulates an outline. and for fonts do: color: #hex code;*/
    .title3 { position: absolute; bottom: 20vh; right: 1vw; font-family: 'Girassol', cursive; color: #fff; font-size: 4vw; text-shadow: -1px -1px 0 #602D3C, 1px -1px 0 #602D3C, -1px 1px 0 #602D3C, 1px 1px 0 #602D3C; filter: drop-shadow(.3vh .3vh 0vh #000); font-style: italic;}

/*ooc title, for text shadow, just change the hex codes to whatever you want. it simulates an outline. and for fonts do: color: #hex code;*/
    .title4 { position: absolute; bottom: 16vh; left: 1vw; font-family: 'Girassol', cursive; color: #fff; font-size: 4vw; text-shadow: -1px -1px 0 #602D3C, 1px -1px 0 #602D3C, -1px 1px 0 #602D3C, 1px 1px 0 #602D3C; filter: drop-shadow(.3vh .3vh 0vh #000); font-style: italic; pointer-events: none;}


    /*blanket clicks. DO NOT TOUCH THESE.*/

    .next { position: absolute; top: 43vh; left: 25vh; font-size: 3vw;}

    .finale { position: absolute; bottom: 19vh; left: 35vw; font-size: 3vw;}

    .exit { position: absolute; bottom: 20vh; left: 2vw; font-size: 3vw;}

    /*extras. the hexes can be changed. as can the fonts.*/

/*U is the stat one on the first blanket. change the color with color: #hex;*/
        U { text-decoration:none; text-transform: ; font-family: 'changa', sans-serif; color: #D3AC6E;   }

/*these are the stats on the NP blanket. change the background via background: #hex; and color with color: #hex;*/
    u2 { text-decoration:none; text-transform: ; font-family: 'changa', sans-serif; color: #fff; background: #D3AC6E; padding-top: .5vh; padding-left: .2vw;  padding-right: .2vw; line-height: 5vh;}

/*header 1, on the first blanket. change the background with background: #hex; and color with color: #hex;*/
    h1 {text-decoration: none; text-transform: uppercase; text-align: center; font-family: karantina; font-weight: 400; background-color: #22374F; color: #D3AC6E; padding-right: 0vw; padding-top: 1vh; padding-bottom: 1vh; padding-left: 1vw; font-size: 2vh; line-height: 2vh; letter-spacing: .3vw;  }

/*header 2, on the second blanket. change the background with background: #hex; and color with color: #hex;*/

    h2 { text-decoration: none; text-transform: uppercase; text-align: center; font-family: karantina; font-weight: 400; background-color: #D3AC6E; color: #fff; padding-right: 0vw; padding-top: 1vh; padding-bottom: 1vh; padding-left: 1vw; font-size: 2vh; line-height: 2vh; letter-spacing: .3vw; }

/*bold. change color: #hex;*/
    b { color: #D3AC6E;}

/*ignore this*/
    ::-webkit-scrollbar { display: none;}

/* italic. change color: #hex;*/
i { color: #BC5B66;}
    ::selection { background: transparent; color: transparent; text-shadow: 0px 0px 10px #D3AC6E;}

/* this affects a title which is hovers, and a target="_blank" href="" which are links. change the color via color: #hex; and text-shadow via text-shadow: 0px 0px 10px #hex;*/
    a { text-decoration: none; font-family: 'changa', sans-serif; color: #D3AC6E; transition: all .55s ease-in-out; } a:hover { color: #D3AC6E; text-shadow: 0px 0px 10px #D3AC6E; text-transform: uppercase; cursor: url('http://i.imgur.com/IepP2.jpg'), default;}

/*don't touch these*/
    ul, li {
 list-style: none; text-shadow: none;

 text-align: justify; font-size: 1.5vh; padding: 0vh;
 }

li:before {
 content:"🞜";  margin-right: 5px; font-size: 1.5vh;
 }

    /*blankets. DO NOT TOUCH THESE EITHER.*/

    #enter:target .img1 { opacity: 0; pointer-events: none; transition: all .55s ease-in-out;} #enter:target .background { opacity: 1; pointer-events: all;}
    #next:target .background { opacity: 0; pointer-events: none;} #next:target .background2 { opacity: 1; pointer-events: all;}
    #fin:target .background2 { pointer-events: none; opacity: 0;} #fin:target .background3 { opacity: 1; pointer-events: all;}
    #exit:target .background3 {opacity: 0; pointer-events: none;}

</style>
<div id="enter">
<div id="next">
<div id="fin">
<div id="exit">
<div class="img1"><a href="#enter"></a></div>
<div class="background"><div class="text"></div><div class="img2"></div>
<div class="container"><h1>header here</h1><u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <u>stat</u> answer. <h1>header here</h1> delete the headers if you want, or keep them. put the info you want here, box scrolls</div>
<div class="title">title here</div>
<div class="next"><a href="#next">next.</a></div></div>
<div class="background2"><div class="img3"><div class="container2"><h2>header here</h2> <br><center><u2>stat</u2> answer <u2>stat</u2> answer <u2>stat</u2> answer <u2>stat</u2> answer <u2>stat</u2> answer <u2>stat</u2> answer</center>
<h2>header here</h2>
<ul><li><a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> <a title="skill stuff here">skill name</a> </li></ul></div>
<div class="title2">title here</div>
<div class="container3"><h2>header here</h2>
<ul><li><b>np here:</b> 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.
</li>
<li><b>np here</b> 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.</li>
<li><b>np here</b> 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.</li></ul></div>
<div class="title3">title here</div>
    <div class="finale"><a href="#fin">next.</a></div></div></div>
<div class="background3"><div class="img4">
<div class="container4"><ul><li>code made for <i>alt name</i> by <a target="_blank" href="">scoob</a> for their use only. if interested in your own code, dm or mail them.</li>
<li><i>italics</i> <b>bold</b> <u>underline 1</u> <u2>underline 2</u2> <a target="_blank" href="">link</a></li><li>ooc bullet</li></ul></div>
<div class="title4">title here</div>
<div class="exit"><a href="#exit">exit.</a></div></div></div></div>