@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}


body{

    min-height:100vh;

    background:
    linear-gradient(
        160deg,
        #081C2C,
        #0B3D3A,
        #12263A
    );

    color:white;

}



/* LOGIN */

#login-screen{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}


.login-box{

    width:100%;

    max-width:390px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    padding:40px 20px;

    border-radius:30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.logo{

    font-size:clamp(2rem,10vw,3rem);

    font-weight:700;

    letter-spacing:1px;

    white-space:nowrap;

}


.subtitle{

    margin-top:15px;

    margin-bottom:30px;

    color:#B9C8D8;

}


input{

    width:100%;

    padding:16px;

    border:none;

    outline:none;

    border-radius:18px;

    font-size:16px;

}


#login-screen button{

    width:100%;

    margin-top:18px;

    padding:16px;

    border:none;

    border-radius:18px;

    background:#13A67A;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}


#error{

    margin-top:15px;

    color:#ff8a8a;

}





/* APP */

#app{

    padding-bottom:120px;

}


.page{

    display:none;

}


.page.active{

    display:block;

}





/* HERO */

.hero{

    padding:45px 25px;

    text-align:center;

    background:

    linear-gradient(
        135deg,
        #0E7490,
        #13A67A
    );

    border-radius:0 0 35px 35px;

    box-shadow:0 15px 40px rgba(0,0,0,.3);

}


.hero h1{

    font-size:clamp(2rem,8vw,2.7rem);

    letter-spacing:1px;

}


#welcome-message{

    margin-top:12px;

}


.verse{

    margin-top:20px;

    line-height:1.7;

    font-style:italic;

}





/* CARDS */

.cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    padding:25px;

}


.card-link{

    text-decoration:none;

    color:inherit;

}


.card{

    background:white;

    color:#102A43;

    border-radius:25px;

    min-height:170px;

    padding:20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

    transition:.3s;

}


.card:hover{

    transform:translateY(-5px);

}


.emoji{

    font-size:2.5rem;

    margin-bottom:12px;

}


.card h2{

    color:#0B3D3A;

    font-size:1.1rem;

    margin-bottom:8px;

}


.card p{

    color:#607080;

}





/* VERSE WIDGET */

.verse-widget{

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #E8F7F3
    );

    position:relative;

    overflow:hidden;

}


.verse-widget::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-40px;

    top:-40px;

    border-radius:50%;

    background:#13A67A;

    opacity:.15;

}


#daily-verse{

    margin-top:10px;

    color:#314E52;

    font-size:.9rem;

    line-height:1.6;

    font-style:italic;

}


#daily-reference{

    margin-top:12px;

    color:#0B3D3A;

    font-size:.85rem;

}





/* FEED */

.feed{

    padding:0 25px;

}


.post{

    background:white;

    color:#102A43;

    border-radius:25px;

    padding:25px;

    margin-bottom:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}


.post h3{

    color:#0B3D3A;

    margin-bottom:12px;

}


.post p{

    color:#455A64;

    line-height:1.7;

}





/* DAILY CHALLENGE */

.challenge-widget{

    background:

    linear-gradient(
        145deg,
        #ffffff,
        #F2F7FF
    );

    position:relative;

}


.challenge-widget::after{

    content:"🔥";

    position:absolute;

    right:20px;

    top:15px;

    font-size:2rem;

    opacity:.35;

}


#daily-challenge{

    color:#314E52;

}





/* COMING SOON PAGES */

.coming-soon{

    min-height:70vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:30px;

}


.coming-soon h1{

    font-size:2.2rem;

    margin-bottom:15px;

}


.coming-soon p{

    color:#B9C8D8;

    font-size:1.2rem;

}





/* CALENDAR */

.calendar-container{

    padding:0 25px;

}


.calendar-container iframe{

    width:100%;

    height:600px;

    border:none;

    border-radius:25px;

    background:white;

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}





/* NAVIGATION */

nav{

    position:fixed;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    width:94%;

    max-width:520px;

    background:white;

    border-radius:30px;

    padding:14px 10px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    box-shadow:0 15px 40px rgba(0,0,0,.4);

    z-index:100;

}


nav button{

    border:none;

    background:none;

    color:#0B3D3A;

    font-size:22px;

    display:flex;

    flex-direction:column;

    align-items:center;

    cursor:pointer;

}


nav span{

    font-size:11px;

    margin-top:3px;

}





/* MOBILE */

@media(max-width:600px){


.cards{

    padding:20px;

    gap:12px;

}


.card{

    min-height:150px;

}


.feed{

    padding:0 20px;

}


.calendar-container{

    padding:0 20px;

}


.calendar-container iframe{

    height:500px;

}


nav{

    width:96%;

}


}



@media(max-width:400px){


.cards{

    grid-template-columns:1fr;

}


.logo{

    font-size:1.8rem;

}


}