nekojimi.moe/static/css/style.css

95 lines
1.8 KiB
CSS
Raw Normal View History

2024-10-24 17:26:15 +01:00
/* #003f5c, #58508d, #bc5090, #ff6361, #ffa600 */
:root {
--color-background: #111111;
--color-content-back: #222222;
2024-10-24 17:26:15 +01:00
--col-a: #003f5c;
--col-b: #58508d;
--col-c: #bc5090;
--col-d: #ff6361;
--col-e: #ffa600;
}
body {
background-color: var(--color-background);
2024-10-24 21:33:09 +01:00
background-image: url(../bgs/stardust.png);
/* background-size: cover; */
2024-10-24 17:26:15 +01:00
color: #eeeeee;
font-family: monospace;
font-size: 24px;
display: flex;
justify-content: center;
/* transform: skew(1deg, 1deg); */
}
2024-10-25 16:28:41 +01:00
.section {
background-color: rgba( from var(--color-content-back) r g b / 0.5);
2024-10-24 17:26:15 +01:00
/*width: 70%;*/
2024-10-24 21:33:09 +01:00
/* opacity: 30%; */
2024-10-24 17:26:15 +01:00
padding: 16px;
2024-10-25 16:28:41 +01:00
margin: 16px;
2024-10-24 17:26:15 +01:00
border-radius: 16px;
2024-10-24 21:33:09 +01:00
backdrop-filter: blur(5px);
2024-10-24 17:26:15 +01:00
}
.container {
width:70%;
justify-content: center;
display: flex;
flex-direction: column;
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
2024-10-25 16:28:41 +01:00
h1, h2, h3, h4, h5, h6 {
color: transparent;
background-clip: text;
filter: drop-shadow(0 2px 0 var(--color-background));
margin-block: 16px;
}
h1 {
background-image: linear-gradient(to bottom right, var(--col-a), var(--col-b));
}
h2 {
background-image: linear-gradient(to bottom right, var(--col-b), var(--col-c));
}
2024-10-24 17:26:15 +01:00
.la {
color: var(--col-b);
text-shadow: 0 0 8px var(--col-b);
}
.lb {
color: var(--col-c);
text-shadow: 0 0 8px var(--col-c);
}
.lc {
color: var(--col-d);
text-shadow: 0 0 8px var(--col-d);
}
.ld {
color: var(--col-e);
text-shadow: 0 0 8px var(--col-e);
}
.title {
text-align: center;
/* background: linear-gradient(to right, #ff00ff, #ff0000); */
/* background-clip: text; */
/* -webkit-text-fill-color: transparent; */
/* text-shadow: 0 0 8px #787878; */
/* animation: spin 2000ms linear infinite; */
/* animation: 5s linear 0s infinite normal none running spin; */
}