body{
    background-color: black;

}
html {
    font-size: 16px;
}

h1 { font-size: 3rem; }      /* 48px */
h2 { font-size: 2.25rem; }   /* 36px */
h3 { font-size: 1.75rem; }   /* 28px */
h4 { font-size: 1.5rem; }    /* 24px */
h5 { font-size: 1.25rem; }   /* 20px */
h6 { font-size: 1.125rem; }  /* 18px */

p  { font-size: 1rem; }      /* 16px */


body{
    margin: 0;

    height: 100svh;        /* full screen height on modern mobile browsers */
    overflow: hidden;      /* prevents scrolling */

    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */

    text-align: center;

    background-color: rgb(21, 7, 31);
}

.background-container {
    width: 100vw;
    height: 100vh;
    background: var(--bg-gradient);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* SVG Layer Positioning */
.svg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.circle-white {
    width: 100px;
    height: 100px;
    top: calc(50% - 220px);
    left: calc(50% - 150px);
    transform: none;
}

.heading{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    font-family: 'Roboto', sans-serif;
    background: radial-gradient(
        ellipse 100% 40% at 50% 70%,
        rgba(180,189,204,0.8) 0%,
        rgba(180,189,204,0.4) 100%
    );


    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.paragraph{
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 1rem;
    color: white;
    opacity: 70%;
}


.heading-description{
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    opacity: 40%;
    text-align: center;
    color: white;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;

    background: linear-gradient(to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 72%
        );

    pointer-events: none;
}

.circle-glow{
    position: absolute;

    width: 40%;
    height: 85%;

    border-radius: 100%;

    background: rgb(255, 87, 87, 0.5);

    top: 100px;
    left: 50%;

    filter: blur(120px);


    transform: translateX(-50%);

    z-index: -1;
}

.circle-big{
    position: absolute;

    width: 50vw;
    height: 50vw;


    border-radius: 100%;

    background: rgb(46, 9, 21);

    top: 15%;
    left: 50%;

    transform: translateX(-50%);
    box-shadow: inset 0.2vw 0.6vw 0px rgb(255, 0, 0);

    z-index: -1;
}

.circle-small{
    position: absolute;

    width: 45vw;
    height: 45vw;


    border-radius: 100%;

    background: rgb(0, 0, 0);
    
    top: 22%;
    left: 50%;

    transform: translateX(-50%);
    box-shadow: 0.2vw -0.5vw 0px rgb(247, 64, 64);
    z-index: -1;
}