@import url("./common.css");
@import url("./fonts.css");

html {
  scroll-behavior: smooth; /* For smooth scrolling */
}

.divMain {
    background-image: url("../imgs/treasure/map-treasure-2.jpg");
    height: calc(100vh - 320px);
    background-size: 100% 100%;
    width: 100%;
    opacity: 1;
}
.htmlDiv{
    position: absolute;
    top: 70%;
    left: 22%;
    width: 3%;
    filter: drop-shadow(0 0 0.75rem rgb(220, 100, 20));   
}
.htmlDiv:hover {
    transform: scale(1.50);
}
.cssDiv{
    width: 2.1%;
    position :absolute;
    top: 70%;
    left: 20%;
    filter: drop-shadow(0 0 0.75rem rgb(20, 80, 220));
}
.cssDiv:hover {
    transform: scale(1.50);
}
.jsDiv{
    width: 2.5%;
    position: absolute;
    top: 55%;
    left: 30%;
    filter: drop-shadow(0 0 0.75rem rgb(220, 217, 20));
}
.jsDiv:hover {
    transform: scale(1.50);
}
.nodeDiv{
    width: 3.5%;
    position: absolute;
    top: 67%;
    left: 32%;
    border-radius: 30%;
    filter: drop-shadow(0 0 0.75rem rgb(192, 255, 153));
}.nodeDiv:hover {
    transform: scale(1.50);
}
.javaDiv{
    width: 2.5%;
    position: absolute;
    top: 45%;
    left: 40%;
    border-radius: 10%;
    filter: drop-shadow(0 0 0.75rem rgb(255, 234, 230));
}
.javaDiv:hover {
    transform: scale(1.50);
}
.phpDiv{
    width: 3.5%;
    position: absolute;
    top: 36%;
    left: 46%;
    filter: drop-shadow(0 0 0.75rem rgb(98, 113, 244));
}
.phpDiv:hover {
    transform: scale(1.50);
}
.symDiv{
    width: 3%;
    position: absolute;
    top: 26%;
    left: 48%;
    filter: drop-shadow(0 0 0.75rem rgb(124, 124, 125));
}
.symDiv:hover {
    transform: scale(1.50);
}

.sqlDiv{
    width: 5%;
    position: absolute;
    top: 23%;
    left: 57%;
    filter: drop-shadow(0 0 0.75rem rgb(0, 110, 255));
}
.sqlDiv:hover {
    transform: scale(1.50);
}

.MnDbDiv{
    width: 3.5%;
    position: absolute;
    top: 35%;
    left: 63%;
    filter: drop-shadow(0 0 0.75rem rgb(192, 255, 153));
}
.MnDbDiv:hover {
    transform: scale(1.50);
}

.reactDiv{
    width: 3%;
    position: absolute;
    top: 42%;
    left: 69%;
    border-radius: 30%;
    filter: drop-shadow(0 0 0.75rem rgb(53, 194, 241));
}
.reactDiv:hover {
    transform: scale(1.50);
}
.certiDiv{
    width: 4.5%;
    position: absolute;
    top: 61%;
    left: 56%;
    filter: drop-shadow(0 0 0.75rem rgb(247, 250, 247));
}
.certiDiv:hover {
    transform: scale(1.50);
}
.afpaDiv{
    width: 5%;
    position: absolute;
    top: 60%;
    left: 51%;
    filter: drop-shadow(0 0 0.75rem rgb(247, 250, 247));
}
.afpaDiv:hover {
    transform: scale(1.50);
}
.navireDiv{
    display: none;
}

@media (max-width: 768px) {

    .divMain{
        height: calc(100vh - 260px);
        .divSvg {      
            display: none;
        }
    }
    
    .divMainResponsiveM{
        display: none;
    }
    
    .divMainResponsiveT{
        .divSvgTab{
            .htmlDiv{
                position: absolute;
                top: 60%;
                left: 25%;
                width: 5%;
            }
            .cssDiv{
                position: absolute;
                top: 60%;
                left: 20%;
                width: 3.5%;
            }
            .jsDiv{
                position: absolute;
                top: 50%;
                left: 30%;
                width: 4%;
            }
            .nodeDiv{
                position: absolute;
                top: 55%;
                left: 35%;
                width: 5%;
            }
            .javaDiv{
                position: absolute;
                top: 43%;
                left: 41%;
                width: 3%;
            }
            .phpDiv{
                position: absolute;
                top: 34%;
                left: 44%;
                width: 5%;
            }
            .symDiv{
                position: absolute;
                top: 30%;
                left: 38%;
                width: 5%;
            }
            .sqlDiv{
                position: absolute;
                top: 20%;
                left: 50%;
                width: 9%;
            }
            .MnDbDiv{
                position: absolute;
                top: 30%;
                left: 60%;
                width: 8%;
            }
            .reactDiv{
                position: absolute;
                top: 40%;
                left: 70%;
                width: 5%;
            }
            .certiDiv{
                position: absolute;
                top: 52%;
                left: 56%;
                width: 8%;
            }
            .afpaDiv{
                position: absolute;
                top: 52%;
                left: 47%;
                width: 8%;
            }
        }
    }
    

}

@media (max-width: 380px) {
    .divMain {
        display: none;
    }
    .divMainResponsiveT {
        display: none;
    }
    .divMainResponsiveM{
        display: block;
        background-image: url("../imgs/treasure/map-smartphone-2.jpg");
        height: calc(100vh - 80px);
        background-size: 100% 100%;
        width: 100%;
        margin-top: 80px;
        .divSvgMobil{
            .certiDiv{
                position: absolute;
                top: 25%;
                left: 70%;
                width: 10%;
            }
            .afpaDiv{
                position: absolute;
                top: 25%;
                left: 80%;
                width: 10%;
            }
            .navireDiv{
                display: block;
                position: absolute;
                top: 60%;
                left: 15%;
                width: 6em;
            }
        }
    }
    
    
}