59 lines
1.3 KiB
CSS
59 lines
1.3 KiB
CSS
|
:root {
|
||
|
|
--background-color: #1e1e1e;
|
||
|
|
--background-image: "";
|
||
|
|
|
||
|
|
--card-blur: 10px;
|
||
|
|
--card-brightness: 50%;
|
||
|
|
--card-saturation: 50%;
|
||
|
|
--card-background: rgba(0, 0, 0, 0.15);
|
||
|
|
--card-border-radius: 1rem;
|
||
|
|
|
||
|
|
--shadow-offset-x: 0px;
|
||
|
|
--shadow-offset-y: 0px;
|
||
|
|
--shadow-blur-radius: 10px;
|
||
|
|
--shadow-spread-radius: 0px;
|
||
|
|
--shadow-color: rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100%;
|
||
|
|
background-image: var(--background-image);
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
main::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: var(--background-color);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
backdrop-filter: blur(var(--card-blur)) brightness(var(--card-brightness)) saturate(var(--card-saturation));
|
||
|
|
border-radius: var(--card-border-radius);
|
||
|
|
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
|
||
|
|
background-color: var(--card-background);
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
#header {
|
||
|
|
width: 100%;
|
||
|
|
height: 5rem;
|
||
|
|
margin: 3rem;
|
||
|
|
padding-inline: 1.5rem;
|
||
|
|
}
|