182 lines
No EOL
3.2 KiB
Text
182 lines
No EOL
3.2 KiB
Text
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
background: var(--color-background);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 800;
|
|
font-size: var(--2-rem);
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 600;
|
|
font-size: var(--1-4-rem);
|
|
}
|
|
|
|
:root {
|
|
--color-title: #071952;
|
|
--color-subtitle: #0C356A;
|
|
--color-special: #0174BE;
|
|
--color-text: #261C2C;
|
|
--color-subtext: #413543;
|
|
--color-hiddentext: #AA94AD;
|
|
--color-background: #F8F1F1;
|
|
--color-code: #ECE6F1;
|
|
--color-pill: #D0D4CA;
|
|
|
|
--palette-pink: #ad62aa;
|
|
--palette-red: #9A031E;
|
|
--palette-orange: #FF5B22;
|
|
--palette-yellow: #ff9843;
|
|
--palette-green: #0d9276;
|
|
--palette-purple: #4B1E78;
|
|
--palette-brown: #3c2317;
|
|
|
|
--background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(15, 11, 17, 0.1) 100%);
|
|
--background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
|
|
|
|
--z-index-last: -1;
|
|
--z-index-normal: 0;
|
|
--z-index-front: 1;
|
|
--z-index-navbar: 2;
|
|
--z-index-popup: 3;
|
|
|
|
--border-min: 0.5rem;
|
|
--border-max: 2rem;
|
|
--profile-content-width-max: 40rem;
|
|
--profile-content-width-min: 36rem;
|
|
|
|
--width-min-desktop: 1275px;
|
|
--width-mobile: 875px;
|
|
/* https://clamp.font-size.app/
|
|
min=875px max=1100px */
|
|
--1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem);
|
|
--1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem);
|
|
--1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem);
|
|
--2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem);
|
|
|
|
--navbar-height: 6rem;
|
|
}
|
|
|
|
.base {
|
|
z-index: var(--z-index-front);
|
|
position: relative;
|
|
}
|
|
|
|
.title {
|
|
color: var(--color-background);
|
|
font-family: Gabarito;
|
|
font-weight: 700;
|
|
cursor: default;
|
|
transition: var(--transition);
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-start {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.flex-end {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: #41354340 0px 8px 18px -1px;
|
|
}
|
|
|
|
.h-100 {
|
|
height: 100%;
|
|
}
|
|
|
|
.h-70 {
|
|
height: 60%;
|
|
}
|
|
|
|
.h-fit {
|
|
height: fit-content;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.margin-padding-0 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.margin-bottom {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.margin-horizontal-05 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.margin-left-3 {
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
.margin-right-2 {
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.margin-05 {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.padding-left-3 {
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.inherit-w-h {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
|
|
.disabled {
|
|
display: none !important;
|
|
} |