107 lines
1.9 KiB
CSS
Executable File
107 lines
1.9 KiB
CSS
Executable File
@import url("/css/themes.css");
|
|
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
|
|
:root {
|
|
--text-color: #fff;
|
|
--bg-1: #5a189a;
|
|
--bg-2: #10002b;
|
|
--color-1: #E0AAFF;
|
|
--color-2: #7B2CBF;
|
|
--color-3: #3C096C;
|
|
--color-4: #240046;
|
|
}
|
|
html,
|
|
body {
|
|
/* height: 100vh; */
|
|
width: 100vw;
|
|
color: var(--text-color);
|
|
background-color: black;
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
font-family: "Mulish", serif;
|
|
}
|
|
body {
|
|
animation: 1s ease-out loadIn;
|
|
user-select: none;
|
|
}
|
|
@keyframes loadIn {
|
|
from {opacity: 0;transform: translateY(-32px);}
|
|
to {opacity: 1;transform: translateY(0px);}
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
filter: drop-shadow(0px 0px 4px #ffffff99);
|
|
}
|
|
|
|
.samerow {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.samerow img {
|
|
width: 80px;
|
|
aspect-ratio: 1 / 1;
|
|
padding: 5px;
|
|
margin: 10px;
|
|
user-select: none;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 48px;
|
|
margin: 10px;
|
|
}
|
|
h2 {
|
|
font-size: 32px;
|
|
margin: 8px;
|
|
}
|
|
h3 {
|
|
font-size: 24px;
|
|
margin: 4px;
|
|
}
|
|
p {
|
|
font-size: 16px;
|
|
margin: 2px;
|
|
}
|
|
a {
|
|
color: var(--text-color);
|
|
}
|
|
img {
|
|
image-rendering: pixelated;
|
|
}
|
|
select,
|
|
::picker(select) {
|
|
appearance: base-select;
|
|
}
|
|
select {
|
|
padding: 8px;
|
|
background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%);
|
|
transition-duration: 0.25s;
|
|
}
|
|
select:hover,
|
|
select:focus {
|
|
background: color-mix(in srgb, var(--color-3) 60%, #00000000 40%);
|
|
}
|
|
::picker(select) {
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
option {
|
|
display: flex;
|
|
background: color-mix(in srgb, var(--color-3) 30%, var(--color-4) 60%);
|
|
padding: 2px;
|
|
transition: 0.25s;
|
|
color: var(--text-color)
|
|
}
|
|
option:hover {
|
|
background: color-mix(in srgb, var(--color-2) 40%, var(--color-4) 50%);
|
|
}
|
|
option:focus {
|
|
background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
|
|
} |