124 lines
2.3 KiB
CSS
124 lines
2.3 KiB
CSS
/* #003f5c, #58508d, #bc5090, #ff6361, #ffa600 */
|
|
|
|
:root {
|
|
--color-background: #111111;
|
|
--color-content-back: #222222;
|
|
|
|
--col-a: #003f5c;
|
|
--col-b: #58508d;
|
|
--col-c: #bc5090;
|
|
--col-d: #ff6361;
|
|
--col-e: #ffa600;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
background-image: url(../bgs/stardust.png);
|
|
/* background-size: cover; */
|
|
color: #eeeeee;
|
|
font-family: monospace;
|
|
font-size: 24px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* transform: skew(1deg, 1deg); */
|
|
}
|
|
|
|
.section {
|
|
background-color: rgba( from var(--color-content-back) r g b / 0.5);
|
|
/*width: 70%;*/
|
|
/* opacity: 30%; */
|
|
padding: 16px;
|
|
margin: 16px;
|
|
border-radius: 16px;
|
|
backdrop-filter: blur(5px);
|
|
|
|
}
|
|
|
|
.container {
|
|
width: calc(max(70%, 900px));
|
|
justify-content: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg)
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg)
|
|
}
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
|
|
.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; */
|
|
|
|
c}
|
|
|
|
.intro-box {
|
|
display: flex;
|
|
}
|
|
|
|
.catboy-img {
|
|
width: 240px;
|
|
object-fit: contain;
|
|
/* align-self: flex-start; */
|
|
}
|
|
|
|
.project-txt {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.project-entry {
|
|
display:flex;
|
|
margin: 8px;
|
|
}
|
|
|
|
.project-img {
|
|
width: 240px;
|
|
margin: 8px;
|
|
border: 1px white;
|
|
border-radius: 4px;
|
|
filter: drop-shadow(0px 4px 0 var(--color-background));
|
|
}
|