.ClueWraper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
    border: 2px solid #dedede;
    background-color: #f1f1f1;
    border-radius: 5px;
    /*padding: 10px;
    margin: 10px 0;*/

    background-color: #ddd;
    outline: none;
    border-style: solid;
    font-size: 2.8vh;
    visibility: hidden;
    background: no-repeat url('../images/Background/noteClue.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    

    padding-left: 1.7vw;
    
    height: 42vh;
    width: 21.0vw;

    overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}






@media (min-aspect-ratio: 16/10) {
    .ClueWraper {
       
        height: 41vh;
        width: 21.0vw;
        
    }

    
}

@media (min-aspect-ratio: 16/9) {
    .ClueWraper {
        height: 42vh;
        width: 21.0vw;
       
    }
 
}


@media (min-aspect-ratio: 21/9) {
    .ClueWraper {
       
        width: 21.0vw;
        height: 38vh;
       
    }

}







.AlarmMess {
    animation-duration: 2.0s;
    animation-name: alarmMess;
    animation-iteration-count: infinite;
    /*cursor: pointer;*/
}




@keyframes alarmMess {
    0% {
        /*width: 2.5em;
        height: 2.5em;*/
        /*opacity: 1.0;
        border-color: red;*/
        /* background-color: rgba(60, 60, 60, 0.8);*/
        /*color: white;*/
        border-color: black;
        /*border: 1px solid;*/
    }

    100% {
        /*width: 3.0em;
        height: 3.0em;*/
        /* opacity: 0.6;
        border-color: Aqua;*/
        /*background-color: #ddd;
        color: black;*/
        border-color: yellow;
        /* border: 5px solid yellow;*/
    }
}



#mydivheader{
   font-size: 3.5vh;
}