166 lines
2.9 KiB
CSS
Executable file
166 lines
2.9 KiB
CSS
Executable file
:root {
|
|
--text: #f1d4cf;
|
|
--link-background: #00000030;
|
|
--link-background-hover: #c1b0ab0d;
|
|
|
|
--accent: #ce7961;
|
|
--accent-active: #e3beb3;
|
|
|
|
--background: #181a1b;
|
|
}
|
|
::selection {
|
|
background-color: var(--accent-active);
|
|
color: var(--background);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "lato";
|
|
src: url(asset-font-Lato-400.woff2);
|
|
}
|
|
@font-face {
|
|
font-family: "lato-bold";
|
|
src: url(asset-font-Lato-900.woff2);
|
|
}
|
|
@font-face {
|
|
font-family: "barcode";
|
|
src: url(asset-font-LibreBarcode.woff2);
|
|
}
|
|
@font-face {
|
|
font-family: "code";
|
|
src: url(asset-font-SourceCodePro.woff2);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
color: var(--text);
|
|
text-transform: uppercase;
|
|
font-size: 65px;
|
|
font-weight: normal;
|
|
margin: 50px 0 0 0;
|
|
opacity: 0.8;
|
|
|
|
font-family: "barcode";
|
|
}
|
|
h2,
|
|
input {
|
|
font-family: "code";
|
|
}
|
|
h2 {
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
margin: 0;
|
|
opacity: 0.4;
|
|
}
|
|
form {
|
|
margin: 80px auto;
|
|
width: 80%;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: var(--text);
|
|
|
|
padding: 0.3rem;
|
|
opacity: 0.5;
|
|
|
|
background-color: unset;
|
|
border-style: hidden;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: var(--accent);
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
border-bottom-color: var(--accent-active);
|
|
opacity: 1;
|
|
}
|
|
|
|
ul {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
max-width: clamp(200px, 700px, 95%);
|
|
margin: 10px auto;
|
|
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
font-family: "lato";
|
|
}
|
|
li {
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
width: calc(100% / 4);
|
|
text-align: center;
|
|
}
|
|
li:first-child,
|
|
li:last-child {
|
|
font-family: "lato-bold";
|
|
width: calc(100% / 12);
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
padding: 0 30px;
|
|
background-color: var(--accent);
|
|
|
|
text-transform: lowercase;
|
|
|
|
transition-duration: 100ms;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: line-through;
|
|
background-color: var(--link-background-hover);
|
|
animation: shake 2s linear alternate infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
|
|
color: #d6d6d645;
|
|
}
|
|
13% {
|
|
text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
|
|
color: #d6d6d6a5;
|
|
}
|
|
15% {
|
|
text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 1px -1px;
|
|
color: #d6d6d675;
|
|
}
|
|
38% {
|
|
text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
|
|
color: #d6d6d6f5;
|
|
}
|
|
50% {
|
|
text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 -1px 1px;
|
|
color: #d6d6d685;
|
|
}
|
|
63% {
|
|
text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
|
|
color: #d6d6d6a5;
|
|
}
|
|
75% {
|
|
text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 1px 0px;
|
|
color: #d6d6d6e5;
|
|
}
|
|
88% {
|
|
text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 -1px 1px;
|
|
color: #d6d6d665;
|
|
}
|
|
100% {
|
|
text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 0px 1px;
|
|
color: #d6d6d6d5;
|
|
}
|
|
}
|