You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
2.3 KiB

3 years ago
:root {
--padding-sm: 5px;
--padding: 10px;
--padding-lg: 20px;
--padding-xl: 50px;
--font-xl: 5em;
--font-lg: 1.5em;
--font: 1em;
--font-sm: 0.8em;
3 years ago
--page-width: 1200px;
3 years ago
--transition-speed: 0.3s;
}
@font-face {
font-family: 'Dual';
src: url('/fonts/Dual-300.otf');
src: url('/fonts/Dual-300.ttf') format('truetype');
}
@font-face {
font-family: 'Anurati';
src: url('/fonts/Anurati-Regular.otf');
}
html,
body {
padding: 0;
margin: 0;
3 years ago
font-family: 'Dual', sans-serif;
background-color: #232323;
3 years ago
overflow: hidden;
color: white;
3 years ago
}
h1, h2 {
font-family: 'Anurati', sans-serif;
letter-spacing: 0.5em;
}
footer {
opacity: 50%;
}
3 years ago
footer a:hover {
text-decoration: underline;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
3 years ago
3 years ago
img {
max-width: 100%;
}
/* help classes */
.text-center {
text-align: center;
}
.badge {
display: inline-block;
background-color: rgba(35,35,35,0.5);
padding: var(--padding-sm) var(--padding);
margin: 0 var(--padding-sm);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
.badge span {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
display: inline-block;
}
3 years ago
/* animations */
.slide-in-right {
animation-name: slide-in-right;
animation-duration: 1s;
margin-right: 10vw;
3 years ago
animation-timing-function: ease-in-out;
3 years ago
}
@keyframes slide-in-right {
0% {
3 years ago
margin-right: 150vw;
3 years ago
}
100% {
margin-right: 10vw;
}
}
.slide-in-left {
animation-name: slide-in-left;
3 years ago
animation-duration: 1.2s;
3 years ago
margin-left: 0vw;
3 years ago
animation-timing-function: ease-in-out;
3 years ago
}
@keyframes slide-in-left {
0% {
3 years ago
margin-left: 100vw;
}
25% {
3 years ago
margin-left: 100vw;
}
100% {
margin-left: 0vw;
}
}
.slide-in-up {
animation-name: slide-in-up;
3 years ago
animation-duration: 1.4s;
3 years ago
margin-top: 0vh;
3 years ago
animation-timing-function: ease-in-out;
3 years ago
}
@keyframes slide-in-up {
0% {
3 years ago
margin-top: 100vh;
}
25% {
3 years ago
margin-top: 100vh;
}
100% {
margin-top: 0vh;
}
}
.slide-in-down {
animation-name: slide-in-down;
3 years ago
animation-duration: 0.4s;
3 years ago
overflow-y: hidden;
3 years ago
top: 0vh;
animation-timing-function: ease-in-out;
3 years ago
}
@keyframes slide-in-down {
0% {
3 years ago
top: 100vh;
3 years ago
}
100% {
3 years ago
top: 0vh;
3 years ago
}
}