billlie uwu ai codes (#2) cr crditem (pro-standard)

---MARQUEE---
<marquee behavior="scroll" direction="left">Dress up Kuromi~! ♡</marquee>

---MAIN CODE---
<style>
#cont {
width: 22em;
left: 17%;
position: relative;
height: 300px;
padding: 10px;
background: white;
overflow: hidden;
border: 1px solid #000;
box-shadow: #ffcee3 0 0 0.425em 0.25em, #ffcee3 0 0 0.375em inset;
border-radius: 8px;
}

.grid {
display: grid;
grid-template-columns: auto auto auto;
height: 42%;
margin-top: 13%;
position: relative;
z-index: 1;
animation-name: movy;
animation-duration: 4s;
}

.grid2 {
font-family: 'Magica';
display: grid;
grid-template-columns: auto;
padding: 5px;
height: 7%;
z-index: 98;
margin-top: 15%;
position: relative;

}
.grid3 {
font-family: 'Magica';
display: grid;
grid-template-columns: auto;
padding: 5px;
z-index: 98;
height: 7%;
overflow: hidden;
margin-top: 0%;
position: relative;
font-size: 12px;

}

.grid-item {

}

.dish {
height: 110px;
width: auto;
-webkit-filter: drop-shadow(0px 0px 2px #000000);
}

@keyframes movy {
from {right: -110%;}
to {right: 0%;}
}

.contt {
animation-name: cont;
border: 2px solid black;
position: absolute;
z-index: 12;
font-family: 'Magica';
font-size: 14px;
background: white;
opacity: 0;
bottom: 40px;
margin-left: 8px;
border-radius: 12px;
height: 10px;
width: 10px;
overflow: scroll;
transition: 2s ease;
transition-delay: 1s;
}

#cont:hover .contt {
width: 29%;
opacity: 0.8;
bottom: 10px;
height: 140px;
overflow: scroll;
padding: 5px;
}

@font-face {
font-family: berkshire;
src:url(https://dl.dropbox.com/s/49tg0oklrpc2u71/BerkshireSwash-Regular.ttf?);

}

html {
height: 100vh;
width: 100vw;
font-size: 16px;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

#cafe {
font-style: italic;
color: white;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, 0 0;
font-family: berkshire;
border: 1px solid black;
width: 95%;
background: -webkit-radial-gradient(#fff 20%, #fff 30%, #b6abd2 60%);
text-align: center;
font-size: 2.9em;
position: absolute;
left: 10px;
font-weight: bold;
line-height: 0.7;
border-radius: 50%;
}

@font-face {
font-family: 'Magica';
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}

@font-face {
font-family: deliosa;
src: url(https://dl.dropbox.com/s/0nibma32cot2l0x/Deliosa.ttf);
}

@font-face {
font-family: lovely script;
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}

a:link {
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #ffcee3 ;
text-decoration: underline;
}
</style>

<div id="cont">

<div id="cafe"> <span style=" opacity: 0.8;">Girl's<span style="font-size:0.5em;bottom: 5px;position:relative;color:#FECFE3;opacity:1;">go</span>Games</span></div>

<div class="grid2"><center>select a piece of clothing for more info!</center>
</div>

<div class="grid">
<div class="grid-item">
<div class="contt"> <span style="padding-left:5px;padding-right:5px;border-radius:50%; background:#FECFE3;border:1px solid black;padding-top: 1px; padding-bottom:2px;">1</span> <strong>ABOUT</strong>
<br></br>

hai im <strong>name</strong> or <strong>name!</strong> text goes here info info info info info

<br></br>

find me! <a href="actual link">link name</a> <a href="actual link">link name</a> <a href="actual link">link name</a> <a href="actual link">link name</a>

</div>
<img class=dish src="IMG LINK HERE">
</div>
<div class="grid-item">
<div class="contt"> <span style="padding-left:5px;padding-right:5px;border-radius:50%; background:#b6abd2;border:1px solid black;padding-top: 1px; padding-bottom:2px;">2</span> <strong>RULES</strong>

<br></br>

byf text goes here info info info info info text goes here info info info info info

<br></br>

dni text goes here info info info info info text goes here info info info info info

</div>
<img class=dish src="IMG LINK HERE">
</div>
<div class="grid-item">
<div class="contt"> <span style="padding-left:5px;padding-right:5px;border-radius:50%; background:#FECFE3;border:1px solid black;padding-top: 1px; padding-bottom:2px;">3</span> <strong>LIKES</strong>
<br></br>

kpop text goes here info info info info info text goes here info info info info info

<br></br>

<strong><u>my other interests</u></strong> text goes here info info info info info text goes here info info info info info

</div>
<img class=dish src="IMG LINK HERE">
</div>
</div>

<div class="grid3"><center>Copyright © 2024 crditem, All rights reserved.</center>
</div>

<script>
document.addEventListener('keydown', function() {
if (event.keyCode == 123) {
alert("mwahahaha");
return false;
} else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
alert("mwahahaha");
return false;
} else if (event.ctrlKey && event.keyCode == 85) {
alert("mwahahaha");
return false;
}
}, false);

if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
alert("mwahahaha");
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
alert("mwahahaha");
window.event.returnValue = false;
});
}
</script>
</style>