#keyboard-input {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    padding: 1rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: none;
}

textarea {
    font-family: "Open Sans";
    background: black;
    color: white;
    resize: none;
}

.title {
    font-family: "Open Sans";
    text-align: center;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.green {
    color: #53D133;
}

/* POUR DEBUGGER
body{*/
/*    background:url('https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2014/6/9/1402315218154/bbe45935-adce-4b28-9e9f-572161972d22-2060x1236.jpeg?width=1300&quality=85&fit=max&s=f8277dca749ab7df62c70c541deb98d0') no-repeat;*/
/*    background-size:cover;*/
/*}*/

.safezone-container {
    position: fixed;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Roboto";
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    transition: 0.5s;
}

.safezone-container.active {
    top: 1vh;
}

.safezone-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.safezone-container img {
    height: 5vh;

}

.img-container {
    padding: 1vh;
    width: fit-content;
}

.icon-green {
    display: none;
}


.icon-red {
    display: none;
}

.green .img-container {
    background: radial-gradient(#53D133 0%, transparent 70%);
}

.red .img-container {
    background: radial-gradient(#D73C3C 0%, transparent 70%);
}

.safezone-text {
    padding: 4vh;
    text-align: center;
    font-size: 3vh;
    font-weight: bold;
}

.green .safezone-text {
    background: radial-gradient(rgba(83, 209, 51, 0.57) 0%, transparent 70%);
}

.red .safezone-text {
    background: radial-gradient(rgba(215, 60, 60, 0.57) 0%, transparent 70%);
}

#safezone-desc {
    font-size: 2vh;
}

.green #safezone-desc {
    text-shadow: 0px 2px 2px #53D133;
}

.red #safezone-desc {
    text-shadow: 0px 2px 2px #D73C3C;
}

.green .icon-green {
    display: block;
}

.green .icon-red {
    display: none;
}

.red .icon-red {
    display: block;
}

.red .icon-green {
    display: none;
}


.scale-in-top {
    -webkit-animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scale-out-top {
    -webkit-animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-top {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@-webkit-keyframes scale-out-top {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}

@keyframes scale-out-top {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        opacity: 1;
    }
}