* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #87cdeb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@font-face {
    font-family: "Roboto_Bold";
    src: url("../fonts/Roboto/Roboto-Bold.ttf");
}

.main_page_container {
    /* background-color: rgb(255, 8, 0); */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 20px;
    height: 100vh;
    width: 100%;
}


#imagebox{
    width: 90%; 
    max-width: 400px;
}

#imagebox img {
    
    width: 100%;
    filter: drop-shadow(10px 10px 10px #4790b0);
    height: auto; 
    animation: pop 2s ease-in-out infinite;
}


#textbox{
    /* background-color: blueviolet; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 80%;
    max-width: 500px; 
}

.OnProgress {
    /* background-color: rgb(255, 196, 0); */
    font-size: clamp(24px, 5vw, 40px);
    color: #ffff;
    text-transform: capitalize;
    font-family: "Roboto_Bold";

    overflow: hidden;
    white-space: nowrap;
    border-right: 0.15em solid orange;
    animation: typing 3s steps(27),
    blink 0.7s step-end infinite;
}

@keyframes pop {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes typing {
  from { width: 0; }
  to { width: 27ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* 
@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} */