/*==================================================
    INTRODUCTION SECTION
==================================================*/
#introduction {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    z-index: 10;
}

#introductionContent {
    font-family: "Kode Mono", monospace;
    color: rgba(235, 245, 255, .92);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.9;
    width: min(900px, 90%);
    margin: 0 auto 40px;
    text-align: center;
    padding: 70px 60px;
    background: rgba(8, 15, 30, .48);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(150, 220, 255, .12);
    border-radius: 30px;
    box-shadow:
        0 0 60px rgba(0, 120, 255, .20),
        inset 0 0 30px rgba(255, 255, 255, .03);
}

#introductionHeading {
    font-family: "Audiowide", sans-serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    letter-spacing: .08em;
    color: white;
    margin-bottom: 55px;
    text-shadow: 0 0 18px rgba(120, 220, 255, .35);
}

#introductionContent p{
    margin-bottom: 20px;
}


#introductionBlockquote { 
    font-family:"syne mono",sans-serif;
    font-style:italic;
    font-size:clamp(1.5rem,3vw,2.4rem);
    line-height:1.8;
    color:rgba(255,255,255,.92);
    margin-top:70px;
    opacity:.9;
    text-shadow: 0 0 20px rgba(120,220,255,.18);
}

.question {
    font-family: "Michroma", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: .05em;
    color: #9FE9FF;
    margin: 70px 0;
    text-shadow:  0 0 25px rgba(80, 220, 255, .45);
}

.fadeSection {
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}

.fadeSection.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width:768px){

    #introduction{
        padding:80px 20px;
        min-height:auto;
    }

    #introductionContent{
        width:100%;
        padding:28px 22px;
        border-radius:18px;
    }

    #introductionHeading{
        font-size:1.6rem;
        margin-bottom:30px;
    }

    .introductionContent{
        font-size:1.05rem;
        line-height:1.8;
        margin-bottom:28px;
    }

    .question{
        font-size:1.35rem;
        margin:40px 0;
    }

    #introductionBlockquote{
        font-size:1.6rem;
        line-height:1.5;
        margin-top:45px;
    }

}