html, body {
    background: #ffffff;
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#main {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg)
}
#wrraper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left:0%;
    /*clip-path: inset(0% 2.7% 0% 0%);*/
}
#bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
#canvasDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#logo {
    position: absolute;
    width: 18%;
    top: 2%;
    left: 1.5%;
    z-index: 9;
}
#title {
    position: absolute;
    width: 23%;
    top: 8.5%;
    right: 3%;
    z-index: 9;
}
#instructions {
    position: absolute;
    width: 50%;
    top: 17%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9;
}
#cards-board {
    position: absolute;
    top: 25%;
    left: 9.2%;
    width: 94%;
    height: 65%;
}
.card {
    position: absolute;
    width: 12%;
    height: 30%;
    transform-origin: center center;
    cursor: pointer;
    z-index: 1;
}
.close-icon {
    position: absolute;
    box-sizing:border-box;
    width: 5%;
    height: 10%;
    border-width: 3px;
    border-style: solid;
    border-color: #25abff;
    border-radius: 100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color: #25abff;
    box-shadow: 0px 0px 5px 5px rgba(37, 171, 255, 0.5), 0px 0px 8px 8px rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    cursor: pointer;
    top: 0.5%;
    left: 0.5%;
}
#checkBtn {
    position: absolute;
    bottom: 12%;
    right: 10.5%;
    width: 15%;
    z-index: 12;
    cursor: pointer;
}
#fullscreen {
    position: absolute;
    width: 2%;
    height: auto;
    right: 1.5%;
    bottom: 9.5%;
    cursor: pointer;
}
#tryAgain {
    position: absolute;
    top: 45%;
    left: 42%;
    width: 17%;
    height: auto;
    transition: 0.7s;
    opacity: 0;
    visibility: hidden;
    z-index: 20;
}
#playAgain {
    position: absolute;
    bottom: 1%;
    right: 1%;
    width: 8%;
    height: auto;
    transition: 0.7s;
    opacity: 0;
    visibility: hidden;
    z-index: 20;
}
#heidad {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    visibility: hidden;
    background-color: transparent;
    z-index: 30;
}
.fadeIn {
    animation: fadeIn 1.5s both linear;
}
.fadeOut {
    animation: fadeOut 3s both linear 4s;
}
@keyframes fadeIn {
    0% { opacity: 0; width: 5%; }
    14% { opacity: 7; width: 37.5%; }
    50% { opacity: 1; width: 100%; }
    100% { opacity: 1; width: 100%; }
}
@keyframes fadeOut {
    0% { opacity: 1; width: 100%; }
    100% { opacity: 0; width: 100%; }
}