@charset "utf-8";

html, body {
    font-family: 'Fira Code', monospace;
    margin:0px; 
    padding:0px;
    overflow: hidden;
    width:100%;
    height:100%;
}

body {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/*    cursor: auto;
    transform: translate(-100px, 0px);
    transform-style: preserve-3d;
    transform: rotateY(
-12deg
) translate(-100px, 0px) scale(1.1);
    tr: 1.2;
*/
canvas {
   
    cursor: auto;
    transform-style: preserve-3d;
}

.zoomAnimation {
    transition: 300ms ease;
    transform: translate(0,0) scale(1);
    transform-origin: left top;
    position: relative;
}

.details {
    position:fixed;
    top:30px; 
    left:30px; 
    right:30px;
    max-width:300px;
    max-height:400px;
    overflow: auto;
    padding:25px;
    background:#fff;
    border-radius: 15px;
    box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.23);
}

.close {
    width:15px;
    height:15px;
    cursor: pointer;
    position: absolute;
    right:10px;
    top:10px;
}

.close img {
    width:100%;
}

.details.none {display: none;}

.details h1 {
    font-size: 22px;
    margin-top:0px;
    text-align: left;
}


.wrap_row 
    h3 {
        font-size: 15px;
        padding:5px;
    border-bottom: solid 1px #ccc;
    }

    .wrap_row .content {
        display: flex;
        margin-bottom: 10px;;
    }

    .wrap_row .content span:nth-child(1){
        flex:1;
    }

    .wrap_row .content span:nth-child(2){
        text-align: right;
    }