* {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Times New Roman', Times, serif;
    overflow: hidden;
}
body {
    background-color: black;
}
img {
    margin-top: 25%; 
    height: 40%;
    margin-left: 47%;
    transform: translateX(-50%);
}

svg {
    margin-top: 25%;
    height: 40%;
    margin-left: 47%;
    transform: translateX(-50%);
}

div.container{
    position: relative;
    overflow: visible;
}

div.back {
    width: 100%;
    text-align: center;
    margin-top: 2.5%;
}
button {
    font-size: 0.8em;
}

p {
    color: rgb(255, 255, 255);
    margin-left: 20px;
    font-size: 0.8em;
}

a {
    cursor: pointer;
}

div.bottom {
    margin-top: 15px;
    text-align: center;
}

/* speech bubble */
div.speech {
    background-color: white;
    /* border-style: solid;
    border-color: black;
    border-width: 0.5px; */
    display: inline-block;
    font-size: 0.9em;
    opacity: 0;
    padding-left: 0.3%;
    padding-right: 0.3%;
    white-space: nowrap;
    text-align: left;
    padding: 1%;
}

div.speech p {
    color: black;
    margin-left: 0;
}

div.talk {
    position: absolute;
    top: calc(65vw);
    left: 4%;
    text-align: center;
    z-index: 1;
}

button.button {
    margin-top: 2%;
    font-size: 0.7em;
    display: none;
}

div.more {
    top: calc(75vw);
    left: 11%;
}

.hide {
    opacity: 0;
}

button.show {
    display: inline-block;
}

svg.show {
    opacity: 1;
}

div.show {
    opacity: 1;
}


@media only screen and (max-width: 380px) {
    svg {
        height: 43%;
        margin-left: 50%;
    }
    p {
        font-size: 0.7em;
    }
    div.speech {
        font-size: 0.9em;
    }
    div.talk {
        top: 35vh;
    }
    
    button.button {

        font-size: 0.6em;
    }
    
    div.more {
    top: 40vh;
    left: 17%;
    }
}

@media only screen and (min-width: 480px) {
    img {
        margin-top: 75px;
        width: 100%;
        height: auto;
        margin-left: 0;
        transform: translateX(0);
    }
    svg {
        margin-top: 75px;
        width: 100%;
        height: auto;
        margin-left: 0;
        transform: translateX(0);
    }
    button {
        font-size: 0.9em;
    }
    p {
        font-size: 1em;
    }
    div.speech {
        font-size: 1.1em;
    }
    div.talk {
        top: calc(45vh);
        left: 9%;
    }
    
    button.button {
        margin-top:2%;
        font-size: 1em;
    }
    
    div.more {
        top: calc(55vh);
        left: 21%;
    }

}

@media only screen and (min-width: 1280px) {
    button {
        font-size: 1.2em;
    }
    svg {
        margin-top: 0;
        height: 957px; 
    }
    img {
        margin-top: 0;
        height: 957px; 
        width: auto;
        display: block;
        margin: auto;
    }
    div.back {
        bottom: 5%;
    }
    div.back {
        position: absolute;
        bottom: 2%;
    }
    div.bottom {
        position: absolute;
        top:2%;
        left: 38%;
    }
    div.bottom p {
        font-size: 1.2em;
        background-color: black;
    }
    div.speech {
        font-size: 1.2em;
    }
    div.talk {
        top: calc(57vh);
        left: 25%;
    }
    button.button {
        font-size: 1.1em;
    }

    div.more {
        top: calc(60vh);
        left: 32%;
    }
}

@media only screen and (min-width: 2000px) {
    div.talk {
        top: calc(36vh);
        left: 30%;
    }
    div.speech {
        font-size: 1.3em;
    }
    button.button {
        font-size: 1.2em;
    }

    div.back {
        position: absolute;
        bottom: -5%;

    }
    button {
        font-size: 1.3em;
    }
    div.more {
        top: calc(43vh);
        left: 35%;
    }
}