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

body{
    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background-image:
    url('../images/bg.jpg');

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;
}

/* Much Lighter Glassmorphism Card Container */
.container{

    width:auto;

    max-width:600px;

    background:rgba(255, 255, 255, 0.88);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255, 255, 255, 0.8);

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12);

}

h1{

    color:#0f172a;

    font-size:28px;

    margin-bottom:25px;

    text-align:center;

    letter-spacing:1px;

}

.container p{

    color:#334155;

}

.nav-grid{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

/* Square Navigation Buttons */
.square-btn{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:140px;

    height:140px;

    background:rgba(37, 99, 235, 0.9);

    color:#ffffff;

    text-decoration:none;

    border-radius:20px;

    border:1px solid rgba(255, 255, 255, 0.4);

    box-shadow:0 8px 20px rgba(37, 99, 235, 0.25);

    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.35s ease;

}

.square-btn i{

    font-size:36px;

    transition:transform 0.35s ease, color 0.3s ease;

}

.square-btn span{

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

/* Button Hover Effect */
.square-btn:hover{

    transform:scale(1.08) translateY(-6px);

    background:rgba(29, 78, 216, 0.95);

    border-color:rgba(147, 197, 253, 0.9);

    box-shadow:
        0 15px 30px rgba(37, 99, 235, 0.35),
        0 0 20px rgba(96, 165, 250, 0.2);

}

.square-btn:hover i{

    transform:scale(1.12) rotate(-3deg);

    color:#ffffff;

}

.square-btn:active{

    transform:scale(1.02) translateY(-2px);

}

/* Top Back to Home Button */
.back-home-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #1e293b;

    background: rgba(241, 245, 249, 0.9);

    border: 1px solid #cbd5e1;

    padding: 8px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;

    transition: all 0.3s ease;

}

.back-home-btn:hover {

    background: #2563eb;

    color: #ffffff;

    border-color: #2563eb;

    transform: translateX(-3px);

}

@media(max-width:768px){

    body{

        padding:20px;

    }

    .container{

        width:100%;

        padding:25px;

    }

    .nav-grid{

        gap:12px;

    }

    .square-btn{

        width:100px;

        height:100px;

    }

    .square-btn i{

        font-size:26px;

    }

    .square-btn span{

        font-size:11px;

    }

}