body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #101528;
    cursor: url("images/genshin-cursor.png"), auto;
}

@font-face {
    font-family: "genshinfont";
    src: url("fonts/zh-cn.ttf");
}

@font-face {
    font-family: "genshindripfont";
    src: url("fonts/genshin-drip-font.ttf");
}

a:hover {
    cursor: url("images/genshin-cursor.png"), auto;
}

.main-container {
    width: 800px;
    height: auto;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 50px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
}

.map {
    display: flex;
    margin: 0;
    height: 700px;
    width: auto;
    padding: 0;
    position: static;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(61, 221, 250, 0.80));
    z-index: 1;
}

.deco {
    position: absolute;
    height: 700px;
    width: 800px;
    margin: 50px;
    z-index: 2;
}

#location-marker {
    position: absolute;
    top: 212px;
    left: 195px;
    height: 30px;
    width: auto;
    transform: rotate(40deg);
}

.desc {
    font-family: "genshinfont", Georgia, serif;
    position: absolute;
    height: 700px;
    width: 800px;
    margin: 50px;
    z-index: 2;
}

#about-text {
    position: absolute;
    font-size: 18px;
    top: 105px;
    left: 177px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#shrines-text {
    position: absolute;
    font-size: 18px;
    top: 215px;
    right: 250px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#blog-text {
    position: absolute;
    font-size: 18px;
    top: 325px;
    left: 205px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#art-text {
    position: absolute;
    font-size: 18px;
    top: 275px;
    left: 362px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#other-text {
    position: absolute;
    font-size: 18px;
    bottom: 200px;
    right: 170px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 01px #000000);
}

.exploration {
    font-family: "genshinfont", Georgia, serif;
    position: absolute;
    height: 700px;
    width: 800px;
    margin: 50px;
    z-index: 2;
}

#exploration-about {
    position: absolute;
    font-size: 10px;
    top: 133px;
    left: 148px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#exploration-shrines {
    position: absolute;
    font-size: 10px;
    top: 243px;
    right: 210px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#exploration-blog {
    position: absolute;
    font-size: 10px;
    top: 355px;
    left: 155px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#exploration-art {
    position: absolute;
    font-size: 10px;
    top: 303px;
    left: 310px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

#exploration-other {
    position: absolute;
    font-size: 10px;
    bottom: 183px;
    right: 120px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px #000000);
}

.percent {
    color: #ffcf22;
}

.main-text {
    position: absolute;
    height: 700px;
    width: 100%;
    top: 0;
    z-index: 2;
}

#title {
    font-family: "genshindripfont", Georgia, serif;
    position: absolute;
    font-size: 60px;
    right: 50px;
    top: 40px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 3px rgba(61, 221, 250, 0.80));
}

#this-site {
    font-family: "genshinfont", Georgia, serif;
    position: absolute;
    font-size: 20px;
    right: 50px;
    top: 110px;
    margin: 0;
    color: white;
    filter: drop-shadow(0 0 1px rgba(61, 221, 250, 0.80));
}

.waypoints {
    position: absolute;
    height: 700px;
    width: 800px;
    margin: 50px;
    z-index: 2;
}

#about-sot7 {
    position: absolute;
    top: 30px;
    left: 190px;
    height: 60px;
    width: auto;
    filter: drop-shadow(none);
    transform: none;
    transition: filter 0.2s ease-out, transform 0.2s ease-out;
}

#about-sot7:hover {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
}

#shrines-sot7 {
    position: absolute;
    top: 145px;
    right: 260px;
    height: 60px;
    width: auto;
    filter: drop-shadow(none);
    transform: none;
    transition: all 0.1s ease-out;
}

#shrines-sot7:hover {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
}

#blog-sot7 {
    position: absolute;
    top: 260px;
    left: 130px;
    height: 60px;
    width: auto;
    filter: drop-shadow(none);
    transform: none;
    transition: all 0.1s ease-out;
}

#blog-sot7:hover {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
}

#art-sot7 {
    position: absolute;
    top: 205px;
    left: 350px;
    height: 60px;
    width: auto;
    filter: drop-shadow(none);
    transform: none;
    transition: all 0.1s ease-out;
}

#art-sot7:hover {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
}

#other-sot7 {
    position: absolute;
    bottom: 248px;
    right: 90Px;
    height: 60px;
    width: auto;
    filter: drop-shadow(none);
    transform: none;
    transition: all 0.1s ease-out;
}

#other-sot7:hover {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
}