/* Base page setup */
body{
    position: relative;
    background-color: burlywood;
}

/* ===========================
   Background styles per quote type
   Each class applies a background image
   and adjusts surrounding box transparency.
   =========================== */

/*
    Supported Quote Types (mapped to themes):
    motivation, inspiration, life, wisdom, love, success,
    leadership, happiness, change, perseverance, mindfulness,
    growth, courage, gratitude, resilience, friendship,
    creativity, humility, forgiveness, patience, integrity,
    self-reflection, empathy, purpose, justice, harmony,
    knowledge, hope, anger, fear, general
*/

.life, .mindfulness, .self-reflection, .empathy, .forgiveness{
    background-image: "../img/life.jpg";
}

.justice, .integrity{
    background-image: "../img/justice.jpg";
}

.hope, .harmony, .patience, .knowledge, .wisdom, .purpose, .general{
    background-image: "../img/wisdom.jpg";
}

.love, .friendship, .happiness, .gratitude{
    background-image: "../img/love.jpg";
}

.leadership{
    background-image: "../img/leadership.webp";
}

.change{
    background-image: "../img/change.webp";
}

.perseverance, .growth, .courage, .resilience, .inspiration, .motivation, .success{
    background-image: "../img/motivation.jpg";
}

.creativity{
    background-image: "../img/creativity.jpg";
}

.anger, .fear, .humility{
    background-image: "../img/sad.jpg";

    ~.main-container .up-box, ~.main-container .down-box{
    background-color: rgb(248, 224, 228, 0.15);
    }

    ~.main-container .second-up-box, ~.main-container .main-box{
        opacity: 0.75;
    }
}

/* Blurred fullscreen background image */
.background-img{
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: blur(5px);
    z-index: -3;
    top: 0;
    left: 0;

    /* Style adjustments for quote container layers */
    ~.main-container .up-box, ~.main-container .down-box{
    background-color: rgb(255, 255, 255, 0.15);
    }

    ~.main-container .second-up-box, ~.main-container .main-box{
    background-color: rgba(255, 255, 255, 0.15);
    }
}


/* ===========================
   Quote box system
   =========================== */

.box{
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Container for layered boxes */
.main-container{
    display: flex;
    /* background-color: antiquewhite; */
    align-items: center;
    position: relative;
    z-index: -2;
}

/* Decorative glass-like layers (behind main box) */
.up-box, .down-box{
    position: absolute;
    background-color: rgb(9, 58, 62, 0.5);
    backdrop-filter: blur(10px);
    margin-top: -3vh;
    z-index: -1;
}

.second-up-box, .main-box{
    position: absolute;
    background-color: rgb(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: solid rgba(9, 58, 62, 0.3) 1px;
}

/* ===========================
   Quote text styling
   =========================== */

.quote-block{
    width: 100%;
    height: 100%;
}

.quote{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
    width: 100%;
    font-size: xx-large;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}

.name{
    margin-top: 2vh;
    margin-bottom: 2vh;
    width: 90%;
    font-size: larger;
    font-family: cursive;
    text-align: right;
}


/* ===========================
   Responsive Design
   =========================== */

@media screen and (max-width: 600px){
    .main-container{
        width: 80vw;
        height: 65vh;
        margin-top: 15vh;
        margin-left: auto;
        margin-right: auto;
    }

    .box{
        width: 65vw;
        height: 55vh;
    }

    /* Layer offsets for 3D stacked effect */
    .second-up-box{margin-left: 2.5vw;}
    .main-box{margin-left: 5vw; margin-top: 3vh;}
    .down-box{margin-left: 6.5vw; margin-top: 5vh;}

    .quote{
        height: 45vh;
    }
}

@media screen and (min-width: 600px) and (max-width: 700px){
    .main-container{
        width: 55vw;
        height: 50vh;
        margin: 25vh auto;
    }

    .box{
        width: 50vw;
        height: 40vh;
    }

    /* Layer offsets for 3D stacked effect */
    .second-up-box{margin-left: 1.5vw;}
    .main-box{margin-left: 3vw; margin-top: 3vh;}
    .down-box{margin-left: 3.75vw; margin-top: 5vh;}

    .quote{height: 30vh; font-size: x-large;}
}

@media screen and (min-width: 700px){
    .main-container{
        width: 55vw;
        height: 50vh;
        margin: 25vh auto;
    }

    .box{
        width: 50vw;
        height: 40vh;
    }

    /* Layer offsets for 3D stacked effect */
    .second-up-box{margin-left: 1.5vw;}
    .main-box{margin-left: 3vw; margin-top: 3vh;}
    .down-box{margin-left: 3.75vw; margin-top: 5vh;}

    .quote{height: 30vh;}
}