leeseo drr ac menu

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">

<style>
@font-face {
font-family: hugh is life;
src: url(https://dl.dropbox.com/s/bki6gilknxxouuk/HughIsLifePersonalUseItalic-K7axe.ttf);
}

.container {
position: relative;
width: 300px;
height: 200px;
margin: auto;
z-index: 999;
/* change the background image and the gradient */
background-image: linear-gradient(#ffffff50, #fff), url('https://cdn.discordapp.com/attachments/965819507794907138/980984588685963344/original.GIF');
background-position: center;
background-size: cover;
color: #fff;
overflow: hidden;
box-shadow: 0px 3px 7px #aaa, inset 13px 0px 6px -10px #fff, inset -13px 0px 6px -10px #fff, inset 0px 13px 6px -9px #ffffff, inset 0px -13px 6px -10px #fff;
border-radius: 10px;
-webkit-animation-name: zoomInDown; animation-name: zoomInDown; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }
}

h1 {
font-family: hugh is life;
color: #fff;
font-size: 4em;
text-align: left;
animation: glow 1.5s infinite;
}

@keyframes glow { 0% { text-shadow: 0px 0px 15px white; } 50% { text-shadow: 0px 0px 5px white; } 100% { text-shadow: 0px 0px 15px white; }
}

p {
font-family: kosugi;
color: #424242;
font-size: 0.9em;
text-align: right;
}

p2 {
font-family: kosugi;
color: #fff;
font-size: 0.6em;
text-align: right;
font-style: italic;
font-weight: 900;
}

mark {
color: #ffffff;
font-size: 1.2em;
background: transparent;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
}

a {
color: #ffffff;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
text-decoration: none;
}

.top-left {
position: absolute;
top: 0px;
left: 8px;
}

.top-right {
position: absolute;
top: 4px;
right: 8px;
}

.content {
position: absolute;
top: 60px;
/* change the opacity of the slide up */
opacity: .7;
width: 100%;
height: 70%;
/* change the background color of the slide up */
background-color: #fff;
padding-right: 10px;
padding-left: 10px;
/* make the shadow the same color as the background */
box-shadow: 0 0 30px 35px #fff;
-webkit-transform: translateY(80%);
transform: translateY(80%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: opacity 0.2s 0.3s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s 0.3s;
transition: transform 0.4s, opacity 0.2s 0.3s, -webkit-transform 0.4s;
overflow: scroll;
}

.slide-up:hover .content {
/* change the opacity of the slide up */
opacity: .8;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
transition: opacity 0.2s, -webkit-transform 0.4s;
transition: transform 0.4s, opacity 0.2s;
transition: transform 0.4s, opacity 0.2s, -webkit-transform 0.4s;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}
</style>

<div class='container slide-up'>
<!--- DON'T REMOVE --->
<div class="top-right">
<p2>cr aicoholdrink</p2></div>

<div class="top-left"><h1>Name</h1></div>

<div class='content'>
<p><mark>About</mark> info info info </p>
<br>
<p><mark>Byf</mark> info info info </p>
<br>
<p><mark>Dni</mark> info info info </p>
<br>
<p><mark>Kpop</mark> info info info </p>
</div>
</div>