body{
    font-family: 'mouse memoirs', Arial, Helvetica, sans-serif;
    font-size: 22px;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: min-content 20% 20% 20% 20%;
    grid-template-rows: 10em min-content min-content ;
    justify-items: center;
    background-image: url('./resources/alley1.png');
    background-size: 100%;
}


.main-game-wrapper{
    z-index: 3;
    grid-column: 4;
    grid-row-start: 1;
    display: grid;
    grid-template-rows: 10em min-content min-content;
   }
.catID-wrapper{
    border: 1px solid black;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 75% 25%;
    height:10em;
    width: 17em;
    background:linear-gradient(#999999, #CCCCCC);
    overflow: hidden;
    position: relative;
    transition: transform .5s;
    overflow: hidden;

    
}
.catID-wrapper:hover{
    align-content: center;
    transform:translateY(20%) scale(1.2);
}

#watermark{
    position: absolute;
}

.id-photo{
    grid-column: 1;
    width: 60%;
    padding: 1em;
    max-width: 120px;
    max-height: 120px;
    overflow: hidden;
}
.id-name{
    grid-column: 1;
    grid-row: 2;
    margin-left: 10%;
    margin-top:10%;
}
.id-attributes-wrapper{
   /*  border: 1px solid black; */
    grid-column: 2;
}
.id-attributes-list{
    margin-right: 1em;
    
}

/* .id-attributes-list > .vardata{

} */

.button-wrapper{
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 1;
    justify-items: center;
    margin: 1em .2em 1em;   
}
.buttons{
    overflow: hidden;
    background-color: rgb(187, 203, 214);
    height: 100%;
    border: 1px rgba(177, 185, 177, 0.7);
    border-radius: 10px;
    margin: 3px;
    transition: transform .3s, background-color .3s;
}
.buttons:hover{
transform: scale(1.1);
background-color: rgb(207, 223, 234);
}
.start{
    margin-left: 40px;
}

.criteria-wrapper{
    background-color: #82d6b3 ;
    height: 150px;
    border: 1px solid black;
    border-radius: 10px;
    grid-column: 1;
    grid-row:3;
    overflow: hidden;
    font-size: 23px;
    animation-duration: 2s;
    animation-name: overlapper;
}
@keyframes overlapper{
    from{
       overflow: hidden;
        
    }
    50%{      
        overflow: visible;
    }
    99%{
        overflow: visible;
    }
    to{
        overflow:hidden;
    }
}
.criteria{
    margin-top: 0;
}
.criteria-text{
/*     
    animation-duration: 2s;
    animation-name: typewriter; 
*/
    margin: 5px;
}

.notify-box{
    display: grid;
    grid-template-columns: 90%;
    grid-template-rows: 20% 20% 20% 20%;
    border: 1px solid black;
    border-radius: 1em;
    position: absolute;
    width: 16em;
    height: 15em;
    background-color: rgba(177, 185, 177, 0.98);
    opacity: 0;
    z-index: 1;
    transition: opacity 1s;
}
.notify-text{
    margin: 3em;
}
.base-text{
    grid-row: 1;
}
.reviewDiv{
    grid-row: 2;
}
.next{
    grid-row: 4;
}
.counters{
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.next{
    height: 3em;
    width: 5em;
    font-family: mouse memoirs;
    font-size: 22px;
    margin: 1em auto;
}