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.
121 lines
1.6 KiB
121 lines
1.6 KiB
: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;
|
|
|
|
--page-width: 1000px;
|
|
|
|
--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;
|
|
font-family: 'Dual', sans-serif;
|
|
background-color: #232323;
|
|
}
|
|
|
|
h1, h2 {
|
|
font-family: 'Anurati', sans-serif;
|
|
letter-spacing: 0.5em;
|
|
}
|
|
|
|
footer {
|
|
opacity: 50%;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* animations */
|
|
.slide-in-right {
|
|
animation-name: slide-in-right;
|
|
animation-duration: 1s;
|
|
margin-right: 10vw;
|
|
margin-left: -10vw;
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
0% {
|
|
margin-right: 100vw;
|
|
}
|
|
100% {
|
|
margin-right: 10vw;
|
|
}
|
|
|
|
}
|
|
|
|
.slide-in-left {
|
|
animation-name: slide-in-left;
|
|
animation-duration: 1s;
|
|
margin-left: 0vw;
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
0% {
|
|
margin-left: 100vw;
|
|
}
|
|
100% {
|
|
margin-left: 0vw;
|
|
}
|
|
|
|
}
|
|
|
|
.slide-in-up {
|
|
animation-name: slide-in-up;
|
|
animation-duration: 1s;
|
|
margin-top: 0vh;
|
|
}
|
|
|
|
@keyframes slide-in-up {
|
|
0% {
|
|
margin-top: 100vh;
|
|
}
|
|
100% {
|
|
margin-top: 0vh;
|
|
}
|
|
}
|
|
|
|
.slide-in-down {
|
|
animation-name: slide-in-down;
|
|
animation-duration: 0.5s;
|
|
overflow-y: hidden;
|
|
margin-bottom: 0vh;
|
|
}
|
|
|
|
@keyframes slide-in-down {
|
|
0% {
|
|
margin-bottom: 100vh;
|
|
}
|
|
100% {
|
|
margin-bottom: 0vh;
|
|
}
|
|
} |