:root {
    --doggo-icon-size: 130px;
}

.character-container {
    position: absolute;
    height: 100%;
}

#poppetje {
    height: 100%;
    /* width: 100%; */
    object-fit: cover;
}

.speach-bubble {
    position: absolute;
    top: 36%;
    left: 75%;
    width: min(840px, calc(100vw - 90%));
}

p {
    margin-bottom: 1rem;
}

/* --speach bubble animation-- */
.speach-bubble > * {
   color: transparent;
}

.speach-bubble .cursor {
    margin-left: 0.1em;
    border-right: 0.06em solid;
    animation: caret 1s steps(1) infinite;
}

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



.bottom-right-link {
    position: absolute;
    bottom: 50px;
    right: 50px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: fit-content;
    height: 25px;
}

.bottom-right-link a {
    white-space: nowrap;
    /* margin: auto 0; */
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    border-color: var(--highlight-color);
    border-width: 1px;
    border-style: solid none solid solid;

    font-size: 10pt;
    font-family: 'gill_sans', sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: black;

    box-shadow: 1px 1px 8px #aaa
}

.little-box {
    width: 25px;
    height: 25px;
    background-color: var(--color-pop-bright);
}

.little-box.spin {
    animation: spin 10s ease-in-out infinite;
}

@keyframes spin {
    0% {
        transform: scale(1) rotate(0deg);
    }
    5% {
        transform: scale(1.2) rotate(360deg);
    }
    6% {
        transform: scale(1) rotate(360deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

a {
    background: white;
}

.bottom-left-icon {
    width: min(var(--doggo-icon-size), 20%);
}

@media (max-width: 768px) {
    .speach-bubble {
        top: 12%;
        left: 30%;
        width: 60vw;

        font-size: 14pt;

        height: calc(100vh - 25% - 145px);
        /* height: 60vh; */

        overflow-y: auto;
    }

    .bottom-right-link {
        right: 10px;
        bottom: 110px;
    }

    :root {
        --doggo-icon-size: 70px;
    }
}