@font-face {
    font-family: AnonymousProBold;
    src: url(gravitylab/AnonymousPro-Bold.ttf);
}

* {
    box-sizing: border-box;
}

html {
    overflow: hidden;
}

body {
    transform-style: preserve-3d;
    perspective-origin: 500px 400px;
    perspective: 400px;
}


.relative {
    position: relative;
}

.absolute {
    position: absolute;
}




.frontsidem {
    transform-style: preserve-3d;
    position: relative;


    transform: translateY(5%) rotateY(-15deg) scale(0.7);
    /*deoarece este pusa perspectiva, efectul 3d va fi */

}


/*MONITOR*/
.computer_monitor {
    width: inherit;
    height: inherit;
    padding: 20px;
    padding-bottom: 100px;

    background-color: #cfcfcf;
    border-radius: 15px;
    border-right: 13px solid #7b7b7b;
    /*transform: rotateY(-2deg) rotateZ(0deg) translateY(0px);*/
    transform: rotateY(5deg) rotateZ(-5deg) translateY(0px);
    transition: all 2s ease;


}



/*ARROWS AND BUTTONS*/
.game_controllers {
    width: 100%;
    margin-left: auto;
    margin-top: none;
    margin-right: none;

    padding: 15px;

}

.game_buttons {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: auto;
}

.g_arrow {
    display: inline-block;
    width: 60px;
    height: 60px;

    background-color: unset;
    border: unset;

    color: #791d24;
    font-size: xxx-large;
    text-align: center;
    line-height: 120%;


}

.mbut {
    display: none;
    width: 12px;
    height: 12px;
    background-color: #7b7b7b;
    margin-left: auto;
}




/*COMPUTER SUPORT*/
.picior-calc {
    display: none;
    position: relative;
    width: 0vw; /*60vw*/
    height: 20vh;

    margin-top: -25px;
    margin-left: auto;
    margin-right: auto;
}

.picior-side {
    position: relative;
    width: 65px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;

    transform-origin: left;
    background-color: #bab9b9;
    border-radius: 0 0 15px 0;
    border-right: 13px solid #7b7b7b;

    transform: translateZ(-3px);

}


@media only screen and (min-width: 450px) {
    .computer_monitor {
        transform: rotateY(2.0deg) rotateZ(-3deg) translateY(0px);
        padding: 31px;
    }

    .game_controllers {
        width:36px; 
        margin-top: 5px;
        margin-right: 20px;
    
        padding: 0;    
    }

    .game_buttons {
        display: none;
    }

    .g_arrow {
        background-color: #d25058;
        border: 2px solid #908f8f;
        color: white;
    }

    .picior-calc {
        display: block;
    }

    .mbut {
        display: inline-block;
    }
}




/*GAME*/
.game_container {
    position: relative;
    /*O NEAPARAT, FOLOSITE DE SCRIPT*/
    width: 100%;
    height: 100%;
    border-left: 6px solid #7b7b7b;
    border-top: 4px solid #7b7b7b;
    border-bottom: 4px solid #7b7b7b;


    margin: auto;
    overflow: hidden;
}

.image_start {
    width: 100%; height: 100%;

    position: absolute;
    opacity: 1;

    transition: all 4s ease;
}

.text_start {
    display: block;
    position: absolute;
    width: 70%;
    left: 50%;
    transform: translate(-50%);

    color: #4e4343;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;
    text-align: center;
    text-shadow: 1px 1px 0px #c4323c;
}

#button_start {
    display: none;
    position: absolute;

    width: 200px;
    height: auto;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%);

    padding: 13px 3px;

    border: 1px solid black;
    border-radius: 5px;
    background-color: #d25058;
    box-shadow: 10px 10px 100px #ff0010;

    color: white;
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2;

    opacity: 0.7;

    transition: all 2s ease;

}

#canvas, #canvas2 {
    position: absolute;

    /*margin: auto;*/
    transition: all 0.3s linear;
}


.obj {
    position: absolute;
    transform: translate(-50%,-50%);
    transition: left 0.5s linear, top 0.5s ease-in;
}






/* ///////////////////////// */

.pointer-hand {
    display: none;
    width: 69px;
    height: 105px;

    position: absolute;
    top: 55%;
    left: 53%;
    transform: translate(-50%, 0);

    background-image: url(hand.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index: 20;
    animation: pointer-hand 1.5s ease-out infinite;
    animation-timing-function: revert;
    transition: all 2s ease;

    opacity: 1;
}

.pointer-hand::after {
    position: absolute;
    content: "Click Aici!";
    color: white;
    text-align: center;
    font-size: 20px;

    top: 100%;
    left: 7px;

    text-shadow: 2px 2px 1px black;
}


@media only screen and (min-width: 450px) {
    #button_start {
        display: block;
    }

    .text_start {
        display: none;
    }    
        
    .pointer-hand {
        display: block;
    }    
}









@keyframes pointer-hand {
    50% {
        top: 60%;
    }
}