body {
    font-family: monospace;

}


.main {
    width: 100%;
    height: 97vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: absolute;
    max-width: 700px;
    width: 100%;
}

.frame {
    width: 100%;
}

.idle {
    position: absolute;
    left: 49px;

    width: 218px;
    bottom: 9px;

}


@media (max-width: 600px) {
    .idle {width: 141px; left: 36px; bottom: 3px}
    .warning {width: 369px; }

}

@media (max-width: 351px){
    .idle {width: 100px; left: 23px;}
}



.bopping {
    animation: bopping 3s ease-in-out infinite;
}

@keyframes bopping {

 
    0%{
        transform: translateY(0px);

    }
    
    50%{
        transform: translateY(-30px);
    }
    
    100%{
        transform: translateY(0px);
    }
}
.oppac {
    opacity: 0%;
    
}

.oppac:hover {
    opacity: 100%;
}

.frameb {
    position: absolute;
    z-index: 1;
    left: 1px;
    bottom: 3px;
}

.warning {
    display: flex;
    justify-content: center;
    height: 94px;
    position: absolute;
    top: 90px;
    margin: 3px;
    left: 102px;
}

.wirning {
    width: auto;
    height: 99px;
}

.texter {
    position: relative;
    bottom: 25px;
    left: 6px;
    width: 100%;
    color: white;
    font-size: larger;
    font-family: monospace;

}

.box {
    display: block;
    width: 114px;;

}

.lefti {
    left: 4px;
}

.warn {
    position: absolute;
    left: 126px;;
    top: 33px;
    color: black;
    font-family: monospace;
    }

.title {
    display: block;
    position: absolute;
    top: -342px;
    left: 162px;
    font-family: monospace;
    font-size: 35px;
}

ul {
    width: 330px;
    font-size: large;
    position: absolute;
    left: 233px;
    top: -61px;
    z-index: 3;

}

outline {
    outline: red solid 3px;    
}

.entering {
    position: absolute;
    left: 317px;
    top: 142px;
    height: 46px;
    width: 157px;
    border-width: medium;
    font-size: large;
    z-index: 1
}

.entering:hover {
    filter: invert();
}
.entering:focus {
    filter: invert();
}
