instant-image-host
Version:
instant image host
155 lines (133 loc) • 2.45 kB
CSS
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400&display=swap');
a {
text-decoration: none;
color: white;
}
.title-container {
text-align: center;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-weight: 300;
font-size: 64px;
margin: 0px;
}
h2 {
font-weight: 300;
font-size: 40px;
margin-top: 8px;
}
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
background: #202020;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
margin-left: 16px;
font-size: 20px;
line-height: 50px;
user-select: none;
margin-bottom: 8px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
#div1 {
z-index: 9;
}
canvas {
z-index: 10;
}
.animegirl {
position: fixed ;
bottom: 0 ;
left: 0 ;
margin-bottom: 0px ;
margin-left: 0px ;
width: 181px ;
height: 256px ;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url('https://SITE_URL/ico/background.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #000000;
background-size: 100% 100%;
color: rgb(255, 255, 255);
}
textarea {
background-color: #444444;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
align-content: center;
}
#particles-js {
height: 100%;
}