:root {
    --background: #f5f7ff;
    --primary: #6625ff;
    --primary-hover: #4d1aff;
    --secondary: #eff3ff;
    --secondary-hover: #dbe5ff;
    --layer1: #ffffff;
    --layer2: #f2f2f2;
    --layer3: #e6e6e6;
    --border1: #d9d9d9;
    --border2: #cccccc;
    --border3: #bfbfbf;

    --white: #ffffff;
    --black: #000000;
    
    --header: #1b1b1f;
    --text: #30303d;

    --br-sm: 5px;
    --br-md: 10px;
    --br-lg: 15px;
    --br-xl: 20px;
    --br-pill: 50px;

    --transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

body {
    font-family: 'Inter Tight', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
}

.card-send {
    height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
    padding: calc(1rem + 1vw);
    background-color: var(--layer1);
    border: 1px solid var(--border1);
    border-radius: var(--br-lg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;

    transition: border 0.2s var(--transition), transform 0.2s var(--transition), box-shadow 0.2s var(--transition);
}

.card-send h1 {
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.card-send h1 i {
    margin-right: 1rem;
    color: var(--primary);
}

.card-send p {
    font-weight: 500;
    color: var(--white);
}

.card-send:hover {
    border: 1px solid var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 4px 60px #4c1aff52;
}

.planets {
    background-image: linear-gradient(180deg, #1e0f3f10, #130931d5), url('../content/planet.jpg');
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--header);
    letter-spacing: -0.7px;
    transition: var(--transition);
}

.navbar-brand:hover {
    color: var(--primary);
}

.btn {
    border-radius: var(--br-xl);
    transition: var(--transition);
    padding: 0.3rem 0.75rem;
}

.btn-primary {
    background-color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover {
    background-color: var(--primary-hover);
    border: 1px solid var(--primary-hover);
}

::selection {
    background-color: var(--primary);
    color: var(--layer1);
}

::-moz-selection {
    background-color: var(--primary);
    color: var(--layer1);
}