102 lines
1.8 KiB
CSS
102 lines
1.8 KiB
CSS
:root {
|
|
--background: #3b2a55;
|
|
--background2: #140f18;
|
|
--background3: #3b2e40;
|
|
|
|
--foreground: #937da2;
|
|
|
|
--accent: #7441a0;
|
|
}
|
|
|
|
/* CSS OVERRIDES ------------------------------------------ */
|
|
|
|
html {
|
|
background-image: url(assets/pattern.png);
|
|
animation: scrolling 30s linear 1;
|
|
animation-direction: forward;
|
|
animation-iteration-count: infinite;
|
|
background-color: var(--background) ;
|
|
}
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
font-family: sans-serif;
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 5px;
|
|
}
|
|
|
|
/* LAYOUT ------------------------------------------ */
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.box {
|
|
background-color: var(--background2);
|
|
border-radius: 24px;
|
|
padding: 10px;
|
|
margin: 15px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
}
|
|
/* CONTAINERS ------------------------------------------ */
|
|
|
|
.c-main {
|
|
width: 40%;
|
|
padding: 5px;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
/* ELEMENTS ------------------------------------------ */
|
|
|
|
.c-element {
|
|
margin: 20px;
|
|
}
|
|
|
|
.e-profile {
|
|
max-width: 30%;
|
|
padding: 12px;
|
|
margin: 10px;
|
|
border: 2px dashed var(--background3);
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.e-profile_icon {
|
|
width: 28px;
|
|
filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
|
|
margin: 3px;
|
|
}
|
|
|
|
.e-icon {
|
|
width: 28px;
|
|
filter: invert(25%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
|
|
margin: 3px;
|
|
}
|
|
|
|
.e-profile_icon:hover {
|
|
filter: invert(50%) sepia(7%) saturate(2521%) hue-rotate(239deg) brightness(97%) contrast(86%);
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
|
|
@-webkit-keyframes scrolling {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
to {
|
|
background-position: -300px 300px;
|
|
}
|
|
}
|