/* PlayfairDisplay */
@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-Italic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-Medium';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-MediumItalic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-MediumItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-SemiBold';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-SemiBoldItalic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-Bold';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-BoldItalic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-ExtraBold';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-ExtraBoldItalic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-ExtraBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-Black';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'PlayfairDisplay-BlackItalic';
    src: url('../assets/fonts/PlayfairDisplay/PlayfairDisplay-BlackItalic.ttf') format('truetype');
}

/* Parkinsans */
@font-face {
    font-family: 'Parkinsans-Light';
    src: url('../assets/fonts/Parkinsans/Parkinsans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Parkinsans';
    src: url('../assets/fonts/Parkinsans/Parkinsans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Parkinsans-Medium';
    src: url('../assets/fonts/Parkinsans/Parkinsans-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Parkinsans-SemiBold';
    src: url('../assets/fonts/Parkinsans/Parkinsans-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Parkinsans-Bold';
    src: url('../assets/fonts/Parkinsans/Parkinsans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Parkinsans-ExtraBold';
    src: url('../assets/fonts/Parkinsans/Parkinsans-ExtraBold.ttf') format('truetype');
}

/* Satoshi */
@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-LightItalic.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Italic.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-MediumItalic.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-BoldItalic.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Satoshi';
    src: url('../assets/fonts/Satoshi/Satoshi-BlackItalic.otf') format('opentype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    --pure-black: #0F0F0F;
    --primary-background-color: #0E0E0E;
    --secondary-background-color: #;

    --lavender-purple: #C7CBFF;
    --maximum-blue-purple: #b3b7e6;
    --violet-blue: #3943B7;

    /* Gaps */
    --gap-small: 4px;
    --gap-medium: 8px;
    --gap-large: 12px;
    --gap-xlarge: 16px;
    --gap-xxlarge: 20px;

    /* Padding */
    --padding-xsmall: 4px;
    --padding-small: 8px;
    --padding-medium: 16px;
    --padding-large: 24px;
    --padding-xlarge: 32px;
    --padding-xxlarge: 40px;

    /* Border radius */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xlarge: 16px;
    --border-radius-xxlarge: 20px;
    --border-radius-x: 50px;
    --border-radius-max: 100%;

    /* Transitions */
    --transition-1: all .1s;
    --transition-2: all .2s;
    --transition-3: all .3s;
    --transition-4: all .4s;
    --transition-5: all .5s;

    /* Fonts */
    /* PlayfairDisplay */
    --font-primary: 'PlayfairDisplay';
    --font-primary-italic: 'PlayfairDisplay-Italic';
    --font-primary-medium: 'PlayfairDisplay-Medium';
    --font-primary-medium-italic: 'PlayfairDisplay-MediumItalic';
    --font-primary-semibold: 'PlayfairDisplay-SemiBold';
    --font-primary-semibold-italic: 'PlayfairDisplay-SemiBoldItalic';
    --font-primary-bold: 'PlayfairDisplay-Bold';
    --font-primary-bold-italic: 'PlayfairDisplay-BoldItalic';
    --font-primary-extrabold: 'PlayfairDisplay-ExtraBold';
    --font-primary-extrabold-italic: 'PlayfairDisplay-ExtraBoldItalic';
    --font-primary-black: 'PlayfairDisplay-Black';
    --font-primary-black-italic: 'PlayfairDisplay-BlackItalic';

    /* Parkinsans */
    --font-secondary-light: 'Parkinsans-Light';
    --font-secondary: 'Parkinsans';
    --font-secondary-medium: 'Parkinsans-Medium';
    --font-secondary-semibold: 'Parkinsans-SemiBold';
    --font-secondary-bold: 'Parkinsans-Bold';
    --font-secondary-extrabold: 'Parkinsans-ExtraBold';

    scroll-behavior: smooth;
}

/* — ─ ● */
i {
    line-height: 0.5em;
    vertical-align: -0.15em;
    display: inline-flex;
}

img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

body {
    background-color: #0E0E0E;
    font-family: var(--font-secondary);
}

h1, h2, h3, h4, h5, h6, p {
    line-height: 1.6;
}

hr {
    width: 100%;
    height: 1px;
    background-color: #1C1D20;
    border: none;
}

/*Link Color*/
a:link {
    color: #3943B7;
    text-decoration: none;
    transition: var(--transition-2);
}

a:visited {
    color: #3943B7;
    text-decoration: none;
}

a:hover {
    color: #3943B7;
    text-decoration: none;
}

a:active {
    color: #4D56BE;
    text-decoration: none;
}

/*SCROLL BAR*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    display: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--gray);
}

::-webkit-scrollbar-track {
    background-color: var(--chinese-black);
}

::-webkit-scrollbar-corner {
    background-color: var(--chinese-black);
}

/* text selection */
::selection {
    background-color: #C7CBFF;
    color: #3943B7;
}

::-moz-selection {
    background-color: #C7CBFF;
    color: #3943B7;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* element shift */
.txt-shift-wrapper {
    position: relative;
    display: inline-block;
    line-height: 1.25;
    overflow: hidden;
}

.txt-shift-wrapper span {
    display: block;
    transition: transform 0.3s ease;
    line-height: inherit;
}

.txt-shift-wrapper span:first-child {
    transform: translateY(0%);
}

.txt-shift-wrapper span:last-child {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(0%);
}

/* Animate shift on hover/focus anywhere the wrapper is used */
.txt-shift-wrapper:hover span:first-child,
.txt-shift-wrapper:focus-visible span:first-child,
.txt-shift-wrapper.btn-hovered span:first-child {
    transform: translateY(-100%);
}

.txt-shift-wrapper:hover span:last-child,
.txt-shift-wrapper:focus-visible span:last-child,
.txt-shift-wrapper.btn-hovered span:last-child {
    transform: translateY(-100%);
}

/* link underline */
.txt-underline {
    display: inline-block;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.txt-underline::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #C7CBFF;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 5px;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .5s cubic-bezier(0.65, 0, 0.35, 1);
}

.txt-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Noise system - ensures proper stacking */
.noise {
    position: relative;
    isolation: isolate;
    /* Creates new stacking context */
}

.noise::before {
    content: "";
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Direct children of noise containers stack above the noise */
.noise>* {
    position: relative;
    z-index: 1;
}

/* Ripple hover system */
.ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ripple-fill {
    position: absolute;
    inset: 0;
    transform: translateY(101%);
    background: linear-gradient(-45deg, #303CCD 0%, #141C9B 100%);
    border-radius: 999px;
    will-change: transform;
    z-index: -1;
}

.ripple-content {
    display: flex;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

@media only screen and (max-width: 550px) {
    .ripple.noise {
        isolation: auto;
    }

    .ripple.noise::before {
        z-index: 3;
        border-radius: 100px;
    }
}