48 lines
1.3 KiB
CSS
48 lines
1.3 KiB
CSS
|
@import url("https://rsms.me/inter/inter.css");
|
||
|
|
:root {
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
--font: "Inter", sans-serif;
|
||
|
|
font-family: var(--font);
|
||
|
|
font-feature-settings: "dlig" 0, "numr" 0, "dnom" 0, "tnum", "case" 0, "zero" 0, "frac", "sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01", "ss02" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0, "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "calt", "liga", "kern";
|
||
|
|
--c1: red;
|
||
|
|
--c2: white;
|
||
|
|
--c3: #202123;
|
||
|
|
background: var(--c2);
|
||
|
|
color: var(--c3);
|
||
|
|
--s: 80vmin;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: calc(var(--s) * .12);
|
||
|
|
margin: 1.4rem 0 -0.5rem 2rem;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.w {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin: 2rem;
|
||
|
|
width: var(--s);
|
||
|
|
}
|
||
|
|
|
||
|
|
.c {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
box-shadow: inset 0 0 0 1px var(--c2);
|
||
|
|
width: 50%;
|
||
|
|
height: calc(var(--s) * .5);
|
||
|
|
background: radial-gradient(var(--c1), var(--c1) 23.6%, var(--c2) 23.6%, var(--c2) 47%, var(--c3) 47%, var(--c3) calc(70.9% - 2px), var(--c2) calc(70.9% - 2px));
|
||
|
|
background-size: 200% 200%;
|
||
|
|
background-position: calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
transition: 2222ms background-position cubic-bezier(0.3, 0.7, 0, 1);
|
||
|
|
}
|
||
|
|
.c .c {
|
||
|
|
height: calc(var(--s) * .25);
|
||
|
|
}
|
||
|
|
.c .c .c {
|
||
|
|
height: calc(var(--s) * 0.125);
|
||
|
|
}
|