body {
    font-family: 'Silkscreen', cursive;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.base {
    display: flex;
    flex-direction: column;
    color: hsl(240, 80%, 70%);
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgba(90, 14, 6, 0.6), rgba(94, 20, 147, 0.600)), url('./baal.jpg');
    background-size: cover;
    background-position: center;
}
.typing {
    position: relative;
    margin-left: 10px;
}
.typing::after {
    content: "";
    position: absolute;
    right: -8px;
    width: 0;
    height: 95%;
    padding: 0;
    border: 2px solid white;
    animation: blink .8s infinite ease;
}
.with-heart {
    font-size: x-large;
    position: absolute;
    bottom: 1%;
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@media (max-width:600px) {
    .base {
        display: flex;
        flex-direction: column;
        color: hsl(240, 80%, 70%);
        background: linear-gradient(rgba(197, 126, 118, 0.333), rgba(161, 107, 200, 0.453)), url('./baalM.jpg');
        background-size: cover;
        background-position: center;
    }
}