body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
}

.title {
    position: absolute;
    background-color: black;
    border-radius: 5%;
    animation: shadowAnimation 2s infinite, borderAnimation 2s infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 400px;
    height: 400px; */
    width: 240px;
    height: 340px;
}
.titlesub {
    border-radius: 4%;
    background-color: rgba(255, 255, 255, 0.828);
    width: 210px;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: backgroundAnimation 1s infinite alternate; /* Adjust the animation duration */
}

.titlebox {
    border-radius: 4%;
    background-color: black;
    width: 200px;
    height: 300px;
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    justify-content: center;
}
.text{
    text-align: center;
    margin: auto;
}


@keyframes shadowAnimation {
    0% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

@keyframes borderAnimation {
    0% {
        border: 2px dotted white;
    }

    50% {
        border: 4px dotted white;
    }

    100% {
        border: 2px dotted white;
    }
}

@keyframes backgroundAnimation {
    0% {
        background-color: rgba(255, 255, 255, 0.828);
    }

    100% {
        background-color: rgba(255, 255, 255, 0.3);
    }
}