/* ==========================================
   BACKGROUND
========================================== */

.tree-page{

    min-height:100vh;

    background:url('../img/penghijauan/taman-sekolah.png');

    background-size:cover;
    background-position:center;
}

.tree-overlay{

    min-height:100vh;

    background:rgba(0,0,0,.15);

    display:flex;

    justify-content:center;
    align-items:center;

    padding:20px;
}

/* ==========================================
   FIELD
========================================== */

.field{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:25px;

    max-width:700px;

    margin:30px auto;
}

.spot{

    width:100%;
    aspect-ratio:1/1;

    max-width:150px;

    background:#8D6E63;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:70px;

    transition:.3s;

    margin:auto;
}

.spot:hover{

    transform:scale(1.05);
}

.spot.done{

    background:#6D4C41;
}

/* ==========================================
   ANIMASI
========================================== */

.tree-grow{

    animation:growTree .8s ease-out;
}

@keyframes growTree{

    0%{
        transform:scale(0);
    }

    50%{
        transform:scale(1.2);
    }

    100%{
        transform:scale(1);
    }
}
/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .glass-box{
        width:96%;
        padding:15px;
        overflow:hidden;
    }

     .field{

        width:100%;

        display:grid;

        grid-template-columns:
            repeat(3,1fr);

        gap:10px;

        margin:20px auto;
    }

    .spot{

        max-width:90px;

        font-size:42px;
    }

}

@media (max-width:480px){

    .spot{

        max-width:75px;

        font-size:34px;
    }

}