/* Fonts */

:root {
    --primary-font: 'Inter';
    --primary-font-generic: serif;
    --secondary-font: 'Lexend';
    --secondary-font-generic: serif;
}

/* Styles */


* {
    font-family: var(--primary-font), serif;
    line-height: normal;
}

body {
    color: var(--on-background);
}

h1 {
    font-weight: 300;
    font-size: clamp(24px, 3vw, 32px);
    font-family: var(--secondary-font), serif;
    line-height: normal;
}

h2 {
    font-weight: 300;
    font-size: clamp(20px, 3vw, 24px);
    font-family: var(--secondary-font), serif;
    line-height: normal;
}

h3 {
    font-weight: 500;
    font-size: clamp(20px, 3vw, 24px);
    font-family: var(--secondary-font), serif;
    line-height: normal;
}

h4 {
    font-weight: 500;
    font-size: clamp(14px, 3vw, 16px);
    font-family: var(--secondary-font), serif;
    line-height: normal;
}

h5 {
    font-weight: 300;
    font-size: clamp(16px, 3vw, 18px);
}

p {
    color: var(--on-background);
    font-weight: 300;
    font-size: clamp(14px, 3vw, 16px);
    line-height: normal;
}

span {
    color: var(--on-background);
    font-weight: 300;
    font-size: clamp(18px, 3vw, 20px);
    line-height: normal;
}

.ellipsis-1 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ellipsis-2 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ellipsis-3 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ellipsis-4 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.ellipsis-5 {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* number of lines to show */
    line-clamp: 5;
    -webkit-box-orient: vertical;
}


.paragraph {
    max-width: 400px !important;
}

label {
    font-weight: 300;
    font-size: clamp(16px, 3vw, 18px) !important;
    pointer-events: none;
}

a {
    font-weight: 400;
    font-size: clamp(16px, 3vw, 18px);
    text-decoration: none !important;
    cursor: pointer;
}

a:hover {
    font-weight: 600 !important;
}


/* Utility */

.text-nowrap {
    white-space: nowrap
}

.text-wrap {
    white-space: wrap;
}

.uppercase {
    text-transform: uppercase;
}

.align-text-start {
    text-align: start;
}

.align-text-end {
    text-align: end;
}

.align-text-center {
    text-align: center;
}

.strikethrough  {
    text-decoration: line-through;
}

/* Utility */

.text-gradient-main {
    background: linear-gradient(to right, #4C767F, #6A558C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}